One ridged field, holding a whole hero.

import { EmberRidgeField } from "./EmberRidgeField";

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">
        <EmberRidgeField />
      </div>
      <div className="mx-auto max-w-xl px-8 text-[#f5f5f5]">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-1.5 text-sm font-medium backdrop-blur-md">
          <span className="h-1.5 w-1.5 rounded-full bg-[#f4934a]" />
          Free for now · no sign-up
        </span>
        <h1 className="mt-5 text-5xl font-medium tracking-tight">
          One ridged field, holding a{" "}
          <span className="text-[#f4934a]">whole hero</span>.
        </h1>
        <p className="mt-4 opacity-80">
          Pill, headline, two calls to action, a caption row underneath —
          proven here over one live field instead of a stock photo.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a href="#" className="rounded-xl bg-[#f4934a] px-5 py-3 font-medium text-black">
            See it work
          </a>
          <a href="#" className="rounded-xl border border-white/15 bg-white/10 px-5 py-3 backdrop-blur-md">
            Browse the catalogue
          </a>
        </div>
        <p className="mt-6 text-sm opacity-70">
          68 live fields · zero dependencies · reduced-motion safe
        </p>
      </div>
    </header>
  );
}

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

/**
 * The real `ridge-beacon` section, full scale. Built to one reference: a
 * ridged, ember-lit field behind an eyebrow pill, a two-line claim with one
 * inline accent, one line of support copy, two calls to action and a short
 * caption row underneath — the classic SaaS-hero anatomy, over a live field
 * instead of a stock photo.
 *
 * Unlike the rest of Sections, this one carries a pill and a second button
 * on purpose: the reference it's built from leans on both, and proving the
 * catalogue's anatomy holds even at that busier end is the point. The
 * caption row states real facts about this catalogue rather than a "used
 * by" logo wall — nothing here is customer trust nobody gave it
 * (product-spec.md §3.1 / iris-dna.md's Honesty rule).
 */
export function RidgeBeacon({
  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]">
          <EmberRidgeField guardSelector=".iris-section-hero--ridge .iris-hero__inner" />
        </div>
      </div>

      <div className="iris-shell iris-hero__inner flex flex-col items-center relative text-center iris-section-hero--ridge">
        <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>

        <span className="mt-5 inline-flex items-center gap-2 rounded-[var(--iris-radius-pill)] border border-[color:var(--field-glass-border)] bg-[color:var(--field-glass)] px-4 py-1.5 text-[length:0.8125rem] font-medium text-[color:var(--field-ink)] [backdrop-filter:blur(14px)] [-webkit-backdrop-filter:blur(14px)]">
          <span
            className="h-1.5 w-1.5 rounded-full bg-[color:var(--iris-accent-bright)]"
            aria-hidden="true"
          />
          Free for now · no sign-up
        </span>

        <h1 className="mt-5 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)]">
          One ridged field, holding a{" "}
          <span className="text-[color:var(--iris-accent-bright)]">whole hero</span>.
        </h1>
        <p className="mt-4 max-w-[42ch] text-[length:1.0625rem] text-[color:var(--field-ink-dim)]">
          Pill, headline, two calls to action, a caption row underneath — the
          anatomy a stock hero photo usually carries, proven here over one
          live WebGL field instead.
        </p>

        <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>
          <Link href="/iris/backgrounds" className="inline-flex items-center justify-center gap-[0.4rem] py-[0.8rem] px-5 rounded-[var(--iris-radius-sm)] border border-[color:var(--field-glass-border)] text-[length:0.9375rem] font-medium leading-none whitespace-nowrap cursor-pointer transition-[background-color,border-color,color] duration-[120ms] ease-[ease] text-[color:var(--field-ink)] bg-[color:var(--field-glass)] [backdrop-filter:blur(14px)] [-webkit-backdrop-filter:blur(14px)] hover:bg-[color:var(--field-glass-opaque)]">
            Browse the catalogue
          </Link>
        </div>

        <p className="mt-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-[length:0.8125rem] text-[color:var(--field-ink-dim)]">
          <span>68 live fields</span>
          <span aria-hidden="true">·</span>
          <span>zero dependencies</span>
          <span aria-hidden="true">·</span>
          <span>reduced-motion safe</span>
        </p>
      </div>
    </header>
  );
}