import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { PageHero } from "@/components/page-hero"
import Link from "next/link"
import Image from "next/image"

const categories = [
  {
    name: "Birthday",
    slug: "birthday",
    image: "/cards/birthday/BDY-001.jpg",
    description: "Celebrate with our pop-up birthday cards",
  },
  {
    name: "Christmas",
    slug: "christmas",
    image: "/cards/christmas/CHR-001.jpg",
    description: "Festive 3D Christmas greetings",
  },
  {
    name: "Valentine's Day",
    slug: "valentines-day",
    image: "/cards/valentines/VAL-001.jpg",
    description: "Express your love with our Valentine cards",
  },
  {
    name: "Wedding",
    slug: "wedding",
    image: "/cards/wedding/WED-001.jpg",
    description: "Elegant wedding celebration cards",
  },
  {
    name: "Baby",
    slug: "baby",
    image: "/cards/baby/BBY-001.jpg",
    description: "Welcome the new arrival",
  },
  {
    name: "3D Monuments",
    slug: "monuments",
    image: "/cards/monuments/MON-001.jpg",
    description: "Iconic landmarks in 3D",
  },
  {
    name: "Sentiments",
    slug: "sentiments",
    image: "/cards/sentiments/SEN-001.jpg",
    description: "Thank you, get well, and more",
  },
  {
    name: "Specialty",
    slug: "specialty",
    image: "/cards/specialty/SPC-002.jpg",
    description: "Unique cards for special moments",
  },
]

export default function YourOccasionsPage() {
  return (
    <>
      <SiteHeader />
      <PageHero title="Your Occasions" breadcrumbs={[{ label: "Home", href: "/" }]} />

      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
          {categories.map((category) => (
            <Link key={category.slug} href={`/category/${category.slug}`} className="group">
              <div className="relative aspect-[150/185] overflow-hidden rounded-lg border-2 border-border hover:border-primary transition-colors">
                <Image
                  src={category.image || "/placeholder.svg"}
                  alt={category.name}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
              <h3 className="mt-3 text-center font-semibold text-lg group-hover:text-primary transition-colors">
                {category.name}
              </h3>
              <p className="text-center text-sm text-muted-foreground mt-1">{category.description}</p>
            </Link>
          ))}
        </div>
      </div>
      <SiteFooter />
    </>
  )
}