import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'

const Home = () => {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  })

  return (
    <div>
      {/* Hero Section */}
      <section className="relative h-screen">
        <div className="absolute inset-0">
          <img
            src="/images/scene.jpg"
            alt="Serene mountain lake landscape"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-secondary/70 to-primary/70" />
        </div>
        
        <div className="relative h-full flex items-center justify-center text-accent-snow">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center px-4"
          >
            <h1 className="text-4xl md:text-6xl font-bold mb-8 text-accent-snow">
              DeafGain LLC
            </h1>
            <p className="text-2xl md:text-3xl font-extrabold mb-8 bg-gradient-to-r from-accent-lake via-white to-accent-lake bg-clip-text text-transparent tracking-wider">
              "Language is a right, not a luxury."
            </p>
          </motion.div>
        </div>
      </section>

      {/* Mission Statement Section */}
      <motion.section
        ref={ref}
        initial={{ opacity: 0, y: 50 }}
        animate={inView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.8 }}
        className="py-20 bg-accent-snow"
      >
        <div className="max-w-4xl mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-secondary mb-6">
            Our Mission
          </h2>
          <p className="text-lg text-accent-mountain">
          We are dedicated to bridging language gaps, fostering inclusivity, and celebrating <br /> the unique contributions of the Deaf community through innovative solutions that benefit everyone.
          </p>
        </div>
      </motion.section>
    </div>
  )
}

export default Home