import React from 'react';
import { motion } from 'framer-motion';
import { cloudConfig } from './config';
import { useInViewAnimation } from './hooks/useInViewAnimation';
import { containerVariants } from './utils/variants';
import CTAContent from './components/CTAContent';
import CTAButton from './components/CTAButton';
import styles from './styles/CloudCTA.module.css';

const CloudCTA = () => {
  const { ref, controls } = useInViewAnimation();

  return (
    <section 
      className={styles.container}
      aria-labelledby="cta-heading"
    >
      <div className={styles.wrapper}>
        <motion.div
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={controls}
          className={styles.content}
        >
          <CTAContent
            heading={cloudConfig.heading}
            description={cloudConfig.description}
            image={cloudConfig.images.arrow}
          />
          
          <CTAButton text={cloudConfig.button.text} />
        </motion.div>
      </div>
    </section>
  );
};

export default CloudCTA;