Hero Grid

import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeroGridProps {
  title?: string;
  description?: string;
  cta?: { label: string; href: string };
  templates?: { name: string; studio: string; tag: string; href: string }[];
  className?: string;
}

/** Visible-grid hero: hairline 12-column guides behind the content, headline + copy + ink CTA in the left columns, and a ruled index list of featured templates on the right whose rows invert on hover. */
export function HeroGrid({
  title = "Sites that look like the work, not the tool.",
  description = "Pick a layout from 48 templates designed by working studios. Every pixel stays editable.",
  cta = { label: "Browse templates", href: "#templates" },
  templates = [
    { name: "Atlas", studio: "by Nord Studio", tag: "Architecture", href: "#atlas" },
    { name: "Folio", studio: "by Kasa", tag: "Graphic design", href: "#folio" },
    { name: "Still", studio: "by Hanne Lund", tag: "Photography", href: "#still" },
    { name: "Signal", studio: "by Ortho", tag: "Branding", href: "#signal" },
    { name: "Plain", studio: "by Werk", tag: "Product", href: "#plain" },
  ],
  className,
}: HeroGridProps) {
  return (
    <section aria-labelledby="mc-grid-title" className={cn("relative bg-da-bg text-da-fg", className)}>
      <div aria-hidden className="da-container pointer-events-none absolute inset-0 hidden grid-cols-12 lg:grid">
        {Array.from({ length: 12 }, (_, i) => (
          <span key={i} className="border-l border-da-border last:border-r" />
        ))}
      </div>
      <div className="da-container relative grid gap-14 py-[clamp(5rem,10vw,8rem)] lg:grid-cols-12">
        <div className="lg:col-span-7">
          <h1 id="mc-grid-title" className="font-da-display text-[clamp(2.75rem,6.5vw,5.5rem)] leading-[0.95] font-medium tracking-da-display">
            {title}
          </h1>
          <p className="mt-8 max-w-md text-lg text-da-muted-fg">{description}</p>
          <a
            href={cta.href}
            className="da-focus da-transition mt-10 inline-flex h-12 items-center gap-2 rounded-da-sm bg-da-primary px-6 font-medium text-da-primary-fg hover:opacity-85"
          >
            {cta.label} <ArrowUpRight aria-hidden className="size-4" />
          </a>
        </div>
        <div className="self-end lg:col-span-4 lg:col-start-9">
          <p className="font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">Featured templates</p>
          <ul className="mt-3 border-t border-da-border-strong">
            {templates.map((t, i) => (
              <li key={t.name} className="border-b border-da-border">
                <a href={t.href} className="group da-focus da-transition flex items-baseline gap-3 px-2 py-3 hover:bg-da-fg hover:text-da-bg">
                  <span className="font-da-mono text-[11px] opacity-60">{String(i + 1).padStart(2, "0")}</span>
                  <span className="font-medium">{t.name}</span>
                  <span className="text-sm opacity-60">{t.studio}</span>
                  <span className="ml-auto font-da-mono text-[11px] tracking-da-label uppercase opacity-60 group-hover:hidden">{t.tag}</span>
                  <ArrowUpRight aria-hidden className="ml-auto hidden size-4 group-hover:block" />
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

export default HeroGrid;