import { motion } from 'framer-motion';

export const HeroSection = () => {
  return (
    <section className="relative snap-start">
      <div className="relative flex h-screen w-full flex-col overflow-hidden bg-black">
        <video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
          <source src="/videos/hero.mp4" type="video/mp4" />
        </video>

        <div className="relative z-10 flex h-full w-full flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-16">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
            className="max-w-3xl space-y-6"
          >
           
            <h1 className="text-4xl font-medium leading-tight text-white sm:text-5xl md:text-6xl">
              The Planet's Sovereign Agentic Cloud
            </h1>
            <p className="max-w-xl text-lg text-white">
              A new generation of decentralized cloud and AI infrastructure.
              <br />
              Secure, scalable, efficient, and sovereign by design. Deploy your own datacenter, scale globally, and turn infrastructure into profit.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
            className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-white"
          >
            <span>Scroll to explore</span>
            <div className="flex items-center gap-3">
              <span className="h-px w-16 bg-white/60" />
              <span>Landing overview</span>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};