Say one thing. Let the field say the rest.

import { RakeField } from "./RakeField";

export default function Example() {
  return (
    <header className="relative isolate min-h-[36rem] overflow-hidden bg-black flex flex-col items-center justify-center text-center">
      <div className="absolute inset-0 -z-10">
        <RakeField />
      </div>
      <div className="mx-auto max-w-xl px-8 text-[#f5f5f5]">
        <h1 className="text-5xl font-medium tracking-tight">
          Say <span className="text-[#a78bfa]">one thing</span>. Let the
          field say the rest.
        </h1>
        <div className="mt-8 flex justify-center">
          <a href="#" className="rounded-xl bg-[#7c3aed] px-5 py-3 text-white">
            See it work
          </a>
        </div>
      </div>
    </header>
  );
}

import Link from "next/link";
import type { CategoryDef, CreationCard } from "@/lib/iris";
import { RakeField } from "../visuals/backgrounds";

/**
 * The real `beacon-hero` section, full scale — this is what the detail page
 * shows instead of the generic ambient-field header every other category
 * gets, because this creation's whole point is its own composed anatomy.
 *
 * One column, dead centre, no pill: the field carries the energy a badge
 * would, and the headline's own inline accent stands in for one too. One
 * call to action, honestly wired to this creation's own `#detail` spec
 * card — this component also doubles as the sections gallery's live hero
 * (`CategoryGallery`), where there's no `#detail` on the page, so the link
 * always points at the full detail-page URL rather than a bare hash.
 */
export function BeaconHero({
  category,
  creation,
}: {
  category: CategoryDef;
  creation: CreationCard;
}) {
  return (
    <header className="iris-hero iris-hero--field relative isolate [overflow:clip] mt-[calc(-3.5rem_-_1px)] min-h-[min(82vh,760px)] flex flex-col justify-center [padding-block:calc(clamp(3rem,8vh,6rem)+3.5rem)_clamp(3rem,8vh,6rem)]">
      <div className="absolute inset-0 z-[-1] overflow-hidden bg-[color:var(--iris-bg)]" aria-hidden="true">
        <div className="absolute inset-0 [mask-image:linear-gradient(180deg,#000_0_64%,transparent_99%)] [-webkit-mask-image:linear-gradient(180deg,#000_0_64%,transparent_99%)] data-[enter=right]:[animation:iris-field-enter-right_560ms_cubic-bezier(0.16,1,0.3,1)_both] data-[enter=left]:[animation:iris-field-enter-left_560ms_cubic-bezier(0.16,1,0.3,1)_both] motion-reduce:[animation:none]">
          <RakeField />
        </div>
      </div>

      <div className="iris-shell flex flex-col items-center relative text-center">
        <p className="flex flex-wrap items-center gap-[0.4rem] text-[length:0.8125rem] text-[var(--field-ink-dim)] [text-shadow:0_1px_10px_oklch(0.12_0.02_264_/_0.55)] [&_a]:text-inherit [&_a:hover]:text-[color:var(--field-ink)]">
          <Link href="/iris">Iris</Link>
          <span aria-hidden="true">/</span>
          <Link href={`/iris/${category.slug}`}>{category.label}</Link>
          <span aria-hidden="true">/</span>
          <span>{creation.title}</span>
        </p>
        <h1 className="font-[family-name:var(--font-iris-display)] font-normal text-[length:clamp(2.5rem,1.5rem+4.4vw,5rem)] leading-[1.02] tracking-[-0.02em] max-w-[18ch] text-balance text-[color:var(--field-ink)] [text-shadow:0_1px_12px_oklch(0.12_0.02_264_/_0.55)]">
          Say <span className="text-[color:var(--iris-accent-bright)]">one thing</span>.
          Let the field say the rest.
        </h1>
        <div className="mt-9 flex flex-wrap justify-center gap-3">
          <Link href={`/iris/${category.slug}/${creation.slug}#detail`} className="inline-flex items-center justify-center gap-[0.4rem] py-[0.8rem] px-5 rounded-[var(--iris-radius-sm)] border border-transparent text-[length:0.9375rem] font-medium leading-none whitespace-nowrap cursor-pointer transition-[background-color,border-color,color] duration-[120ms] ease-[ease] disabled:opacity-35 disabled:cursor-default disabled:pointer-events-none bg-[color:var(--iris-accent)] text-[color:var(--iris-accent-ink)] hover:bg-[color:var(--iris-accent-hover)]">
            See it work
          </Link>
        </div>
      </div>
    </header>
  );
}