Editorial showcase

import { Badge, Button, cn } from "@cronus-ui/ui";
import { productById } from "../lib/demo-store.js";
import { ArrowUpRight } from "lucide-react";

const playbook = productById("playbook");

interface ShowcaseTile {
  id: string;
  title: string;
  kind: string;
  price: string;
  gradient: string;
  initials: string;
}

const SHOWCASE_IDS = ["presets", "templates", "soundkit", "workshop"] as const;
const SHOWCASE_GRADIENTS: Record<string, string> = {
  presets: "from-info/30 to-success/20",
  templates: "from-warning/30 to-primary/20",
  soundkit: "from-success/30 to-info/20",
  workshop: "from-primary/30 to-warning/20",
};
const showcaseTiles: ShowcaseTile[] = SHOWCASE_IDS.flatMap((id) => {
  const p = productById(id);
  if (!p) return [];
  return [
    {
      id: p.id,
      title: p.name,
      kind: p.kind.split(" · ")[0] ?? p.kind,
      price: "$" + p.priceValue,
      gradient: SHOWCASE_GRADIENTS[id] ?? p.gradient,
      initials: p.initials,
    },
  ];
});

export function ProductGridShowcaseBlock() {
  return (
    <section aria-label="Product showcase" className="flex w-full flex-col gap-6">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-2">
          <Badge variant="primary" className="w-fit">
            Editor&apos;s picks
          </Badge>
          <h2 className="font-display text-2xl font-semibold text-fg">This week at the studio</h2>
        </div>
        <a
          href="#all-products"
          className="text-sm font-medium text-primary-strong underline-offset-4 hover:underline"
        >
          View all products
        </a>
      </header>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {/* Hero product */}
        <article
          className={cn(
            "relative flex min-h-80 flex-col justify-end overflow-hidden",
            "rounded-2xl border border-border bg-surface-raised",
            "bg-gradient-to-br from-primary/30 via-info/20 to-transparent",
            "md:col-span-2 lg:row-span-2",
          )}
        >
          <span
            aria-hidden="true"
            className="absolute inset-0 flex items-center justify-center font-display text-8xl font-semibold text-fg-muted"
          >
            {playbook?.initials}
          </span>
          <div className="absolute start-4 top-4">
            <Badge variant="primary">{playbook?.badge}</Badge>
          </div>
          <div
            className="relative flex flex-col gap-4 bg-gradient-to-t from-surface-base via-surface-base/80 to-transparent p-6 pt-16"
          >
            <div className="flex flex-col gap-1">
              <h3 className="font-display text-2xl font-semibold text-fg">{playbook?.name}</h3>
              <p className="text-sm text-fg-secondary">
                42 lessons on building a paid audience — 2026 edition.
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-3">
              <span className="font-display text-2xl font-semibold text-fg">
                {"$" + (playbook?.priceValue ?? 0)}
              </span>
              <Button variant="primary">
                Shop the drop
                <ArrowUpRight className="size-4" aria-hidden="true" />
              </Button>
            </div>
          </div>
        </article>

        {showcaseTiles.map((tile) => (
          <article
            key={tile.id}
            className={cn(
              "relative flex min-h-56 flex-col justify-end overflow-hidden",
              "rounded-2xl border border-border bg-surface-raised bg-gradient-to-br",
              tile.gradient,
            )}
          >
            <span
              aria-hidden="true"
              className="absolute inset-0 flex items-center justify-center font-display text-5xl font-semibold text-fg-muted"
            >
              {tile.initials}
            </span>
            <div
              className="relative flex items-end justify-between gap-3 bg-gradient-to-t from-surface-base via-surface-base/80 to-transparent p-4 pt-12"
            >
              <div className="flex flex-col">
                <h3 className="text-sm font-medium text-fg">{tile.title}</h3>
                <p className="text-xs text-fg-tertiary">
                  {tile.kind} · {tile.price}
                </p>
              </div>
              <Button size="sm" variant="secondary">
                Shop
              </Button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}