Features Showcase

import { cn } from "@/lib/utils";

export interface FeaturesShowcaseProps {
  label?: string;
  title?: string;
  projects?: { studio: string; project: string; template: string; size: "wide" | "tall" | "square" | "full" }[];
  className?: string;
}

const DEFAULT_PROJECTS: NonNullable<FeaturesShowcaseProps["projects"]> = [
  { studio: "Nord Studio", project: "Oslo Opera identity", template: "Atlas", size: "wide" },
  { studio: "Hanne Lund", project: "Still Life, 2025", template: "Still", size: "tall" },
  { studio: "Kasa", project: "Kiln Coffee packaging", template: "Folio", size: "square" },
  { studio: "Werk", project: "Moss lamp", template: "Plain", size: "square" },
  { studio: "Ortho", project: "Tidal rebrand", template: "Signal", size: "full" },
];

const SPAN = { wide: "sm:col-span-2", tall: "sm:row-span-2", square: "", full: "sm:col-span-3" } as const;

/** Work showcase as the feature: an asymmetric grid (fixed row heights; wide, tall, square and full-width spans) of neutral gray image frames with mono captions (studio — project, template used); captions underline on hover. */
export function FeaturesShowcase({ label = "(04) Showcase", title = "Made with Frame", projects = DEFAULT_PROJECTS, className }: FeaturesShowcaseProps) {
  return (
    <section aria-labelledby="mc-fsh-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="flex items-end justify-between gap-6 border-b border-da-border-strong pb-4">
          <div>
            <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
            <h2 id="mc-fsh-title" className="mt-3 font-da-display text-[clamp(2rem,4vw,3rem)] leading-none font-medium tracking-da-display">
              {title}
            </h2>
          </div>
          <a href="#showcase" className="da-focus shrink-0 rounded-da-sm text-[15px] underline underline-offset-4">
            View all 240 ↗
          </a>
        </div>
        <ul className="mt-8 grid gap-x-6 gap-y-10 sm:auto-rows-[18rem] sm:grid-cols-3">
          {projects.map((p, i) => (
            <li key={p.project} className={cn("group flex flex-col", SPAN[p.size])}>
              <a href={`#p${i}`} className="da-focus flex flex-1 flex-col rounded-da-sm">
                <div
                  aria-hidden
                  className={cn(
                    "aspect-[4/3] min-h-0 transition-colors duration-(--da-duration) group-hover:bg-da-muted sm:aspect-auto sm:flex-1",
                    i % 2 ? "bg-da-muted/70" : "bg-da-surface-2",
                  )}
                />
                <p className="mt-3 flex justify-between gap-4 font-da-mono text-[11px] tracking-da-label uppercase">
                  <span className="group-hover:underline">
                    {p.studio} — {p.project}
                  </span>
                  <span className="text-da-muted-fg">{p.template}</span>
                </p>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesShowcase;