import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Heart, Gift, Sparkles } from "lucide-react"

export default function HomePage() {
  const featuredCategories = [
    {
      title: "Birthday Cards",
      description: "Celebrate special moments with our unique birthday designs",
      icon: Gift,
      href: "/category/birthday",
      image: "/cards/birthday/BDY-001.jpg",
    },
    {
      title: "Wedding Cards",
      description: "Elegant designs for your special day",
      icon: Heart,
      href: "/category/wedding",
      image: "/cards/wedding/WED-001.jpg",
    },
    {
      title: "3D Monuments",
      description: "Unique 3D cards featuring iconic world landmarks",
      icon: Sparkles,
      href: "/category/monuments",
      image: "/cards/monuments/MON-001.jpg",
    },
    {
      title: "Valentine's Day",
      description: "Share love and romance with our Valentine collection",
      icon: Heart,
      href: "/category/valentines",
      image: "/cards/valentines/VAL-003.jpg",
    },
  ]

  return (
    <main className="flex-1">
      {/* Hero Section */}
      <section className="bg-secondary text-secondary-foreground py-20">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-5xl font-bold mb-6 text-balance">Welcome to Paper Presents</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto text-balance opacity-90">
            Discover our collection of beautifully crafted greeting cards for every occasion. Satisfaction Guaranteed
            with every purchase.
          </p>
          <div className="flex gap-4 justify-center flex-wrap">
            <Button size="lg" asChild>
              <Link href="/our-cards">Browse Our Cards</Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              asChild
              className="bg-secondary-foreground/10 hover:bg-secondary-foreground/20 border-secondary-foreground/20"
            >
              <Link href="/custom-cards">Create Custom Card</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Featured Categories */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-bold text-center mb-12">Shop by Category</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredCategories.map((category) => (
              <Link key={category.title} href={category.href}>
                <Card className="h-full hover:shadow-lg transition-shadow">
                  <CardContent className="p-0">
                    <div className="aspect-[4/3] relative overflow-hidden rounded-t-lg">
                      <img
                        src={category.image || "/placeholder.svg"}
                        alt={category.title}
                        className="object-cover w-full h-full"
                      />
                    </div>
                    <div className="p-6">
                      <div className="flex items-center gap-3 mb-3">
                        <category.icon className="h-6 w-6 text-primary" />
                        <h4 className="text-xl font-semibold">{category.title}</h4>
                      </div>
                      <p className="text-muted-foreground text-sm">{category.description}</p>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-16 bg-muted">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-bold text-center mb-12">Why Choose Paper Presents?</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div className="text-center">
              <div className="bg-primary text-primary-foreground w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Heart className="h-8 w-8" />
              </div>
              <h4 className="text-xl font-semibold mb-2">Quality Craftsmanship</h4>
              <p className="text-muted-foreground">
                Each card is carefully designed and printed with premium materials
              </p>
            </div>
            <div className="text-center">
              <div className="bg-primary text-primary-foreground w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Sparkles className="h-8 w-8" />
              </div>
              <h4 className="text-xl font-semibold mb-2">Custom Options</h4>
              <p className="text-muted-foreground">Personalize any card to make it uniquely yours</p>
            </div>
            <div className="text-center">
              <div className="bg-primary text-primary-foreground w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Gift className="h-8 w-8" />
              </div>
              <h4 className="text-xl font-semibold mb-2">Satisfaction Guaranteed</h4>
              <p className="text-muted-foreground">We stand behind the quality of every card we sell</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16">
        <div className="container mx-auto px-4 text-center">
          <h3 className="text-3xl font-bold mb-4">Ready to Find the Perfect Card?</h3>
          <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
            Browse our extensive collection or create a custom design that's uniquely yours
          </p>
          <Button size="lg" asChild>
            <Link href="/our-cards">Start Shopping</Link>
          </Button>
        </div>
      </section>
    </main>
  )
}