Skip the guesswork.
Match it pixel for pixel.

import { HorizonField } from "./HorizonField";

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">
        <HorizonField />
      </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-[#7bc8e8]" />
          New: reverse-measured off a screenshot
        </span>
        <h1 className="mt-5 text-5xl font-medium tracking-tight">
          Skip the guesswork.
          <br />
          Match it <span className="italic text-[#7bc8e8]">pixel for pixel</span>.
        </h1>
        <p className="mt-4 opacity-80">
          Pill, headline, two calls to action, a stat row underneath —
          proven here over one field sampled straight off a real screenshot.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a href="#" className="rounded-xl bg-[#7bc8e8] 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>
        <dl className="mt-8 flex items-center justify-center gap-8 text-sm">
          <div><dt className="sr-only">Backgrounds shipped</dt><dd className="text-2xl font-medium">73</dd><p className="opacity-70">backgrounds shipped</p></div>
          <div><dt className="sr-only">External dependencies</dt><dd className="text-2xl font-medium">0</dd><p className="opacity-70">external dependencies</p></div>
          <div><dt className="sr-only">Copy-paste ready</dt><dd className="text-2xl font-medium">100%</dd><p className="opacity-70">copy-paste ready</p></div>
        </dl>
      </div>
    </header>
  );
}

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

/**
 * The real `horizon-beacon` section, full scale. Same busy end of the
 * anatomy `ridge-beacon` proves — eyebrow pill, two-line claim with one
 * italic accent, one line of support copy, a filled button and a ghost
 * button — but closes on a three-column stat row instead of a single
 * caption line, matching the one extra piece of anatomy `horizon` itself
 * was reverse-measured from: a real stat row sitting under the fold.
 *
 * Every number in that row is a true fact about this catalogue rather than
 * a fabricated business metric — no "used by" logo wall, no invented
 * customer count (product-spec.md §3.1 / iris-dna.md's Honesty rule).
 * `HorizonField` is the live piece underneath, its rim leaning toward the
 * cursor the same way it does on its own catalogue page.
 */
export function HorizonBeacon({
  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]">
          <HorizonField guardSelector=".iris-section-hero--horizon .iris-hero__inner" />
        </div>
      </div>

      <div className="iris-shell iris-hero__inner flex flex-col items-center relative text-center iris-section-hero--horizon">
        <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"
          />
          New: reverse-measured off a screenshot
        </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)]">
          Skip the guesswork.
          <br />
          Match it <span className="italic text-[color:var(--iris-accent-bright)]">pixel for pixel</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 stat row underneath — the
          classic SaaS-hero anatomy, over one field sampled straight off a
          real screenshot instead of a stock photo.
        </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>

        <dl className="mt-10 flex items-center gap-6 sm:gap-10">
          {[
            { value: "73", label: "backgrounds shipped" },
            { value: "0", label: "external dependencies" },
            { value: "100%", label: "copy-paste ready" },
          ].map((stat, i) => (
            <div key={stat.label} className="flex items-center gap-6 sm:gap-10">
              {i > 0 && (
                <span
                  className="h-9 w-px bg-[color:var(--field-glass-border)]"
                  aria-hidden="true"
                />
              )}
              <div className="flex flex-col items-center gap-1">
                <dt className="sr-only">{stat.label}</dt>
                <dd className="font-[family-name:var(--font-iris-display)] font-normal text-[length:clamp(1.5rem,1.1rem+1.6vw,2.25rem)] leading-none tracking-[-0.02em] text-[color:var(--field-ink)] [text-shadow:0_1px_12px_oklch(0.12_0.02_264_/_0.55)]">
                  {stat.value}
                </dd>
                <p className="text-[length:0.8125rem] text-[color:var(--field-ink-dim)]">
                  {stat.label}
                </p>
              </div>
            </div>
          ))}
        </dl>
      </div>
    </header>
  );
}