import { Hero } from "@/components/hero";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { ProductCard, Product } from "@/components/product-card";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import Image from "next/image";
import { Badge } from "@/components/badge";

const featuredProducts: Product[] = [
  {
    id: "1",
    name: "Classic Oxford Leather",
    price: 189,
    category: "Formal",
    image: "https://images.unsplash.com/photo-1653868250450-b83e6263d427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
    isNew: true
  },
  {
    id: "2",
    name: "Urban Runner Pro",
    price: 129,
    category: "Sneakers",
    image: "https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
  },
  {
    id: "3",
    name: "Elegance Stiletto",
    price: 249,
    category: "Women",
    image: "https://images.unsplash.com/photo-1618274158630-bc47a614b3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080",
    isSale: true
  },
  {
    id: "4",
    name: "Heritage Brogue",
    price: 210,
    category: "Formal",
    image: "https://images.unsplash.com/photo-1664505504065-31f8937d2261?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw0fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
  }
];

export default function Home() {
  return (
    <main className="min-h-screen">
      <Hero />
      
      <section className="py-24 bg-white">
        <Container>
          <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div className="max-w-xl">
              <Heading>Featured Collection</Heading>
              <Subheading className="mt-4">
                Handpicked styles that define modern elegance and comfort.
              </Subheading>
            </div>
            <Button variant="outline" asChild>
              <Link href="/shop">View All Products</Link>
            </Button>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {featuredProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </Container>
      </section>

      <section className="py-24 bg-neutral-50">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div className="relative aspect-video lg:aspect-square rounded-3xl overflow-hidden">
              <Image
                src="https://images.unsplash.com/photo-1646139498425-5bceb422ba6a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw1fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
                alt="Custom Fitting Session"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <Badge className="mb-4">Exclusive Service</Badge>
              <Heading className="text-4xl font-bold mb-6">Perfect Fit, Guaranteed.</Heading>
              <p className="text-neutral-600 text-lg mb-8 leading-relaxed">
                Experience the luxury of a custom shoe fitting. Our experts will help you find the perfect size and style tailored to your unique foot shape and lifestyle needs.
              </p>
              <ul className="space-y-4 mb-10">
                <li className="flex items-center gap-3 text-neutral-700">
                  <div className="w-2 h-2 rounded-full bg-primary" />
                  Professional measurement & analysis
                </li>
                <li className="flex items-center gap-3 text-neutral-700">
                  <div className="w-2 h-2 rounded-full bg-primary" />
                  Personalized style consultation
                </li>
                <li className="flex items-center gap-3 text-neutral-700">
                  <div className="w-2 h-2 rounded-full bg-primary" />
                  Exclusive access to custom materials
                </li>
              </ul>
              <Button size="lg" asChild>
                <Link href="/book">Book Your Fitting Now</Link>
              </Button>
            </div>
          </div>
        </Container>
      </section>

      <section className="py-24 bg-black text-white">
        <Container className="text-center">
          <Heading className="text-white mb-6">Join the SoleVibe Community</Heading>
          <Subheading className="text-neutral-400 mb-10 max-w-2xl mx-auto">
            Subscribe to receive updates, access to exclusive deals, and more.
          </Subheading>
          <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
            <input 
              type="email" 
              placeholder="Enter your email" 
              className="flex-1 px-6 py-3 rounded-full bg-neutral-800 border-neutral-700 text-white focus:outline-none focus:ring-2 focus:ring-primary"
            />
            <Button className="rounded-full px-8">Subscribe</Button>
          </div>
        </Container>
      </section>

      <Footer />
    </main>
  );
}