Ultra Site Footer

"use client";

import { useLayoutEffect, useMemo, useSyncExternalStore } from "react";
import type { CSSProperties } from "react";

/**
 * UltraSiteFooter — a closing line whose weight follows the reader's contrast, their own hexagon, and the links.
 *
 * The closing line is set huge in Google Sans Flex, its weight running 460
 * to 640 with contrast (and its grade and roundness with it). Under it the
 * page's goal and a quieter link, then a card that draws the reader's six
 * values as the kit's hexagon, says whether they follow the system or are
 * saved on this device, and resets them. Columns of real links close it.
 *
* Part of the Ultra kit: an adaptive style whose grammar is the viewer. Every
 * Ultra asset reads six live values (contrast, warmth, light, density, motion,
 * focus) from one shared tuning and re-forms its tone, edges, density and
 * tempo to match: move any Ultra control and every Ultra asset on the page
 * follows. Values the viewer sets are saved on the device (localStorage
 * key ultra:v1); the rest follow the system (prefers-contrast,
 * prefers-reduced-motion, prefers-color-scheme) and the time of day. Nothing
 * is sent anywhere. Every colour is solved for APCA contrast at runtime, so no
 * tuning can make text illegible. Springs are critically damped (no
 * overshoot) and motion 0 swaps states. Type through var(--font-ultra)
 * (Google Sans Flex, whose GRAD and ROND axes follow contrast) over Geist.
 * Paste it as its own file: it carries its own copy of the small engine, and
 * copies on one page share a single store through Symbol.for.
 */

/** The six values every Ultra asset reads. Each runs 0..1. */
export type UAxis = "contrast" | "warmth" | "density" | "motion" | "focus" | "light";

export type UAxes = Record<UAxis, number>;

/** Dial order, clockwise from the top. */
const U_AXES: UAxis[] = ["contrast", "warmth", "light", "density", "motion", "focus"];

/** What the server renders and what an asset shows before the store boots. */
const U_DEFAULTS: UAxes = { contrast: 0.45, warmth: 0.3, light: 0.1, density: 0.4, motion: 0.45, focus: 0.35 };

/** The exposure band no text can sit on (ground L 0.46..0.66): light snaps out of it. */
const U_LIGHT_GAP: [number, number] = [0.46, 0.54];

const uClamp = (v: number, a = 0, b = 1) => (v < a ? a : v > b ? b : v);

const uLerp = (a: number, b: number, t: number) => a + (b - a) * t;

const uSmooth = (a: number, b: number, x: number) => {
  const t = uClamp((x - a) / (b - a));
  return t * t * (3 - 2 * t);
};

/** Nearest safe exposure: anything inside the unsafe band goes to its closer edge. */
function uSafeLight(v: number): number {
  const [a, b] = U_LIGHT_GAP;
  if (v <= a || v >= b) return uClamp(v);
  return v - a < b - v ? a : b;
}

interface UStore {
  v: 1;
  /** The values the viewer pinned (dragged). Only these are saved. */
  pinned: Partial<UAxes>;
  /** Values derived from the system (prefers-*) and the clock. */
  auto: UAxes;
  /** Which auto values the system decided (those beat an author's seed). */
  sys: { contrast: boolean; motion: boolean };
  /** The author's starting look for values the viewer has not set. */
  seed: Partial<UAxes>;
  /** pinned over auto: what assets read. A new object on every change. */
  snap: UAxes;
  listeners: Set<() => void>;
  booted: boolean;
  /** The one goal on screen: the first claimant wins the filled accent. */
  goals: string[];
  /** Shared pointer, for gaze-driven assets. Written by one passive listener. */
  gaze: { x: number; y: number; speed: number; t: number; live: boolean };
}

const U_KEY = "ultra:v1";

function uStore(): UStore {
  const g = globalThis as unknown as Record<symbol, UStore | undefined>;
  const sym = Symbol.for("viberdy.ultra.v1");
  let s = g[sym];
  if (!s) {
    s = {
      v: 1,
      pinned: {},
      auto: { ...U_DEFAULTS },
      sys: { contrast: false, motion: false },
      seed: {},
      snap: { ...U_DEFAULTS },
      listeners: new Set(),
      booted: false,
      goals: [],
      gaze: { x: -1, y: -1, speed: 0, t: 0, live: false },
    };
    g[sym] = s;
  }
  return s;
}

function uEmit(s: UStore) {
  const seed = { ...s.seed };
  if (s.sys.contrast) delete seed.contrast;
  if (s.sys.motion) delete seed.motion;
  s.snap = { ...s.auto, ...seed, ...s.pinned };
  s.snap.light = uSafeLight(s.snap.light);
  s.listeners.forEach((fn) => fn());
}

function uMedia(q: string): boolean {
  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
}

/** Auto values: system preferences first, then the clock (read at boot and when the tab returns, never on a timer). */
function uAuto(): UAxes {
  const a: UAxes = { ...U_DEFAULTS };
  if (uMedia("(prefers-contrast: more)")) a.contrast = 0.95;
  else if (uMedia("(prefers-contrast: less)")) a.contrast = 0.12;
  if (uMedia("(prefers-reduced-motion: reduce)")) a.motion = 0;
  if (uMedia("(pointer: coarse)")) a.density = 0.25;
  const h = new Date().getHours() + new Date().getMinutes() / 60;
  // Warmth rises through the evening and lowers the light with it: a warm tint alone
  // does not cut the evening's short-wave load, dimming does (RPI LRC, 2018).
  const evening = h >= 17 ? uSmooth(17, 21, h) : h < 8 ? 1 - uSmooth(6, 8, h) : 0;
  a.warmth = uLerp(0.3, 0.82, evening);
  const paper = uMedia("(prefers-color-scheme: light)");
  a.light = paper ? uLerp(0.86, 0.7, evening) : uLerp(0.12, 0.04, evening);
  return a;
}

function uLoad(): Partial<UAxes> {
  try {
    const raw = window.localStorage.getItem(U_KEY);
    if (!raw) return {};
    const data = JSON.parse(raw) as { v?: number; p?: Record<string, unknown> };
    if (data.v !== 1 || !data.p) return {};
    const out: Partial<UAxes> = {};
    for (const k of U_AXES) {
      const v = data.p[k];
      if (typeof v === "number" && Number.isFinite(v)) out[k] = uClamp(v);
    }
    return out;
  } catch {
    return {};
  }
}

function uSave(s: UStore) {
  try {
    window.localStorage.setItem(U_KEY, JSON.stringify({ v: 1, p: s.pinned }));
  } catch {
    // storage blocked: the tuning still works for this visit
  }
}

function uSys(s: UStore) {
  s.sys = {
    contrast: uMedia("(prefers-contrast: more)") || uMedia("(prefers-contrast: less)"),
    motion: uMedia("(prefers-reduced-motion: reduce)"),
  };
}

function uBoot() {
  const s = uStore();
  if (s.booted || typeof window === "undefined") return;
  s.booted = true;
  s.auto = uAuto();
  uSys(s);
  s.pinned = uLoad();
  // A shared setup (#u=c7w3l2...: one letter per value and a base-36 digit) is read once.
  const shared = /[#&]u=([a-z0-9]{2,12})/i.exec(window.location.hash);
  if (shared && shared[1]) {
    const code = shared[1].toLowerCase();
    for (let i = 0; i + 1 < code.length; i += 2) {
      const axis = U_AXES.find((k) => k[0] === code[i]);
      const v = parseInt(code[i + 1] ?? "", 36);
      if (axis && Number.isFinite(v)) s.pinned[axis] = uClamp(v / 35);
    }
    uSave(s);
  }
  uEmit(s);
  const refresh = () => {
    s.auto = uAuto();
    uSys(s);
    uEmit(s);
  };
  for (const q of ["(prefers-contrast: more)", "(prefers-contrast: less)", "(prefers-reduced-motion: reduce)", "(prefers-color-scheme: light)"]) {
    window.matchMedia(q).addEventListener("change", refresh);
  }
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") refresh();
  });
  window.addEventListener("storage", (e) => {
    if (e.key !== U_KEY) return;
    s.pinned = uLoad();
    uEmit(s);
  });
  const gz = s.gaze;
  window.addEventListener(
    "pointermove",
    (e) => {
      const dt = Math.max(1, e.timeStamp - gz.t);
      const d = gz.live ? Math.hypot(e.clientX - gz.x, e.clientY - gz.y) : 0;
      gz.speed = gz.speed * 0.7 + ((d / dt) * 1000) * 0.3;
      gz.x = e.clientX;
      gz.y = e.clientY;
      gz.t = e.timeStamp;
      gz.live = true;
    },
    { passive: true },
  );
  document.documentElement.addEventListener("pointerleave", () => {
    gz.live = false;
  });
}

/**
 * The author's starting look for values the viewer has not set (they win
 * over the clock, never over a system preference for reduced motion or more
 * contrast, and never over the viewer). Not saved.
 */
export function seedUltra(values: Partial<UAxes>) {
  const s = uStore();
  const next: Partial<UAxes> = { ...s.seed };
  let changed = false;
  for (const k of U_AXES) {
    const v = values[k];
    if (typeof v === "number" && Number.isFinite(v) && next[k] !== uClamp(v)) {
      next[k] = uClamp(v);
      changed = true;
    }
  }
  if (!changed) return;
  s.seed = next;
  uEmit(s);
}

/** Forget every pinned value. */
export function resetUltra() {
  const s = uStore();
  s.pinned = {};
  uSave(s);
  uEmit(s);
}

function uSubscribe(fn: () => void) {
  const s = uStore();
  s.listeners.add(fn);
  uBoot();
  return () => {
    s.listeners.delete(fn);
  };
}

const uSnap = () => uStore().snap;

const uServerSnap = () => U_DEFAULTS;

/**
 * The tuning, live. `tune` pins values for this instance only (a demo, a
 * fixed brand moment); they are never saved. `bounds` lets an author limit
 * the expressive direction only: motion, density and focus can be capped,
 * contrast can be floored, warmth and light can be ranged. The way back to
 * calm (motion 0, contrast 1, density 0, focus 0) can never be bounded.
 * `seed` is the author's starting look (see seedUltra).
 */
export function useUltra(tune?: Partial<UAxes>, bounds?: Partial<Record<UAxis, [number, number]>>, seed?: Partial<UAxes>): UAxes {
  const snap = useSyncExternalStore(uSubscribe, uSnap, uServerSnap);
  const seedKey = JSON.stringify(seed ?? null);
  useLayoutEffect(() => {
    const v = JSON.parse(seedKey) as Partial<UAxes> | null;
    if (v) seedUltra(v);
  }, [seedKey]);
  // Compared by value, so inline objects do not churn.
  const tuneKey = JSON.stringify(tune ?? null);
  const boundsKey = JSON.stringify(bounds ?? null);
  return useMemo(() => {
    const tune = JSON.parse(tuneKey) as Partial<UAxes> | null;
    const bounds = JSON.parse(boundsKey) as Partial<Record<UAxis, [number, number]>> | null;
    const out: UAxes = { ...snap };
    if (tune) {
      for (const k of U_AXES) {
        const v = tune[k];
        if (typeof v === "number" && Number.isFinite(v)) out[k] = uClamp(v);
      }
    }
    if (bounds) {
      for (const k of U_AXES) {
        const b = bounds[k];
        if (!b) continue;
        let [lo, hi] = b;
        if (k === "motion" || k === "density" || k === "focus") lo = 0;
        if (k === "contrast") hi = 1;
        out[k] = uClamp(out[k], Math.min(lo, hi), Math.max(lo, hi));
      }
    }
    out.light = uSafeLight(out.light);
    return out;
  }, [snap, tuneKey, boundsKey]);
}

type URgb = [number, number, number];

function uOklab(L: number, a: number, b: number): URgb {
  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
  const l = l_ * l_ * l_;
  const m = m_ * m_ * m_;
  const s = s_ * s_ * s_;
  const lin: URgb = [
    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
  ];
  return lin.map((x) => {
    const v = uClamp(x);
    return Math.round((v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055) * 255);
  }) as URgb;
}

function uOklch(L: number, C: number, h: number): URgb {
  const r = (h * Math.PI) / 180;
  return uOklab(L, C * Math.cos(r), C * Math.sin(r));
}

const uHex = (c: URgb) => "#" + c.map((v) => v.toString(16).padStart(2, "0")).join("");

function uY(c: URgb): number {
  return 0.2126729 * Math.pow(c[0] / 255, 2.4) + 0.7151522 * Math.pow(c[1] / 255, 2.4) + 0.072175 * Math.pow(c[2] / 255, 2.4);
}

/** APCA-W3 0.0.98G lightness contrast (signed: negative = light text on dark). */
function uApca(text: URgb, bg: URgb): number {
  let yt = uY(text);
  let yb = uY(bg);
  if (yt < 0.022) yt += Math.pow(0.022 - yt, 1.414);
  if (yb < 0.022) yb += Math.pow(0.022 - yb, 1.414);
  if (Math.abs(yb - yt) < 0.0005) return 0;
  if (yb > yt) {
    const s = (Math.pow(yb, 0.56) - Math.pow(yt, 0.57)) * 1.14;
    return s < 0.1 ? 0 : (s - 0.027) * 100;
  }
  const s = (Math.pow(yb, 0.65) - Math.pow(yt, 0.62)) * 1.14;
  return s > -0.1 ? 0 : (s + 0.027) * 100;
}

/** The warmth tint: a straight line in OKLab from slate to amber, neutral at 0.5 (never a hue walk through green). */
function uTint(w: number, mag: number): [number, number] {
  return [uLerp(-0.0048, 0.0055, w) * mag, uLerp(-0.0132, 0.015, w) * mag];
}

function uCol(L: number, w: number, mag: number): URgb {
  const [a, b] = uTint(w, mag);
  return uOklab(L, a, b);
}

/** Find the ink lightness that reaches |Lc| = target on this ground (bisection, 24 steps). */
function uSolve(bg: URgb, target: number, dark: boolean, w: number): URgb {
  let lo = 0.02;
  let hi = 0.995;
  for (let i = 0; i < 24; i++) {
    const m = (lo + hi) / 2;
    const lc = Math.abs(uApca(uCol(m, w, 0.6), bg));
    if (dark) {
      if (lc < target) lo = m;
      else hi = m;
    } else if (lc < target) hi = m;
    else lo = m;
  }
  return uCol((lo + hi) / 2, w, 0.6);
}

/** The accent's hue: a calm, low-chroma blue-violet, clear of every other kit's saturated blue. */
const U_HUE = 262;

export interface UTokens {
  dark: boolean;
  /** Ground lightness (OKLab L), for shaders. */
  groundL: number;
  ground: string;
  s1: string;
  s2: string;
  well: string;
  ink1: string;
  ink2: string;
  ink3: string;
  hair: string;
  /** Hairline alpha: edges only appear as contrast rises past 0.55. */
  edge: number;
  acc: string;
  onAcc: string;
  /** 4px base unit, scaled by density. */
  unit: number;
  body: number;
  lh: number;
  /** Critically damped spring stiffness; 0 means no motion (swap states). */
  k: number;
  /** The gaze aperture in px, from focus. */
  aperture: number;
  grad: number;
  rond: number;
  /** Ground and ink as linear-ish triples (0..1 sRGB) for canvases and shaders. */
  groundRgb: URgb;
  inkRgb: URgb;
  accRgb: URgb;
}

const uTokenCache = new Map<string, UTokens>();

/** Every colour, size and tempo an Ultra asset uses, derived from the six values. No asset holds a fixed hex. */
export function ultraTokens(x: UAxes, hue = U_HUE): UTokens {
  const q = (v: number) => Math.round(v * 200) / 200;
  const key = [x.contrast, x.warmth, x.light, x.density, x.motion, x.focus].map(q).join(",") + ":" + hue;
  const hit = uTokenCache.get(key);
  if (hit) return hit;
  const c = q(x.contrast);
  const w = q(x.warmth);
  const lt = uSafeLight(q(x.light));
  const d = q(x.density);
  const m = q(x.motion);
  const f = q(x.focus);
  const dark = lt < 0.5;
  // Exposure moves the ground within its room; contrast deepens it a little.
  const gL = dark
    ? uLerp(0.15, 0.3, lt / U_LIGHT_GAP[0]) - 0.03 * (c - 0.45)
    : uLerp(0.89, 0.975, (lt - U_LIGHT_GAP[1]) / (1 - U_LIGHT_GAP[1])) + 0.012 * (c - 0.45);
  const step = dark ? uLerp(0.03, 0.05, c) : uLerp(0.022, 0.04, c);
  const g = uCol(gL, w, 1);
  const s1 = uCol(dark ? gL + step : Math.min(0.995, gL + step * 0.7), w, dark ? 1 : 0.6);
  const s2 = uCol(dark ? gL + step * 2 : Math.min(0.998, gL + step * 1.2), w, dark ? 1 : 0.5);
  const well = uCol(gL - step * 0.8, w, 1);
  const ink1 = uSolve(g, uLerp(75, 95, c), dark, w);
  const ink2 = uSolve(g, uLerp(60, 72, c), dark, w);
  const ink3 = uSolve(g, uLerp(52, 60, c), dark, w);
  const hair = uSolve(g, uLerp(30, 45, c), dark, w);
  const acc = dark ? uOklch(uLerp(0.84, 0.88, c), 0.09, hue) : uOklch(uLerp(0.5, 0.44, c), 0.14, hue);
  // A label on the fill: solved, never pure black or white.
  const onAcc = uSolve(acc, dark ? 70 : 78, !dark, w);
  const t: UTokens = {
    dark,
    groundL: gL,
    ground: uHex(g),
    s1: uHex(s1),
    s2: uHex(s2),
    well: uHex(well),
    ink1: uHex(ink1),
    ink2: uHex(ink2),
    ink3: uHex(ink3),
    hair: uHex(hair),
    edge: uClamp((c - 0.55) / 0.45),
    acc: uHex(acc),
    onAcc: uHex(onAcc),
    unit: 4 * uLerp(1.18, 0.82, d),
    body: uLerp(17, 15, d),
    lh: uLerp(1.62, 1.45, d),
    k: m < 0.02 ? 0 : uLerp(190, 560, m),
    aperture: uLerp(560, 170, f),
    grad: dark ? uLerp(40, 0, c) : uLerp(70, 30, c),
    rond: uLerp(45, 8, c),
    groundRgb: g,
    inkRgb: ink1,
    accRgb: acc,
  };
  uTokenCache.set(key, t);
  return t;
}

/** The tokens as CSS custom properties on an asset root. Children read var(--u-*). */
export function ultraVars(t: UTokens): CSSProperties {
  return {
    "--u-ground": t.ground,
    "--u-s1": t.s1,
    "--u-s2": t.s2,
    "--u-well": t.well,
    "--u-ink1": t.ink1,
    "--u-ink2": t.ink2,
    "--u-ink3": t.ink3,
    "--u-hair": t.hair,
    "--u-edge": String(t.edge),
    "--u-acc": t.acc,
    "--u-on-acc": t.onAcc,
    "--u-unit": t.unit.toFixed(2) + "px",
    "--u-body": t.body.toFixed(2) + "px",
    "--u-lh": t.lh.toFixed(3),
    // Signature layer: one tempo (0ms at motion 0), the shadow and glow colours, the caught-light edge.
    "--u-dur": (t.k ? Math.round(uLerp(980, 520, (t.k - 190) / 370)) : 0) + "ms",
    "--u-shade": t.dark ? "rgba(0,0,0,.5)" : "rgba(28,32,52,.14)",
    "--u-glow": "color-mix(in oklab, " + t.acc + " " + (t.dark ? 55 : 42) + "%, transparent)",
    "--u-lit": t.dark ? "rgba(255,255,255,.075)" : "rgba(255,255,255,.92)",
    colorScheme: t.dark ? "dark" : "light",
    color: t.ink1,
    fontFamily: 'var(--font-ultra, "Google Sans Flex", "Geist", ui-sans-serif, system-ui, sans-serif)',
    fontVariationSettings: '"GRAD" ' + t.grad.toFixed(0) + ', "ROND" ' + t.rond.toFixed(0),
  } as CSSProperties;
}

/**
 * The kit's signature layer, shared by every Ultra asset and timed by --u-dur
 * (the viewer's motion value; 0ms at motion 0 and under reduced motion, so
 * every entrance lands at once):
 *   .u-rise   a blur-and-rise entrance, staggered by --u-i
 *   .u-draw   a stroke that draws itself in (set pathLength="1")
 *   .u-glass  a lifted surface: tinted gradient, caught-light top edge, soft shadow
 *   .u-lamp   a light and a lit edge that follow the pointer (--mx/--my, set on pointermove)
 *   .u-cta    the page's one goal: an accent glow, a lift and a sheen on hover
 */
const U_FX =
  "@keyframes u-rise{from{opacity:0;transform:translateY(.55em);filter:blur(6px)}}" +
  "@keyframes u-draw{from{stroke-dashoffset:1}}" +
  "@keyframes u-sheen{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}" +
  "@keyframes u-spin{to{transform:rotate(1turn)}}" +
  ".u-scope .u-rise{animation:u-rise var(--u-dur) cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--u-i,0) * var(--u-dur) * .09)}" +
  ".u-scope .u-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:u-draw calc(var(--u-dur) * 2) cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--u-i,0) * var(--u-dur) * .05)}" +
  ".u-scope .u-glass{background:linear-gradient(180deg,var(--u-s2),var(--u-s1) 62%);box-shadow:inset 0 1px 0 var(--u-lit),inset 0 0 0 1px color-mix(in oklab,var(--u-hair) calc(16% + var(--u-edge) * 60%),transparent),0 1px 2px var(--u-shade),0 30px 64px -34px var(--u-shade)}" +
  ".u-scope .u-lamp{position:relative;isolation:isolate}" +
  ".u-scope .u-lamp::before,.u-scope .u-lamp::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity calc(var(--u-dur) * .5)}" +
  ".u-scope .u-lamp::before{z-index:-1;background:radial-gradient(var(--u-lamp-r,240px) circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--u-acc) 13%,transparent),transparent 70%)}" +
  ".u-scope .u-lamp::after{padding:1px;background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--u-acc) 85%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}" +
  ".u-scope .u-lamp:hover::before,.u-scope .u-lamp:hover::after{opacity:1}" +
  ".u-scope .u-cta{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px color-mix(in oklab,var(--u-acc) 80%,transparent),0 10px 28px -10px var(--u-glow);transition:transform calc(var(--u-dur) * .45) cubic-bezier(.16,1,.3,1),box-shadow calc(var(--u-dur) * .45)}" +
  ".u-scope .u-cta:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px var(--u-acc),0 16px 40px -10px var(--u-glow)}" +
  ".u-scope .u-cta:active{transform:translateY(0) scale(.98)}" +
  ".u-scope .u-cta::after{content:'';position:absolute;inset:0 auto 0 0;width:42%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-130%) skewX(-18deg)}" +
  ".u-scope .u-cta:hover::after{animation:u-sheen calc(var(--u-dur) * 1.3) cubic-bezier(.16,1,.3,1)}" +
  ".u-scope .u-arr{transition:transform calc(var(--u-dur) * .45) cubic-bezier(.16,1,.3,1)}.u-scope .u-cta:hover .u-arr{transform:translateX(3px)}" +
  "@media (prefers-reduced-motion:reduce){.u-scope .u-rise,.u-scope .u-draw,.u-scope .u-cta::after{animation:none!important}.u-scope .u-cta{transition:none}}";

/**
 * The kit's scoped CSS: the one focus ring (the accent, 2px, offset 3px, the
 * element's own radius), tabular figures, and transitions off for elements a
 * frame loop writes. Rendered once per asset; identical text dedupes in React 19.
 */
const U_CSS =
  ".u-scope :focus-visible{outline:2px solid var(--u-acc)!important;outline-offset:3px!important;border-radius:revert-layer!important}" +
  ".u-scope .u-num{font-variant-numeric:tabular-nums}" +
  ".u-scope [data-u-live]{transition:none!important}" +
  U_FX;

/**
 * The scrolling box an element lives in: the nearest ancestor that actually
 * scrolls, or null for the window. Resolved on every frame, because a box only
 * becomes a scroller once its content is taller than it.
 */
function uScrollParent(el: Element | null): HTMLElement | null {
  let n = el?.parentElement ?? null;
  while (n && n !== document.body && n !== document.documentElement) {
    const oy = getComputedStyle(n).overflowY;
    if ((oy === "auto" || oy === "scroll" || oy === "overlay") && n.scrollHeight > n.clientHeight + 1) return n;
    n = n.parentElement;
  }
  return null;
}

/** Links built from props: https, http, mailto, same-site paths and anchors only (tabs and newlines stripped, backslashes refused). */
function uSafeHref(href: string): string {
  const h = href.replace(/[\t\n\r]/g, "").trim();
  if (!h || h.includes(String.fromCharCode(92))) return "#";
  if (h.startsWith("#") || (h.startsWith("/") && !h.startsWith("//"))) return h;
  return /^(https?:|mailto:)/i.test(h) ? h : "#";
}

/** Scroll whatever scrolls `el` to a same-page anchor; falls back to the browser for anything else. */
function uGo(e: { currentTarget: HTMLAnchorElement; preventDefault: () => void }) {
  const href = e.currentTarget.getAttribute("href") ?? "";
  if (!href.startsWith("#") || href.length < 2) return;
  const root = e.currentTarget.closest("[data-u-site]") ?? document;
  const target = root.querySelector<HTMLElement>('[data-u-anchor="' + href.slice(1) + '"]');
  if (!target) return;
  e.preventDefault();
  const sp = uScrollParent(target);
  const smooth: ScrollBehavior = uStore().snap.motion < 0.02 ? "auto" : "smooth";
  if (sp) sp.scrollTo({ top: sp.scrollTop + target.getBoundingClientRect().top - sp.getBoundingClientRect().top, behavior: smooth });
  else window.scrollTo({ top: window.scrollY + target.getBoundingClientRect().top, behavior: smooth });
}

/** Each value's own hue, for rays, meters and the spectrum: one colour per value, read clockwise like the dial. */
const U_AXIS_HUE: Record<UAxis, number> = { contrast: 262, warmth: 55, light: 95, density: 160, motion: 205, focus: 315 };

/** A value's colour, at the lightness that reads on this ground. */
function uAxisColor(axis: UAxis, dark: boolean): string {
  return uHex(uOklch(dark ? 0.82 : 0.58, dark ? 0.11 : 0.15, U_AXIS_HUE[axis]));
}

/** viberdy's V, as a solid mark that takes the current colour. */
function UVMark({ size = 28, className }: { size?: number; className?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden className={className}>
      <rect width="32" height="32" rx="9" fill="currentColor" />
      <path d="M9 10.5 L15.2 22.5 L16.8 22.5 L23 10.5 L19.6 10.5 L16 18.2 L12.4 10.5 Z" fill="var(--u-ground)" />
    </svg>
  );
}

/** The kit's arrow: slides on a .u-cta hover. */
function UArrow() {
  return (
    <svg className="u-arr" width="14" height="14" viewBox="0 0 14 14" aria-hidden>
      <path d="M2 7h9M7.5 3.5L11 7l-3.5 3.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/** Which values the viewer pinned, as a stable string ("contrast,light"); "" on the server. */
function useUltraPinned(): Set<UAxis> {
  const key = useSyncExternalStore(
    uSubscribe,
    () => U_AXES.filter((k) => typeof uStore().pinned[k] === "number").join(","),
    () => "",
  );
  return useMemo(() => new Set((key ? key.split(",") : []) as UAxis[]), [key]);
}

/** A point on axis i of a hexagon (clockwise from 12 o'clock), rounded so server and browser agree. */
function adPoint(i: number, r: number, cx: number, cy: number): [number, number] {
  const a = (-90 + i * 60) * (Math.PI / 180);
  return [Math.round((cx + Math.cos(a) * r) * 100) / 100, Math.round((cy + Math.sin(a) * r) * 100) / 100];
}

export interface UNavLink {
  label: string;
  href: string;
}

export interface UFooterColumn {
  title: string;
  links: UNavLink[];
}

const UF_COLUMNS: UFooterColumn[] = [
  {
    title: "Product",
    links: [
      { label: "Library", href: "/library" },
      { label: "Styles", href: "/styles" },
      { label: "Pricing", href: "/pricing" },
    ],
  },
  {
    title: "Ultra",
    links: [
      { label: "Tuning Prism Hero", href: "/library/tuning-prism-hero" },
      { label: "Aura Dial", href: "/library/aura-dial" },
      { label: "Keylight Field", href: "/library/keylight-field" },
    ],
  },
  {
    title: "viberdy",
    links: [
      { label: "About", href: "/about" },
      { label: "Terms", href: "/terms" },
      { label: "Privacy", href: "/privacy" },
    ],
  },
];

/** The reader's hexagon, drawn small: the same shape as the dial and the prism. */
function UHexGlyph({ axes, size = 44 }: { axes: UAxes; size?: number }) {
  const tk = ultraTokens(axes);
  const c = size / 2;
  const pts = U_AXES.map((ax, i) => adPoint(i, c * uLerp(0.3, 0.92, axes[ax]), c, c).join(",")).join(" ");
  return (
    <svg width={size} height={size} viewBox={"0 0 " + size + " " + size} aria-hidden>
      <polygon points={U_AXES.map((_, i) => adPoint(i, c * 0.92, c, c).join(",")).join(" ")} fill="none" stroke={tk.hair} strokeOpacity={0.5} />
      <polygon points={pts} fill={tk.acc} fillOpacity={0.25} stroke={tk.acc} strokeWidth={1.5} strokeLinejoin="round" />
    </svg>
  );
}

export interface UltraSiteFooterProps {
  brand?: string;
  call?: string;
  promise?: string;
  cta?: { label: string; href: string };
  secondary?: { label: string; href: string } | null;
  columns?: UFooterColumn[];
  legal?: string;
  className?: string;
}

/**
 * UltraSiteFooter — a closing line whose weight follows the reader's contrast, their own hexagon with a reset, and the links.
 */
export function UltraSiteFooter({
  brand = "viberdy",
  call = "Fits the reader.",
  promise = "Premium React components in every style, built to be pasted.",
  cta = { label: "Get the Ultra kit", href: "/styles/ultra" },
  secondary = { label: "Browse the library", href: "/library" },
  columns = UF_COLUMNS,
  legal = "© 2026 viberdy. All rights reserved.",
  className = "",
}: UltraSiteFooterProps) {
  const axes = useUltra();
  const tk = ultraTokens(axes);
  const pinned = useUltraPinned();
  // The closing line's weight follows contrast: 460 soft to 640 crisp, on Google Sans Flex's wght axis.
  const wght = Math.round(uLerp(460, 640, axes.contrast));
  return (
    <footer className={"u-scope @container relative w-full overflow-hidden " + className} style={{ ...ultraVars(tk), background: tk.ground }}>
      <style>{U_CSS}</style>
      <div aria-hidden className="pointer-events-none absolute inset-x-0 top-0 h-px" style={{ background: "linear-gradient(90deg, transparent, " + U_AXES.map((ax) => uAxisColor(ax, tk.dark)).join(", ") + ", transparent)", opacity: 0.6 }} />
      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-14 px-5 pb-10 pt-24 @3xl:px-10 @3xl:pt-32">
        <div className="flex flex-col gap-8">
          <p
            className="m-0 text-[clamp(52px,12cqw,168px)] leading-[0.92] tracking-[-0.045em]"
            style={{ color: tk.ink1, fontVariationSettings: '"wght" ' + wght + ', "GRAD" ' + tk.grad.toFixed(0) + ', "ROND" ' + tk.rond.toFixed(0), transition: tk.k ? "font-variation-settings 400ms cubic-bezier(.16,1,.3,1)" : undefined }}
          >
            {call}
          </p>
          <div className="flex flex-wrap items-center gap-5">
            <a href={uSafeHref(cta.href)} onClick={uGo} className="u-cta inline-flex h-12 items-center gap-2 rounded-full px-6 text-[15px] font-medium no-underline" style={{ background: tk.acc, color: tk.onAcc }}>
              {cta.label}
              <UArrow />
            </a>
            {secondary ? (
              <a href={uSafeHref(secondary.href)} onClick={uGo} className="text-[15px] underline decoration-1 underline-offset-4" style={{ color: tk.ink2 }}>
                {secondary.label}
              </a>
            ) : null}
          </div>
        </div>
        <div className="grid gap-10 @3xl:grid-cols-[1.3fr_1fr_1fr_1fr]">
          <div className="flex flex-col gap-4">
            <span className="flex items-center gap-2 text-[16px] font-[620] tracking-[-0.02em]" style={{ color: tk.ink1 }}>
              <UVMark size={28} />
              {brand}
            </span>
            <p className="m-0 max-w-[34ch] text-[14px] leading-[1.55]" style={{ color: tk.ink2 }}>
              {promise}
            </p>
            <div className="u-glass mt-2 flex w-fit items-center gap-3 rounded-[18px] py-2 pl-2 pr-4">
              <UHexGlyph axes={axes} />
              <div className="flex flex-col gap-0.5">
                <span className="text-[12.5px] font-medium" style={{ color: tk.ink1 }}>
                  Your tuning
                </span>
                <span className="text-[12px]" style={{ color: tk.ink3 }}>
                  {pinned.size ? "Saved on this device only." : "Following your system."}
                </span>
              </div>
              {pinned.size ? (
                <button type="button" onClick={resetUltra} className="ml-2 cursor-pointer border-0 bg-transparent p-0 text-[12.5px] font-medium underline decoration-1 underline-offset-4" style={{ color: tk.ink2, font: "inherit" }}>
                  Reset
                </button>
              ) : null}
            </div>
          </div>
          {columns.map((col) => (
            <nav key={col.title} aria-label={col.title} className="flex flex-col gap-3">
              <p className="m-0 text-[12.5px] font-medium" style={{ color: tk.ink3 }}>
                {col.title}
              </p>
              {col.links.map((l) => (
                <a key={l.href + l.label} href={uSafeHref(l.href)} onClick={uGo} className="w-fit text-[14.5px] no-underline hover:underline hover:decoration-1 hover:underline-offset-4" style={{ color: tk.ink2 }}>
                  {l.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
        <p className="m-0 text-[12.5px]" style={{ color: tk.ink3 }}>
          {legal}
        </p>
      </div>
    </footer>
  );
}