import { Hero } from "@/components/hero";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { products, categories } from "@/lib/data";
import { ProductCard } from "@/components/product-card";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

export default function Home() {
  const featuredProducts = products.slice(0, 4);
  const offerProducts = products.filter(p => p.isOffer).slice(0, 4);

  return (
    <main className="min-h-screen bg-white">
      <Hero />

      {/* Categories Section */}
      <section className="py-16 bg-white">
        <Container>
          <div className="flex items-center justify-between mb-8">
            <Heading level={2} className="text-2xl font-bold">Shop by Category</Heading>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {categories.map((cat) => (
              <Link 
                key={cat.name} 
                href={`/products?category=${cat.name}`}
                className="group flex flex-col items-center p-6 rounded-2xl bg-neutral-50 hover:bg-blue-50 transition-colors border border-transparent hover:border-blue-100"
              >
                <span className="text-4xl mb-3 group-hover:scale-110 transition-transform">{cat.icon}</span>
                <span className="font-medium text-neutral-900">{cat.name}</span>
              </Link>
            ))}
          </div>
        </Container>
      </section>

      {/* Featured Products */}
      <section className="py-16 bg-neutral-50">
        <Container>
          <div className="flex items-center justify-between mb-8">
            <div>
              <Heading level={2} className="text-2xl font-bold">Featured Products</Heading>
              <p className="text-neutral-500 text-sm mt-1">Handpicked for you</p>
            </div>
            <Button variant="ghost" asChild className="text-blue-600 hover:text-blue-700">
              <Link href="/products" className="flex items-center gap-2">
                View All <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </Container>
      </section>

      {/* Offers Section */}
      <section className="py-16 bg-white">
        <Container>
          <div className="bg-blue-600 rounded-3xl p-8 md:p-12 overflow-hidden relative">
            <div className="relative z-10 max-w-md">
              <span className="text-blue-100 font-bold tracking-widest uppercase text-xs">Limited Time Offer</span>
              <h2 className="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">
                Up to 50% Off on Electronics & Gadgets
              </h2>
              <Button size="lg" variant="secondary" asChild className="rounded-full">
                <Link href="/products?category=Electronics">Grab the Deal</Link>
              </Button>
            </div>
            <div className="absolute top-0 right-0 w-1/2 h-full opacity-20 hidden md:block">
              <img 
                src="https://images.unsplash.com/photo-1498049794561-7780e7231661?q=80&w=1000&auto=format&fit=crop" 
                alt="Offer" 
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </Container>
      </section>

      {/* Best Deals */}
      <section className="py-16 bg-white">
        <Container>
          <div className="flex items-center justify-between mb-8">
            <div>
              <Heading level={2} className="text-2xl font-bold">Best Deals</Heading>
              <p className="text-neutral-500 text-sm mt-1">Unbeatable prices on top brands</p>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {offerProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </Container>
      </section>

      <Footer />
    </main>
  );
}