"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 pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-30">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-pink-200 rounded-full blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-200 rounded-full blur-[120px]" />
      </div>
      <Container>
        <div className="flex flex-col items-center text-center max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Heading className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900">
              Empowering <span className="text-pink-600">Women</span> Through Creativity
            </Heading>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <Subheading className="mt-6 text-xl text-neutral-600 max-w-2xl mx-auto">
              A dedicated marketplace for housewives and women artists to showcase their talent, sell unique products, and grow their local brands.
            </Subheading>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="flex flex-col sm:flex-row gap-4 mt-10"
          >
            <Button size="lg" className="bg-pink-600 hover:bg-pink-700 text-white px-8 h-12 text-lg rounded-full">
              Explore Products
            </Button>
            <Button size="lg" variant="outline" className="border-pink-200 hover:bg-pink-50 px-8 h-12 text-lg rounded-full">
              Become a Seller
            </Button>
          </motion.div>
        </div>
      </Container>
    </section>
  );
}