"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export function Hero() {
  return (
    <section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-[#F9F7F2]">
      <Container className="relative z-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <Heading className="text-5xl md:text-7xl font-light tracking-tight text-neutral-900 mb-6">
            Indian Soul. <br /> Western Ease.
          </Heading>
          <Subheading className="max-w-2xl mx-auto text-lg md:text-xl text-neutral-600 mb-10">
            Soft luxury women and kids clothing rooted in Indian soul and shaped by Western ease. Designed in Greater Noida, India.
          </Subheading>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-neutral-900 text-white hover:bg-neutral-800 px-8 py-6 text-lg rounded-none">
              Explore Women
            </Button>
            <Button size="lg" variant="outline" className="border-neutral-900 text-neutral-900 hover:bg-neutral-50 px-8 py-6 text-lg rounded-none">
              Explore Kids
            </Button>
          </div>
        </motion.div>
      </Container>
      <div className="absolute inset-0 z-0 opacity-20">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581338834647-b0fb40704e21?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center" />
      </div>
    </section>
  );
}