import type { Metadata } from "next";
import Image from "next/image";

import { AddToCartButton } from "@/components/cart/add-to-cart-button";
import { PageShell } from "@/components/layout/page-shell";
import { GlassCard } from "@/components/shared/glass-card";
import { getCatalogProducts } from "@/lib/cms/server";
import { buildCmsPageMetadata } from "@/lib/seo/page-metadata";

export const revalidate = 120;

export async function generateMetadata(): Promise<Metadata> {
  return buildCmsPageMetadata(
    "ebooks",
    "Ebooks",
    "Digital meal guides and playbooks — instant PDF download after purchase.",
    "/ebooks",
  );
}

export default async function EbooksPage() {
  const products = await getCatalogProducts();
  const ebooks = products.filter((p) => p.type === "ebook");

  return (
    <PageShell
      title="EBOOKS"
      description="Meal guides and PDF playbooks — buy once, download instantly from your dashboard."
      breadcrumbs={[{ label: "Home", href: "/" }, { label: "Ebooks" }]}
    >
      <div className="grid gap-8 sm:grid-cols-2">
        {ebooks.map((p, i) => (
          <GlassCard key={p.id} className="overflow-hidden p-0">
            <div className="relative aspect-[4/3] bg-muted">
              <Image
                src={p.image}
                alt={p.title}
                fill
                priority={i === 0}
                className="object-cover"
                sizes="(max-width: 639px) calc(100vw - 2rem), 400px"
              />
            </div>
            <div className="p-6 sm:p-8">
              <h2 className="font-display text-2xl tracking-wide">{p.title}</h2>
              <p className="text-muted-foreground mt-3 text-sm leading-relaxed">{p.description}</p>
              <p className="font-display text-primary mt-6 text-3xl">₹{p.priceInr}</p>
              <AddToCartButton productId={p.id} />
            </div>
          </GlassCard>
        ))}
      </div>
    </PageShell>
  );
}