"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Fingerprint, RotateCcw } from "lucide-react";

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

/**
 * WaxSealEnvelope — a sealed letter you open by breaking the wax.
 *
 * Press and hold the seal: hairline cracks spread through the wax while you
 * hold. Let go early and the cracks stay, like real wax. Hold long enough and
 * the seal bursts into shards along those exact cracks, the flap swings open
 * in 3D and the letter slides up out of the envelope.
 *
 * Built on CSS variables and the Web Animations API: no animation library,
 * no Tailwind plugin. Keyboard: hold Enter or Space on the seal.
 */

/* ───────────────────────────── Variants ───────────────────────────── */

const waxSealEnvelopeVariants = cva("relative isolate w-full max-w-[440px] select-none", {
  variants: {
    variant: {
      ivory: "",
      noir: "",
      blush: "",
    },
  },
  defaultVariants: {
    variant: "ivory",
  },
});

type EnvelopeVariant = NonNullable<VariantProps<typeof waxSealEnvelopeVariants>["variant"]>;

interface Palette {
  paper: string;
  shade: string;
  light: string;
  lining: string;
  address: string;
  wax: string;
  waxLight: string;
  waxDark: string;
  waxInk: string;
  letter: string;
  letterInk: string;
  letterMuted: string;
  letterRule: string;
  accent: string;
  grain: number;
}

const PALETTES: Record<EnvelopeVariant, Palette> = {
  ivory: {
    paper: "#f3ecdf",
    shade: "#ddd0ba",
    light: "#fbf7ef",
    lining: "repeating-linear-gradient(135deg, rgba(163,22,31,0.8) 0 3px, transparent 3px 11px), #efe4d1",
    address: "#7a6548",
    wax: "#a3161f",
    waxLight: "#e5494e",
    waxDark: "#560910",
    waxInk: "#2b0305",
    letter: "#fffdf7",
    letterInk: "#2a2018",
    letterMuted: "rgba(42,32,24,0.62)",
    letterRule: "rgba(42,32,24,0.12)",
    accent: "#a3161f",
    grain: 0.28,
  },
  noir: {
    paper: "#232327",
    shade: "#141416",
    light: "#303036",
    lining: "repeating-linear-gradient(135deg, rgba(212,169,74,0.55) 0 1px, transparent 1px 9px), #121214",
    address: "rgba(232,208,152,0.85)",
    wax: "#c0912f",
    waxLight: "#f7dc8f",
    waxDark: "#664610",
    waxInk: "#2b1e04",
    letter: "#f9f4e8",
    letterInk: "#1b1812",
    letterMuted: "rgba(27,24,18,0.6)",
    letterRule: "rgba(27,24,18,0.12)",
    accent: "#d4a94a",
    grain: 0.2,
  },
  blush: {
    paper: "#f0d5cf",
    shade: "#ddb3a9",
    light: "#f9e9e5",
    lining:
      "radial-gradient(circle at 25% 25%, rgba(94,22,49,0.55) 0 1.6px, transparent 2px) 0 0 / 12px 12px, radial-gradient(circle at 75% 75%, rgba(94,22,49,0.32) 0 1.2px, transparent 1.6px) 0 0 / 12px 12px, #f4e0db",
    address: "#7a3b4a",
    wax: "#5e1631",
    waxLight: "#b2486f",
    waxDark: "#2a0614",
    waxInk: "#140209",
    letter: "#fffaf8",
    letterInk: "#3a1b24",
    letterMuted: "rgba(58,27,36,0.62)",
    letterRule: "rgba(58,27,36,0.12)",
    accent: "#8e2a4f",
    grain: 0.26,
  },
};

const GRAIN = `url("data:image/svg+xml,${encodeURIComponent(
  "<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(#g)'/></svg>"
)}")`;

/* ──────────────────────────── Geometry ────────────────────────────── */

// The root box holds the envelope plus headroom for the open flap and the
// rising letter. Envelope height = 0.625 × width; root = 1.66 × that.
const ROOT_RATIO = "1 / 1.0375";
const ENV_TOP = "19.88%";
const ENV_HEIGHT = "60.24%";
const FLAP_DEPTH = 58; // % of envelope height where the flap tip (and seal) sits
const POCKET = "polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%)";
const FLAP = "polygon(0 0, 100% 0, 53.5% 95%, 50% 100%, 46.5% 95%)";

const CRACKS = 5;
const CRACK_DELAYS = [0.08, 0.2, 0.31, 0.43, 0.55]; // hold progress at which each crack starts

function mulberry32(seed: number) {
  let a = seed;
  return () => {
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function hash(s: string) {
  let h = 2166136261;
  for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619);
  return h >>> 0;
}

type Pt = [number, number];

interface SealGeometry {
  blob: string;
  cracks: string[];
  shards: { clip: string; origin: string; angle: number }[];
}

/**
 * Builds a wobbly wax blob, a set of radial cracks, and the shards those
 * cracks cut the seal into. Everything is seeded, so server and client agree
 * and the shards break along exactly the cracks you watched appear.
 */
function buildSeal(seed: string): SealGeometry {
  const rand = mulberry32(hash(seed || "seal"));
  const round = (n: number) => Math.round(n * 100) / 100;

  // Blob outline: a circle with poured-wax wobble and the odd drip.
  const n = 18;
  const pts: Pt[] = [];
  for (let i = 0; i < n; i++) {
    const a = (i / n) * Math.PI * 2;
    const r = 43 + rand() * 3 + (rand() < 0.2 ? 2.8 : 0);
    pts.push([50 + r * Math.cos(a), 50 + r * Math.sin(a)]);
  }
  const mid = (p: Pt, q: Pt): Pt => [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
  const first = mid(pts[n - 1]!, pts[0]!);
  let blob = `M${round(first[0])} ${round(first[1])}`;
  for (let i = 0; i < n; i++) {
    const p = pts[i]!;
    const m = mid(p, pts[(i + 1) % n]!);
    blob += ` Q${round(p[0])} ${round(p[1])} ${round(m[0])} ${round(m[1])}`;
  }
  blob += " Z";

  // Cracks: jagged lines from the centre out past the rim.
  const start = rand() * Math.PI * 2;
  const lines: Pt[][] = [];
  for (let i = 0; i < CRACKS; i++) {
    const base = start + (i / CRACKS) * Math.PI * 2 + (rand() - 0.5) * 0.5;
    const line: Pt[] = [[50, 50]];
    for (const r of [9, 18, 27, 36, 45, 57]) {
      const a = base + (rand() - 0.5) * 0.3;
      line.push([50 + r * Math.cos(a), 50 + r * Math.sin(a)]);
    }
    lines.push(line);
  }
  const cracks = lines.map(
    (line) => "M" + line.map(([x, y]) => `${round(x)} ${round(y)}`).join(" L")
  );

  // Shards: the wedge between each pair of neighbouring cracks.
  const shards = lines.map((line, i) => {
    const next = lines[(i + 1) % CRACKS]!;
    const endA = line[line.length - 1]!;
    const endB = next[next.length - 1]!;
    const a1 = Math.atan2(endA[1] - 50, endA[0] - 50);
    let a2 = Math.atan2(endB[1] - 50, endB[0] - 50);
    while (a2 <= a1) a2 += Math.PI * 2;
    const arc: Pt[] = [];
    for (let s = 1; s < 6; s++) {
      const a = a1 + ((a2 - a1) * s) / 6;
      arc.push([50 + 58 * Math.cos(a), 50 + 58 * Math.sin(a)]);
    }
    const poly = [...line, ...arc, ...[...next].reverse()];
    const cx = poly.reduce((acc, p) => acc + p[0], 0) / poly.length;
    const cy = poly.reduce((acc, p) => acc + p[1], 0) / poly.length;
    return {
      clip: `polygon(${poly.map(([x, y]) => `${round(x)}% ${round(y)}%`).join(", ")})`,
      origin: `${round(cx)}% ${round(cy)}%`,
      // Each shard flies out away from the centre, through its own middle.
      angle: Math.atan2(cy - 50, cx - 50),
    };
  });

  return { blob, cracks, shards };
}

/* ───────────────────────────── Physics ────────────────────────────── */

type Phase = "sealed" | "opening" | "open" | "closing";

interface Bit {
  x: number;
  y: number;
  r: number;
  vx: number;
  vy: number;
  vr: number;
}

interface Sim {
  phase: Phase;
  progress: number;
  holding: boolean;
  press: number;
  lastCrack: number;
  t0: number;
  flap: number;
  flapVel: number;
  rise: number;
  drop: number;
  shards: Bit[];
  crumbs: Bit[];
  rx: number;
  ry: number;
  trx: number;
  try: number;
  raf: number;
  lastT: number;
}

const CRUMBS = 12;
const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
const easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);

function buzz(pattern: number | number[]) {
  try {
    navigator.vibrate?.(pattern);
  } catch {
    // Haptics are a nicety.
  }
}

const createSim = (open: boolean): Sim => ({
  phase: open ? "open" : "sealed",
  progress: open ? 1 : 0,
  holding: false,
  press: 0,
  lastCrack: -1,
  t0: 0,
  flap: open ? 180 : 0,
  flapVel: 0,
  rise: open ? 1 : 0,
  drop: open ? 1 : 0,
  shards: [],
  crumbs: [],
  rx: 0,
  ry: 0,
  trx: 0,
  try: 0,
  raf: 0,
  lastT: 0,
});

/* ───────────────────────────── Pieces ─────────────────────────────── */

function SealArt({
  geo,
  gradientId,
  palette,
  monogram,
  cracks,
}: {
  geo: SealGeometry;
  gradientId: string;
  palette: Palette;
  monogram: string;
  /** "live" reveals cracks with hold progress; "full" draws them all. */
  cracks: "live" | "full";
}) {
  const dash = (i: number): React.CSSProperties =>
    cracks === "full"
      ? { strokeDasharray: 1, strokeDashoffset: 0 }
      : {
          strokeDasharray: 1,
          strokeDashoffset: `calc(1 - clamp(0, (var(--ws-p, 0) - ${CRACK_DELAYS[i] ?? 0}) / 0.45, 1))`,
        };
  return (
    <svg viewBox="0 0 100 100" className="absolute inset-0 h-full w-full overflow-visible" aria-hidden="true">
      <path d={geo.blob} fill={`url(#${gradientId})`} />
      <path d={geo.blob} fill="none" stroke="rgba(255,255,255,0.28)" strokeWidth="0.8" transform="translate(-0.5 -0.6)" />
      {/* The stamped impression */}
      <circle cx="50" cy="50" r="30" fill={palette.waxDark} opacity="0.32" />
      <circle cx="50.7" cy="50.8" r="30" fill="none" stroke={palette.waxLight} strokeOpacity="0.55" strokeWidth="1.3" />
      <circle cx="50" cy="50" r="30" fill="none" stroke={palette.waxDark} strokeWidth="1.3" />
      <circle cx="50" cy="50" r="25.5" fill="none" stroke={palette.waxDark} strokeWidth="0.9" strokeDasharray="0.6 2.2" strokeLinecap="round" opacity="0.8" />
      <text
        x="50.8"
        y="51.6"
        textAnchor="middle"
        dominantBaseline="central"
        fontFamily="Georgia, 'Times New Roman', serif"
        fontWeight="700"
        fontSize={monogram.length > 1 ? 20 : 28}
        fill={palette.waxLight}
        opacity="0.6"
      >
        {monogram}
      </text>
      <text
        x="50"
        y="50.8"
        textAnchor="middle"
        dominantBaseline="central"
        fontFamily="Georgia, 'Times New Roman', serif"
        fontWeight="700"
        fontSize={monogram.length > 1 ? 20 : 28}
        fill={palette.waxDark}
      >
        {monogram}
      </text>
      {geo.cracks.map((d, i) => (
        <g key={i} clipPath={`url(#${gradientId}-clip)`}>
          <path
            d={d}
            pathLength={1}
            fill="none"
            stroke={palette.waxLight}
            strokeOpacity="0.55"
            strokeWidth="0.9"
            strokeLinejoin="round"
            transform="translate(0.6 0.6)"
            style={dash(i)}
          />
          <path
            d={d}
            pathLength={1}
            fill="none"
            stroke={palette.waxInk}
            strokeWidth="1.5"
            strokeLinejoin="round"
            style={dash(i)}
          />
        </g>
      ))}
    </svg>
  );
}

/* ──────────────────────────── Component ───────────────────────────── */

export interface WaxSealEnvelopeProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
    VariantProps<typeof waxSealEnvelopeVariants> {
  /** Name written on the back of the envelope. */
  recipient?: string;
  /** Letters pressed into the wax. Defaults to the first letter of `heading`. */
  monogram?: string;
  /** Small line above the heading on the letter. */
  eyebrow?: string;
  heading?: string;
  message?: string;
  /** Sign-off at the bottom of the letter. */
  signature?: string;
  /** Replace the default letter layout with your own content. */
  children?: React.ReactNode;
  /** How long the seal has to be held to break, in ms. */
  holdDuration?: number;
  /** Instruction shown under the sealed envelope. */
  hint?: string;
  /** Render already opened. */
  defaultOpen?: boolean;
  /** Stop the seal from being broken. */
  disabled?: boolean;
  /** Fires once, the moment the seal breaks. */
  onOpen?: () => void;
  /** Show a button that puts the letter back and re-seals the envelope. Handy for demos. */
  resealable?: boolean;
}

export function WaxSealEnvelope({
  className,
  variant,
  recipient,
  monogram,
  eyebrow = "You're invited",
  heading = "Open me",
  message,
  signature,
  children,
  holdDuration = 1100,
  hint = "Press & hold the seal",
  defaultOpen = false,
  disabled = false,
  onOpen,
  resealable = false,
  style,
  onPointerMove,
  onPointerLeave,
  ...props
}: WaxSealEnvelopeProps) {
  const palette = PALETTES[variant ?? "ivory"];
  const mark = (monogram ?? heading.trim().charAt(0) ?? "✦").slice(0, 2).toUpperCase() || "✦";
  const geo = React.useMemo(() => buildSeal(`${mark}-${variant ?? "ivory"}`), [mark, variant]);
  // Same id for every envelope of a variant: the gradient is identical, and a
  // fixed id can't drift between server and client render.
  const gradientId = `ws-wax-${variant ?? "ivory"}-${hash(mark).toString(36)}`;

  const [phase, setPhase] = React.useState<Phase>(defaultOpen ? "open" : "sealed");
  const [compact, setCompact] = React.useState(false);

  const rootRef = React.useRef<HTMLDivElement>(null);
  const stageRef = React.useRef<HTMLDivElement>(null);
  const flapRef = React.useRef<HTMLDivElement>(null);
  const sealRef = React.useRef<HTMLDivElement>(null);
  const sheenRef = React.useRef<HTMLDivElement>(null);
  const shardRefs = React.useRef<(HTMLDivElement | null)[]>([]);
  const crumbRefs = React.useRef<(HTMLSpanElement | null)[]>([]);
  const sim = React.useRef<Sim>(createSim(defaultOpen));
  const stepRef = React.useRef<(now: number) => void>(() => {});
  const reducedRef = React.useRef(false);
  const resealedRef = React.useRef(false);
  const latest = React.useRef({ onOpen, holdDuration });

  React.useEffect(() => {
    latest.current = { onOpen, holdDuration };
  });

  const paint = React.useCallback(() => {
    const root = rootRef.current;
    if (!root) return;
    const s = sim.current;
    root.style.setProperty("--ws-p", s.progress.toFixed(4));
    root.style.setProperty("--ws-press", s.press.toFixed(3));
    root.style.setProperty("--ws-rise", s.rise.toFixed(4));
    root.style.setProperty("--ws-drop", s.drop.toFixed(4));
    root.style.setProperty("--ws-flap", s.flap.toFixed(2));
    root.style.setProperty("--ws-flapshade", (Math.abs(Math.sin((s.flap * Math.PI) / 180)) * 0.28).toFixed(3));

    // Wax shudders under pressure, harder as the cracks spread.
    const shake = s.holding && s.phase === "sealed" ? 0.25 + s.progress * 1.1 : 0;
    root.style.setProperty("--ws-jx", `${((Math.random() - 0.5) * shake).toFixed(2)}px`);
    root.style.setProperty("--ws-jy", `${((Math.random() - 0.5) * shake).toFixed(2)}px`);

    if (flapRef.current) flapRef.current.style.zIndex = s.flap > 90 ? "1" : "4";
    if (stageRef.current) {
      stageRef.current.style.transform = `perspective(1200px) rotateX(${s.rx.toFixed(3)}deg) rotateY(${s.ry.toFixed(3)}deg)`;
    }

    if (s.phase === "opening") {
      const age = performance.now() - s.t0;
      const fade = age < 480 ? 1 : Math.max(0, 1 - (age - 480) / 420);
      s.shards.forEach((b, i) => {
        const el = shardRefs.current[i];
        if (!el) return;
        el.style.transform = `translate(${b.x.toFixed(1)}px, ${b.y.toFixed(1)}px) rotate(${b.r.toFixed(1)}deg)`;
        el.style.opacity = String(fade);
      });
      s.crumbs.forEach((b, i) => {
        const el = crumbRefs.current[i];
        if (!el) return;
        el.style.transform = `translate(${b.x.toFixed(1)}px, ${b.y.toFixed(1)}px)`;
        el.style.opacity = String(fade);
      });
    }
  }, []);

  const kick = React.useCallback(() => {
    const s = sim.current;
    if (!s.raf) s.raf = requestAnimationFrame((t) => stepRef.current(t));
  }, []);

  const breakSeal = React.useCallback(() => {
    const s = sim.current;
    if (s.phase !== "sealed") return;
    s.phase = "opening";
    s.holding = false;
    s.progress = 1;
    s.t0 = performance.now();
    s.flapVel = 0;
    s.shards = geo.shards.map((shard) => {
      const speed = 2.6 + Math.random() * 3;
      return {
        x: 0,
        y: 0,
        r: 0,
        vx: Math.cos(shard.angle) * speed,
        vy: Math.sin(shard.angle) * speed - 3.4,
        vr: (Math.random() - 0.5) * 18,
      };
    });
    s.crumbs = Array.from({ length: CRUMBS }, () => {
      const a = Math.random() * Math.PI * 2;
      const speed = 2 + Math.random() * 5;
      return { x: 0, y: 0, r: 0, vx: Math.cos(a) * speed, vy: Math.sin(a) * speed - 3, vr: 0 };
    });
    buzz([22, 30, 12]);
    setPhase("opening");
    latest.current.onOpen?.();
    kick();
  }, [geo, kick]);

  const step = React.useCallback(
    (now: number) => {
      const s = sim.current;
      s.raf = 0;
      const dtMs = s.lastT ? Math.min(50, now - s.lastT) : 16.667;
      const dt = dtMs / 16.667;
      s.lastT = now;
      const ease = (rate: number) => 1 - Math.pow(1 - rate, dt);
      let busy = false;

      // Hover tilt.
      s.rx += (s.trx - s.rx) * ease(0.12);
      s.ry += (s.try - s.ry) * ease(0.12);
      if (Math.abs(s.trx - s.rx) + Math.abs(s.try - s.ry) > 0.01) busy = true;

      // Thumb pressure on the wax.
      const pressTarget = s.holding ? 1 : 0;
      s.press += (pressTarget - s.press) * ease(s.holding ? 0.3 : 0.16);
      if (Math.abs(pressTarget - s.press) > 0.002) busy = true;

      if (s.phase === "sealed") {
        if (s.holding) {
          s.progress = Math.min(1, s.progress + dtMs / Math.max(200, latest.current.holdDuration));
          const crack = CRACK_DELAYS.filter((d) => s.progress >= d).length - 1;
          if (crack > s.lastCrack) {
            s.lastCrack = crack;
            buzz(6);
          }
          busy = true;
          if (s.progress >= 1) breakSeal();
        }
      } else if (s.phase === "opening") {
        const t = now - s.t0;
        if (reducedRef.current) {
          s.flap = 180;
          s.drop = clamp01(t / 300);
          s.rise = clamp01(t / 300);
        } else {
          if (t > 70) {
            s.flapVel += ((180 - s.flap) * 0.05 - s.flapVel * 0.26) * dt;
            s.flap = Math.min(196, s.flap + s.flapVel * dt);
          }
          s.drop = easeInOut(clamp01((t - 160) / 900));
          s.rise = easeOut(clamp01((t - 430) / 880));
        }
        for (const b of s.shards) {
          b.vy += 0.42 * dt;
          b.vx *= Math.pow(0.99, dt);
          b.x += b.vx * dt;
          b.y += b.vy * dt;
          b.r += b.vr * dt;
        }
        for (const b of s.crumbs) {
          b.vy += 0.45 * dt;
          b.x += b.vx * dt;
          b.y += b.vy * dt;
        }
        const settled = Math.abs(s.flap - 180) < 0.3 && Math.abs(s.flapVel) < 0.05;
        if (t > 1400 && (settled || reducedRef.current)) {
          s.flap = 180;
          s.flapVel = 0;
          s.rise = 1;
          s.drop = 1;
          s.phase = "open";
          setPhase("open");
        } else {
          busy = true;
        }
      } else if (s.phase === "closing") {
        const t = now - s.t0;
        s.rise = 1 - easeInOut(clamp01(t / 520));
        if (t > 380) {
          s.flapVel += ((0 - s.flap) * 0.06 - s.flapVel * 0.3) * dt;
          s.flap = Math.max(-4, s.flap + s.flapVel * dt);
        }
        s.drop = 1 - easeInOut(clamp01((t - 380) / 620));
        const settled = Math.abs(s.flap) < 0.3 && Math.abs(s.flapVel) < 0.05;
        if (t > 1000 && settled) {
          s.flap = 0;
          s.flapVel = 0;
          s.progress = 0;
          s.lastCrack = -1;
          s.phase = "sealed";
          resealedRef.current = true;
          setPhase("sealed");
        } else {
          busy = true;
        }
      }

      paint();
      if (busy) kick();
      else s.lastT = 0;
    },
    [breakSeal, kick, paint]
  );

  React.useEffect(() => {
    stepRef.current = step;
  }, [step]);

  const reseal = React.useCallback(() => {
    const s = sim.current;
    if (s.phase !== "open") return;
    s.phase = "closing";
    s.t0 = performance.now();
    s.flapVel = 0;
    setPhase("closing");
    kick();
  }, [kick]);

  /* ── Effects ── */

  React.useEffect(() => {
    reducedRef.current = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
    paint();
    const s = sim.current;
    return () => {
      if (s.raf) cancelAnimationFrame(s.raf);
      s.raf = 0;
    };
  }, [paint]);

  React.useEffect(() => {
    const root = rootRef.current;
    if (!root || typeof ResizeObserver === "undefined") return;
    const measure = () => setCompact(root.offsetWidth < 360);
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(root);
    return () => ro.disconnect();
  }, []);

  // A slow glint across the wax while it waits to be opened.
  React.useEffect(() => {
    if (phase !== "sealed" || reducedRef.current) return;
    const anim = sheenRef.current?.animate(
      [
        { transform: "translateX(-140%) skewX(-18deg)" },
        { transform: "translateX(-140%) skewX(-18deg)", offset: 0.55 },
        { transform: "translateX(260%) skewX(-18deg)" },
      ],
      { duration: 4200, iterations: Infinity, easing: "ease-in-out", delay: 600 }
    );
    return () => anim?.cancel();
  }, [phase]);

  // Fresh wax drips back on after a reseal.
  React.useEffect(() => {
    if (phase !== "sealed" || !resealedRef.current) return;
    resealedRef.current = false;
    sealRef.current?.animate(
      [
        { opacity: 0, transform: "scale(1.45)", filter: "blur(3px)" },
        { opacity: 1, transform: "scale(0.94)", filter: "blur(0px)", offset: 0.7 },
        { opacity: 1, transform: "scale(1)", filter: "blur(0px)" },
      ],
      { duration: 520, easing: "cubic-bezier(.2,.8,.3,1)" }
    );
  }, [phase]);

  const fadeInRef = React.useCallback((el: HTMLElement | null) => {
    el?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 320, delay: 200, fill: "backwards" });
  }, []);

  /* ── Input ── */

  const startHold = () => {
    const s = sim.current;
    if (disabled || s.phase !== "sealed") return;
    s.holding = true;
    s.trx = 0;
    s.try = 0;
    kick();
  };
  const endHold = () => {
    const s = sim.current;
    if (!s.holding) return;
    s.holding = false;
    kick();
  };

  const handleRootPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    onPointerMove?.(e);
    const root = rootRef.current;
    const s = sim.current;
    if (!root || e.pointerType !== "mouse" || s.holding || reducedRef.current) return;
    const r = root.getBoundingClientRect();
    const mx = (e.clientX - r.left) / r.width - 0.5;
    const my = (e.clientY - r.top) / r.height - 0.5;
    s.trx = -my * 7;
    s.try = mx * 9;
    kick();
  };

  const handleRootPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
    onPointerLeave?.(e);
    const s = sim.current;
    s.trx = 0;
    s.try = 0;
    kick();
  };

  /* ── Render ── */

  const isSealed = phase === "sealed";
  const letterInk = { color: palette.letterInk };

  return (
    <div
      ref={rootRef}
      className={cn(waxSealEnvelopeVariants({ variant }), className)}
      style={{ aspectRatio: ROOT_RATIO, ...style }}
      onPointerMove={handleRootPointerMove}
      onPointerLeave={handleRootPointerLeave}
      {...props}
    >
      {/* Shared defs for the seal and every shard: the wax gradient, and the
          blob outline that keeps cracks from running onto the paper. */}
      <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false">
        <defs>
          <radialGradient id={gradientId} cx="36%" cy="30%" r="78%">
            <stop offset="0" stopColor={palette.waxLight} />
            <stop offset="0.42" stopColor={palette.wax} />
            <stop offset="1" stopColor={palette.waxDark} />
          </radialGradient>
          <clipPath id={`${gradientId}-clip`}>
            <path d={geo.blob} />
          </clipPath>
        </defs>
      </svg>

      {/* Envelope: sinks as it opens to make room for the letter. */}
      <div
        className="absolute inset-x-0"
        style={{
          top: ENV_TOP,
          height: ENV_HEIGHT,
          transform: "translateY(calc(var(--ws-drop, 0) * 33%))",
        }}
      >
        <div
          ref={stageRef}
          className="absolute inset-0"
          style={{
            filter: "drop-shadow(0 18px 22px rgba(0,0,0,0.2)) drop-shadow(0 2px 3px rgba(0,0,0,0.14))",
            willChange: "transform",
          }}
        >
          {/* Inside of the envelope, lined */}
          <div className="absolute inset-0 rounded-[3px]" style={{ zIndex: 0, background: palette.lining }}>
            <div
              className="absolute inset-0"
              style={{ background: "linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.08) 55%)" }}
            />
          </div>

          {/* Letter */}
          <div
            aria-hidden={isSealed || undefined}
            className="absolute overflow-hidden rounded-[4px]"
            style={{
              zIndex: 2,
              left: "5%",
              right: "5%",
              top: "4%",
              height: "90%",
              background: palette.letter,
              boxShadow: "0 1px 2px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.12)",
              transform: "translateY(calc(var(--ws-rise, 0) * -78%))",
              willChange: "transform",
            }}
          >
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0"
              style={{ backgroundImage: GRAIN, opacity: 0.12, mixBlendMode: "multiply" }}
            />
            <div className={cn("relative flex flex-col items-center text-center", compact ? "px-4 pt-4" : "px-7 pt-6")}>
              {children ?? (
                <>
                  {eyebrow && (
                    <p
                      className={cn(
                        "font-semibold uppercase",
                        compact ? "text-[8.5px] tracking-[0.22em]" : "text-[10px] tracking-[0.3em]"
                      )}
                      style={{ color: palette.accent }}
                    >
                      {eyebrow}
                    </p>
                  )}
                  <h3
                    className={cn(
                      "font-serif font-semibold leading-[1.05] tracking-tight",
                      compact ? "mt-1.5 text-xl" : "mt-2 text-[28px]"
                    )}
                    style={letterInk}
                  >
                    {heading}
                  </h3>
                  <div
                    aria-hidden="true"
                    className={cn("h-px w-10", compact ? "my-2" : "my-3")}
                    style={{ background: palette.letterRule }}
                  />
                  {message && (
                    <p
                      className={cn("max-w-[30ch] leading-relaxed", compact ? "text-[11px]" : "text-[13px]")}
                      style={{ color: palette.letterMuted }}
                    >
                      {message}
                    </p>
                  )}
                  {signature && (
                    <p
                      className={cn("font-serif italic", compact ? "mt-2 text-xs" : "mt-3 text-sm")}
                      style={letterInk}
                    >
                      {signature}
                    </p>
                  )}
                </>
              )}
            </div>
          </div>

          {/* Pocket: side and bottom folds */}
          <div className="absolute inset-0" style={{ zIndex: 3, clipPath: POCKET }}>
            <div className="absolute inset-0" style={{ background: palette.paper }} />
            <div
              className="absolute inset-0"
              style={{
                clipPath: "polygon(0 0, 50% 54%, 0 100%)",
                background: `linear-gradient(90deg, ${palette.shade}, ${palette.paper} 85%)`,
              }}
            />
            <div
              className="absolute inset-0"
              style={{
                clipPath: "polygon(100% 0, 50% 54%, 100% 100%)",
                background: `linear-gradient(270deg, ${palette.shade}, ${palette.paper} 85%)`,
              }}
            />
            <div className="absolute inset-0" style={{ filter: "drop-shadow(0 -1px 2px rgba(0,0,0,0.14))" }}>
              <div
                className="absolute inset-0"
                style={{
                  clipPath: "polygon(0 100%, 50% 44%, 100% 100%)",
                  background: `linear-gradient(0deg, ${palette.paper}, ${palette.light})`,
                }}
              />
            </div>
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0"
              style={{ backgroundImage: GRAIN, opacity: palette.grain, mixBlendMode: "overlay" }}
            />
            {recipient && (
              <p
                className={cn(
                  "absolute inset-x-0 bottom-[11%] text-center font-serif italic",
                  compact ? "text-xs" : "text-[15px]"
                )}
                style={{ color: palette.address }}
              >
                For {recipient}
              </p>
            )}
          </div>

          {/* Flap: swings open on a hinge along the top edge */}
          <div
            ref={flapRef}
            className="absolute inset-x-0 top-0"
            style={{
              zIndex: 4,
              height: `${FLAP_DEPTH}%`,
              transformOrigin: "50% 0%",
              transform: "perspective(900px) rotateX(calc(var(--ws-flap, 0) * 1deg))",
              filter: "drop-shadow(0 2px 2.5px rgba(0,0,0,0.2))",
              willChange: "transform",
            }}
          >
            <div className="absolute inset-0" style={{ clipPath: FLAP }}>
              <div
                className="absolute inset-0"
                style={{
                  background: `linear-gradient(180deg, ${palette.light}, ${palette.paper} 60%, ${palette.shade})`,
                  opacity: "clamp(0, calc((90 - var(--ws-flap, 0)) * 100), 1)",
                }}
              />
              <div
                className="absolute inset-0"
                style={{
                  background: palette.lining,
                  opacity: "clamp(0, calc((var(--ws-flap, 0) - 90) * 100), 1)",
                }}
              >
                {/* A smear of wax left on the flap tip */}
                <div
                  className="absolute bottom-0 left-1/2 aspect-square w-[13%] rounded-full"
                  style={{
                    transform: "translate(-50%, 35%)",
                    background: `radial-gradient(circle at 40% 35%, ${palette.waxLight}, ${palette.wax} 45%, ${palette.waxDark})`,
                    opacity: 0.9,
                  }}
                />
              </div>
              <div
                aria-hidden="true"
                className="pointer-events-none absolute inset-0"
                style={{ backgroundImage: GRAIN, opacity: palette.grain, mixBlendMode: "overlay" }}
              />
              <div
                aria-hidden="true"
                className="pointer-events-none absolute inset-0"
                style={{ background: "#000", opacity: "var(--ws-flapshade, 0)" }}
              />
            </div>
          </div>

          {/* Seal */}
          <div
            className="absolute aspect-square w-[24%]"
            style={{ zIndex: 5, left: "50%", top: `${FLAP_DEPTH}%`, transform: "translate(-50%, -50%)" }}
          >
            {isSealed && (
              <svg
                viewBox="0 0 100 100"
                className="pointer-events-none absolute overflow-visible"
                style={{
                  left: "-12%",
                  top: "-12%",
                  width: "124%",
                  height: "124%",
                  opacity: "calc(0.35 + var(--ws-press, 0) * 0.65)",
                }}
                aria-hidden="true"
              >
                <circle cx="50" cy="50" r="48" fill="none" stroke={palette.accent} strokeOpacity="0.22" strokeWidth="2" />
                <circle
                  cx="50"
                  cy="50"
                  r="48"
                  fill="none"
                  stroke={palette.accent}
                  strokeWidth="2.4"
                  strokeLinecap="round"
                  pathLength={1}
                  transform="rotate(-90 50 50)"
                  style={{ strokeDasharray: 1, strokeDashoffset: "calc(1 - var(--ws-p, 0))" }}
                />
              </svg>
            )}

            {isSealed && (
              <div
                ref={sealRef}
                className="absolute inset-0"
                style={{
                  transform:
                    "translate(var(--ws-jx, 0px), var(--ws-jy, 0px)) scale(calc(1 - var(--ws-press, 0) * 0.06))",
                  filter:
                    "drop-shadow(0 calc(3px - var(--ws-press, 0) * 2px) calc(4px - var(--ws-press, 0) * 2px) rgba(0,0,0,0.38))",
                }}
              >
                <SealArt geo={geo} gradientId={gradientId} palette={palette} monogram={mark} cracks="live" />
                <div aria-hidden="true" className="absolute overflow-hidden rounded-full" style={{ inset: "8%" }}>
                  <div
                    ref={sheenRef}
                    className="absolute inset-y-0 left-0 w-[38%]"
                    style={{
                      transform: "translateX(-140%) skewX(-18deg)",
                      background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent)",
                      mixBlendMode: "soft-light",
                    }}
                  />
                </div>
              </div>
            )}

            {phase === "opening" && (
              <>
                {geo.shards.map((shard, i) => (
                  <div
                    key={i}
                    ref={(el) => {
                      shardRefs.current[i] = el;
                    }}
                    className="absolute inset-0"
                    style={{
                      clipPath: shard.clip,
                      transformOrigin: shard.origin,
                      filter: "drop-shadow(0 3px 3px rgba(0,0,0,0.3))",
                    }}
                  >
                    <SealArt geo={geo} gradientId={gradientId} palette={palette} monogram={mark} cracks="full" />
                  </div>
                ))}
                {Array.from({ length: CRUMBS }, (_, i) => (
                  <span
                    key={`c${i}`}
                    ref={(el) => {
                      crumbRefs.current[i] = el;
                    }}
                    aria-hidden="true"
                    className="absolute left-1/2 top-1/2 rounded-full"
                    style={{
                      width: 2 + (i % 3) * 1.5,
                      height: 2 + (i % 3) * 1.5,
                      marginLeft: -2,
                      marginTop: -2,
                      background: i % 2 ? palette.wax : palette.waxDark,
                    }}
                  />
                ))}
              </>
            )}

            {isSealed && (
              <div
                role="button"
                tabIndex={disabled ? -1 : 0}
                aria-disabled={disabled || undefined}
                aria-label={`Press and hold to break the seal${recipient ? ` on the letter for ${recipient}` : ""}`}
                className={cn(
                  "absolute rounded-full outline-none touch-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                  disabled ? "cursor-not-allowed" : "cursor-pointer"
                )}
                style={{ inset: "-12%" }}
                onPointerDown={(e) => {
                  if (e.pointerType === "mouse" && e.button !== 0) return;
                  e.currentTarget.setPointerCapture(e.pointerId);
                  startHold();
                }}
                onPointerUp={endHold}
                onPointerCancel={endHold}
                onLostPointerCapture={endHold}
                onContextMenu={(e) => e.preventDefault()}
                onKeyDown={(e) => {
                  if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
                    e.preventDefault();
                    startHold();
                  }
                }}
                onKeyUp={(e) => {
                  if (e.key === "Enter" || e.key === " ") endHold();
                }}
                onBlur={endHold}
              />
            )}
          </div>
        </div>
      </div>

      {/* Hint / reseal, in the space under the sealed envelope */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-center" style={{ height: ENV_TOP }}>
        {isSealed && !disabled && hint && (
          <span
            className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground"
            style={{ opacity: "calc(1 - var(--ws-p, 0) * 1.6)" }}
          >
            <Fingerprint aria-hidden="true" className="h-3.5 w-3.5" />
            {hint}
          </span>
        )}
      </div>
      {phase === "open" && resealable && (
        <button
          ref={fadeInRef}
          type="button"
          onClick={reseal}
          title="Reseal envelope"
          className="absolute bottom-2 right-2 z-20 grid h-8 w-8 place-items-center rounded-full border bg-background text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <RotateCcw aria-hidden="true" className="h-3.5 w-3.5" />
          <span className="sr-only">Reseal envelope</span>
        </button>
      )}

      <span className="sr-only" aria-live="polite">
        {phase === "open" ? `Seal broken. ${heading}` : ""}
      </span>
    </div>
  );
}

export { waxSealEnvelopeVariants };
Wax Seal Envelope
