Hero Giant

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

export interface HeroGiantProps {
  label?: string;
  title?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  meta?: { label: string; value: string }[];
  className?: string;
}

/** Type-led hero: a mono label, an enormous tightly-tracked headline across the full width, then a 12-col row with copy + ink button on the left and mono key facts on the right, over a full-bleed gray image frame with caption. */
export function HeroGiant({
  label = "(01) Website builder for studios",
  title = "Your work, framed.",
  description = "Frame turns your projects into a fast, precise portfolio site — with layouts designed by studios, for studios. No templates that look like templates.",
  primary = { label: "Start free", href: "#start" },
  secondary = { label: "See showcase", href: "#showcase" },
  meta = [
    { label: "Studios", value: "3,400+" },
    { label: "Median load", value: "0.6 s" },
    { label: "Since", value: "2019" },
  ],
  className,
}: HeroGiantProps) {
  return (
    <section aria-labelledby="mc-giant-title" className={cn("bg-da-bg pt-16 text-da-fg sm:pt-24", className)}>
      <div className="da-container">
        <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
        <h1 id="mc-giant-title" className="mt-6 font-da-display text-[clamp(3.5rem,13vw,12rem)] leading-[0.9] font-medium tracking-da-display">
          {title}
        </h1>
        <div className="mt-12 grid gap-10 border-t border-da-border-strong pt-8 lg:grid-cols-12">
          <div className="lg:col-span-6">
            <p className="max-w-lg text-lg text-da-muted-fg">{description}</p>
            <div className="mt-8 flex flex-wrap items-center gap-6">
              <a
                href={primary.href}
                className="da-focus da-transition inline-flex h-12 items-center rounded-da-sm bg-da-primary px-6 font-medium text-da-primary-fg hover:opacity-85"
              >
                {primary.label}
              </a>
              <a
                href={secondary.href}
                className="da-focus rounded-da-sm font-medium underline decoration-da-accent decoration-2 underline-offset-[6px] hover:decoration-da-fg"
              >
                {secondary.label} ↗
              </a>
            </div>
          </div>
          <dl className="grid grid-cols-3 gap-6 lg:col-span-5 lg:col-start-8">
            {meta.map((m) => (
              <div key={m.label} className="flex flex-col border-t border-da-border pt-3">
                <dt className="order-2 mt-1 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">{m.label}</dt>
                <dd className="order-1 font-da-display text-3xl font-medium tracking-da-display">{m.value}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
      <figure className="mt-16">
        <div aria-hidden className="grid h-[clamp(16rem,42vw,34rem)] w-full grid-cols-12 gap-px bg-da-border">
          <div className="col-span-7 bg-da-surface-2" />
          <div className="col-span-5 grid grid-rows-2 gap-px">
            <div className="bg-da-muted" />
            <div className="bg-da-surface-2" />
          </div>
        </div>
        <figcaption className="da-container flex flex-wrap justify-between gap-x-6 gap-y-1 py-3 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">
          <span>Studio Nord — Portfolio 2026</span>
          <span>Built with Frame</span>
        </figcaption>
      </figure>
    </section>
  );
}

export default HeroGiant;