import { Hero } from "@/components/hero";
import { Features } from "@/components/features";
import { ProductGrid } from "@/components/product-grid";
import { Footer } from "@/components/footer";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      <Hero />
      <Features />
      <ProductGrid />
      
      {/* Seller CTA Section */}
      <section id="sell" className="py-20 bg-pink-600 text-white overflow-hidden relative">
        <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
          <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
            <path fill="#FFFFFF" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.6,90,-16.3,88.5,-0.9C87,14.5,81.4,29,73.1,41.4C64.8,53.8,53.8,64.1,40.8,71.1C27.8,78.1,13.9,81.8,-0.5,82.7C-14.9,83.6,-29.8,81.7,-43.1,75.1C-56.4,68.5,-68.1,57.2,-76.1,43.7C-84.1,30.2,-88.4,14.5,-88.1,-1.1C-87.8,-16.7,-82.9,-32.2,-74.1,-45.1C-65.3,-58,-52.6,-68.3,-38.8,-75.7C-25,-83.1,-12.5,-87.6,1.4,-90C15.3,-92.4,30.6,-83.6,44.7,-76.4Z" transform="translate(100 100)" />
          </svg>
        </div>
        <Container>
          <div className="max-w-3xl relative z-10">
            <Heading className="text-white text-4xl md:text-5xl">Ready to share your talent with the world?</Heading>
            <Subheading className="text-pink-100 mt-6 text-xl">
              Join hundreds of women who are turning their passion into a business. Our admin team will help you get verified and set up your shop in no time.
            </Subheading>
            <div className="mt-10 flex flex-col sm:flex-row gap-4">
              <Button size="lg" className="bg-white text-pink-600 hover:bg-pink-50 px-8 h-12 text-lg rounded-full">
                Apply to Sell
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 px-8 h-12 text-lg rounded-full">
                Learn More
              </Button>
            </div>
          </div>
        </Container>
      </section>

      <Footer />
    </div>
  );
}