import { PageHero } from "@/components/page-hero"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { categories, getCardsByCategory } from "@/data/cards"

export default function OurCardsPage() {
  const categoryData = categories.map((category) => ({
    ...category,
    count: getCardsByCategory(category.slug).length,
    image: `/category-${category.slug}.jpg`,
    href: `/category/${category.slug}`,
  }))

  return (
    <>
      <PageHero title="Our Cards" breadcrumbs={[{ label: "Home", href: "/" }]} />

      <main className="flex-1">
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
                Browse our extensive collection of greeting cards for every occasion. Each card is thoughtfully designed
                and printed on premium paper stock.
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {categoryData.map((category) => (
                <Link key={category.name} href={category.href}>
                  <Card className="h-full hover:shadow-lg transition-shadow group">
                    <CardContent className="p-0">
                      <div className="aspect-square relative overflow-hidden rounded-t-lg">
                        <img
                          src={category.image || "/placeholder.svg"}
                          alt={category.name}
                          className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                      <div className="p-6">
                        <h3 className="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">
                          {category.name}
                        </h3>
                        <p className="text-sm text-muted-foreground">{category.count} designs available</p>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* Featured Section */}
        <section className="py-16 bg-muted">
          <div className="container mx-auto px-4">
            <h3 className="text-3xl font-bold text-center mb-12">Why Our Cards Stand Out</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              <div className="text-center">
                <div className="text-4xl mb-4">🇨🇦</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 className="text-center">
                <div className="text-4xl mb-4">🎨</div>
                <h4 className="text-xl font-semibold mb-2">Unique Designs</h4>
                <p className="text-muted-foreground">Original artwork created by talented Canadian artists</p>
              </div>
              <div className="text-center">
                <div className="text-4xl mb-4">♻️</div>
                <h4 className="text-xl font-semibold mb-2">Eco-Friendly</h4>
                <p className="text-muted-foreground">
                  Printed on recycled paper with environmentally conscious practices
                </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">Need Something Custom?</h3>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              We can create personalized cards for your special events and occasions
            </p>
            <Button size="lg" asChild>
              <Link href="/custom-cards">Learn About Custom Cards</Link>
            </Button>
          </div>
        </section>
      </main>
    </>
  )
}