// CaseAnimations — animated previews of each deployment.
// Pure CSS keyframes + a tiny JS typing helper. Each component is self-contained
// and loops indefinitely. Designed to fit the motif column (~340–400px wide).

// ---- Shared bits ---------------------------------------------------------

function useTypewriter(text, { speed = 38, pause = 1600, loop = true } = {}) {
  const [out, setOut] = React.useState("");
  React.useEffect(() => {
    let cancelled = false;
    let i = 0;
    const tick = () => {
      if (cancelled) return;
      if (i <= text.length) {
        setOut(text.slice(0, i));
        i += 1;
        setTimeout(tick, speed + Math.random() * 24);
      } else if (loop) {
        setTimeout(() => { if (!cancelled) { i = 0; tick(); } }, pause);
      }
    };
    tick();
    return () => { cancelled = true; };
  }, [text, speed, pause, loop]);
  return out;
}

// Inject one shared <style> tag for all keyframes used below.
function CaseAnimationStyles() {
  return (
    <style>{`
      @keyframes caseGanttFill {
        0%, 8%   { transform: scaleX(0); }
        45%, 100% { transform: scaleX(1); }
      }
      @keyframes caseLineGrow {
        0%, 10%  { transform: scaleX(0); }
        55%, 100% { transform: scaleX(1); }
      }
      @keyframes caseFadeIn {
        0%, 30% { opacity: 0; transform: translateY(4px); }
        55%, 100% { opacity: 1; transform: translateY(0); }
      }
      @keyframes caseScanSweep {
        0%   { transform: translateY(0); opacity: 1; }
        92%  { transform: translateY(220px); opacity: 1; }
        100% { transform: translateY(220px); opacity: 0; }
      }
      @keyframes caseBoxPop {
        0%, 60% { opacity: 0; transform: scale(0.85); }
        72%, 100% { opacity: 1; transform: scale(1); }
      }
      @keyframes caseLetterSlide {
        0%, 70%  { transform: translateX(120%); opacity: 0; }
        85%, 100% { transform: translateX(0); opacity: 1; }
      }
      @keyframes caseHeatPulse {
        0%, 100% { opacity: var(--cell-base, 0.18); }
        50%      { opacity: var(--cell-peak, 0.85); }
      }
      @keyframes caseTrendDraw {
        0%   { stroke-dashoffset: 500; }
        70%, 100% { stroke-dashoffset: 0; }
      }
      @keyframes caseSpark {
        0%, 95% { opacity: 0; r: 3; }
        97%     { opacity: 1; r: 5; }
        100%    { opacity: 0; r: 3; }
      }
      @keyframes caseSqlTableRow {
        0%, 20% { opacity: 0; transform: translateX(-8px); }
        40%, 100% { opacity: 1; transform: translateX(0); }
      }
      @keyframes caseChartGrow {
        0%, 60% { transform: scaleY(0); }
        80%, 100% { transform: scaleY(1); }
      }
      @keyframes caseCursorBlink {
        0%, 49% { opacity: 1; }
        50%, 100% { opacity: 0; }
      }
      @keyframes caseRotateSlow { to { transform: rotate(360deg); } }
    `}</style>
  );
}

// ============================================================================
// 1) ARCHITECTURE — Project management + AI doc generator
// ============================================================================
function AnimArchitecture() {
  const doc = useTypewriter(
    "BUILDING PERMIT — DRAFT v3\n\nRe: Lot 24/B, Tier-2 Mixed-Use\n\nIn accordance with §3.2 of the\nUrban Planning Code, the\nfollowing submission is made\non behalf of the registered\narchitect…",
    { speed: 22, pause: 2000 }
  );

  return (
    <div style={animFrame}>
      <CaseAnimationStyles />

      <div style={{
        position: "absolute", inset: "60px 18px 40px 18px",
        display: "grid", gridTemplateRows: "auto 1fr",
        gap: 12,
      }}>
        {/* Top: Gantt-like project bars */}
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {[
            { label: "DESIGN_DEV", start: 0,  width: 0.55, delay: 0,   color: "var(--site-accent, var(--flame))" },
            { label: "AUTH_SUBMIT", start: 0.35, width: 0.40, delay: 0.6, color: "rgba(245,243,238,0.55)" },
            { label: "TENDER",      start: 0.65, width: 0.30, delay: 1.2, color: "rgba(245,243,238,0.35)" },
          ].map((b, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "80px 1fr",
              gap: 8, alignItems: "center",
            }}>
              <span style={ganttLabel}>{b.label}</span>
              <div style={{ position: "relative", height: 8, background: "rgba(245,243,238,0.08)", borderRadius: 2 }}>
                <div style={{
                  position: "absolute",
                  left: `${b.start * 100}%`,
                  width: `${b.width * 100}%`,
                  top: 0, bottom: 0,
                  background: b.color,
                  borderRadius: 2,
                  transformOrigin: "left",
                  animation: `caseGanttFill 4s cubic-bezier(0.65,0,0.35,1) ${b.delay}s infinite`,
                }}/>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom: document being generated */}
        <div style={{
          position: "relative",
          border: "1px solid rgba(245,243,238,0.14)",
          background: "rgba(245,243,238,0.04)",
          padding: "10px 12px",
          borderRadius: 4,
          fontFamily: "var(--font-mono)",
          fontSize: 9.5, lineHeight: 1.55,
          color: "var(--n-300)",
          whiteSpace: "pre-wrap",
          overflow: "hidden",
        }}>
          {/* corner marks */}
          <span style={corner("tl")}/>
          <span style={corner("tr")}/>
          <span style={corner("bl")}/>
          <span style={corner("br")}/>

          {doc}
          <span style={{
            display: "inline-block", width: 6, height: 11,
            background: "var(--site-accent, var(--flame))",
            verticalAlign: "text-bottom", marginLeft: 1,
            animation: "caseCursorBlink 1s steps(2) infinite",
          }}/>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// 2) LAW — OCR PWA + auto-drafted legal letters
// ============================================================================
function AnimLaw() {
  // Bounding boxes that appear on entities mid-scan
  const boxes = [
    { x: 22, y: 56,  w: 90, h: 13, label: "PARTY_A",   delay: 0.4 },
    { x: 132, y: 56, w: 70, h: 13, label: "PARTY_B",   delay: 0.6 },
    { x: 22, y: 104, w: 54, h: 12, label: "DATE",      delay: 1.1 },
    { x: 96, y: 104, w: 78, h: 12, label: "QUANTUM",   delay: 1.3 },
    { x: 22, y: 152, w: 184, h: 12, label: "CLAUSE_4.2", delay: 1.7 },
  ];

  return (
    <div style={animFrame}>
      <CaseAnimationStyles />

      <div style={{ position: "absolute", inset: "60px 18px 40px 18px", display: "flex", gap: 12 }}>
        {/* Scanned document */}
        <div style={{
          flex: 1, position: "relative",
          background: "rgba(245,243,238,0.05)",
          border: "1px solid rgba(245,243,238,0.14)",
          borderRadius: 4,
          padding: "16px 16px",
          overflow: "hidden",
        }}>
          {/* mock document text — horizontal bars */}
          {[
            [22, 32, 80], [22, 44, 140],
            [22, 60, 90], [120, 60, 80],
            [22, 76, 180], [22, 88, 160],
            [22, 108, 60], [88, 108, 90],
            [22, 124, 170],
            [22, 152, 200], [22, 164, 180], [22, 176, 110],
          ].map(([x, y, w], i) => (
            <div key={i} style={{
              position: "absolute", left: x, top: y,
              width: w, height: 4,
              background: "rgba(245,243,238,0.22)",
              borderRadius: 1,
            }}/>
          ))}

          {/* bounding boxes that pop in */}
          {boxes.map((b, i) => (
            <div key={i} style={{
              position: "absolute", left: b.x, top: b.y,
              width: b.w, height: b.h,
              border: "1px solid var(--site-accent, var(--flame))",
              borderRadius: 2,
              animation: `caseBoxPop 4.5s cubic-bezier(0.16,1,0.3,1) ${b.delay}s infinite`,
              opacity: 0,
              transformOrigin: "left center",
            }}>
              <span style={{
                position: "absolute", top: -10, left: -1,
                fontFamily: "var(--font-mono)", fontSize: 7.5,
                letterSpacing: "0.12em",
                color: "var(--site-accent, var(--flame))",
                whiteSpace: "nowrap",
              }}>{b.label}</span>
            </div>
          ))}

          {/* scan line */}
          <div style={{
            position: "absolute", left: 0, right: 0, top: 0, height: 2,
            background: "linear-gradient(to right, transparent, var(--site-accent, var(--flame)), transparent)",
            boxShadow: "0 0 18px 2px var(--site-accent, var(--flame))",
            animation: "caseScanSweep 4.5s ease-in-out infinite",
          }}/>
        </div>

        {/* Generated letter slides in */}
        <div style={{
          width: 116, position: "relative",
          background: "var(--ink)",
          border: "1px solid rgba(245,243,238,0.28)",
          borderRadius: 4,
          padding: "12px 10px",
          fontFamily: "var(--font-mono)",
          fontSize: 7.5, lineHeight: 1.45,
          color: "var(--n-300)",
          animation: "caseLetterSlide 4.5s cubic-bezier(0.16,1,0.3,1) infinite",
          boxShadow: "-8px 0 20px -8px rgba(0,0,0,0.6)",
        }}>
          <div style={{
            fontWeight: 700, color: "var(--paper)",
            fontSize: 8.5, letterSpacing: "0.12em",
            paddingBottom: 6,
            borderBottom: "1px solid rgba(245,243,238,0.18)",
            marginBottom: 6,
          }}>
            DEMAND LETTER<br/>DRAFT v1
          </div>
          {[
            "Dear sir,",
            "",
            "Re: Matter [PARTY_A]",
            "v [PARTY_B], dated",
            "[DATE].",
            "",
            "Quantum claimed:",
            "[QUANTUM].",
            "",
            "Pursuant to",
            "[CLAUSE_4.2]…",
          ].map((ln, i) => (
            <div key={i} style={{ opacity: 0.7 + (i === 0 ? 0.3 : 0) }}>
              {ln.replace(/\[([^\]]+)\]/g, (_, x) => `‹${x}›`) || "\u00A0"}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// 3) HOUSING — Deep-learning price + ROI model
// ============================================================================
function AnimHousing() {
  // 8×5 heatmap cells with varying base/peak opacity (deterministic noise)
  const cells = [];
  for (let y = 0; y < 5; y++) {
    for (let x = 0; x < 8; x++) {
      const n = ((Math.sin(x * 12.9898 + y * 78.233) * 43758.5453) % 1 + 1) % 1;
      cells.push({ x, y,
        base: 0.10 + n * 0.18,
        peak: 0.5 + n * 0.5,
        delay: (x * 0.08 + y * 0.13) % 2,
      });
    }
  }

  // Trend line points
  const trend = "M 10 110 L 40 100 L 70 105 L 100 88 L 130 80 L 160 70 L 190 55 L 220 48 L 250 35";

  return (
    <div style={animFrame}>
      <CaseAnimationStyles />

      <div style={{ position: "absolute", inset: "60px 18px 40px 18px", display: "grid", gridTemplateRows: "1fr 1fr", gap: 12 }}>
        {/* Heatmap (district grid) */}
        <div style={{ position: "relative" }}>
          <span style={{ ...miniLabel, top: 0 }}>DISTRICT_HEAT · 24M</span>
          <div style={{
            position: "absolute", top: 14, left: 0, right: 0, bottom: 0,
            display: "grid",
            gridTemplateColumns: "repeat(8, 1fr)",
            gridTemplateRows: "repeat(5, 1fr)",
            gap: 2,
          }}>
            {cells.map((c, i) => (
              <div key={i} style={{
                background: "var(--site-accent, var(--flame))",
                "--cell-base": c.base,
                "--cell-peak": c.peak,
                animation: `caseHeatPulse 3.2s ease-in-out ${c.delay}s infinite`,
                opacity: c.base,
              }}/>
            ))}
          </div>
        </div>

        {/* Forecast chart */}
        <div style={{ position: "relative" }}>
          <span style={{ ...miniLabel, top: 0 }}>FORECAST · ROI 5Y</span>
          <svg viewBox="0 0 260 130" style={{
            position: "absolute", top: 14, left: 0, width: "100%", height: "calc(100% - 14px)",
          }}>
            {/* grid lines */}
            {[30, 60, 90, 120].map((y) => (
              <line key={y} x1="10" x2="250" y1={y} y2={y}
                stroke="rgba(245,243,238,0.10)" strokeWidth="1" strokeDasharray="2 3"/>
            ))}
            {/* axis */}
            <line x1="10" x2="10" y1="20" y2="120" stroke="rgba(245,243,238,0.3)" strokeWidth="1"/>
            <line x1="10" x2="250" y1="120" y2="120" stroke="rgba(245,243,238,0.3)" strokeWidth="1"/>

            {/* confidence band */}
            <path d="M 10 115 L 40 105 L 70 110 L 100 92 L 130 84 L 160 74 L 190 58 L 220 50 L 250 38 L 250 50 L 220 62 L 190 70 L 160 86 L 130 96 L 100 104 L 70 120 L 40 116 L 10 125 Z"
              fill="var(--site-accent, var(--flame))" fillOpacity="0.10"/>

            {/* trend line */}
            <path d={trend}
              fill="none"
              stroke="var(--site-accent, var(--flame))"
              strokeWidth="1.5"
              strokeDasharray="500"
              style={{ animation: "caseTrendDraw 3.5s ease-out infinite" }}/>

            {/* data points */}
            {[[40,100],[70,105],[100,88],[130,80],[160,70],[190,55],[220,48],[250,35]].map(([x, y], i) => (
              <circle key={i} cx={x} cy={y} r="2"
                fill="var(--paper)" />
            ))}
            {/* final spark */}
            <circle cx="250" cy="35" r="3" fill="var(--site-accent, var(--flame))"
              style={{ animation: "caseSpark 3.5s ease-in-out infinite" }}/>
          </svg>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// 4) ACCOUNTING — SQL + AI ledger query layer
// ============================================================================
function AnimAccounting() {
  const sql = useTypewriter(
    "SELECT client_id, margin,\n       trend(margin, 4q) AS Δ\nFROM   ledger.fact_revenue\nWHERE  fiscal_year = 2026\n  AND  Δ < 0\nORDER  BY Δ ASC\nLIMIT  6;",
    { speed: 24, pause: 1800 }
  );

  const rows = [
    { id: "C-0418", margin: "31.2%", delta: "−5.4 pp", color: "#FF6B6B" },
    { id: "C-1192", margin: "27.8%", delta: "−4.1 pp", color: "#FF6B6B" },
    { id: "C-0273", margin: "22.4%", delta: "−2.7 pp", color: "#FF9F43" },
    { id: "C-0950", margin: "19.6%", delta: "−1.9 pp", color: "#FF9F43" },
  ];

  return (
    <div style={animFrame}>
      <CaseAnimationStyles />

      <div style={{ position: "absolute", inset: "60px 18px 40px 18px", display: "grid", gridTemplateRows: "auto 1fr", gap: 10 }}>
        {/* SQL query */}
        <div style={{
          background: "rgba(245,243,238,0.04)",
          border: "1px solid rgba(245,243,238,0.14)",
          borderRadius: 4,
          padding: "8px 10px",
          fontFamily: "var(--font-mono)",
          fontSize: 9, lineHeight: 1.45,
          color: "var(--n-300)",
          whiteSpace: "pre-wrap",
          maxHeight: 110, overflow: "hidden",
        }}>
          {sql.split(/(\bSELECT\b|\bFROM\b|\bWHERE\b|\bAND\b|\bORDER\b|\bBY\b|\bASC\b|\bLIMIT\b|\bAS\b)/).map((seg, i) => (
            /SELECT|FROM|WHERE|AND|ORDER|BY|ASC|LIMIT|AS/.test(seg)
              ? <span key={i} style={{ color: "var(--site-accent, var(--flame))" }}>{seg}</span>
              : <span key={i}>{seg}</span>
          ))}
          <span style={{
            display: "inline-block", width: 5, height: 9,
            background: "var(--site-accent, var(--flame))",
            verticalAlign: "text-bottom", marginLeft: 1,
            animation: "caseCursorBlink 1s steps(2) infinite",
          }}/>
        </div>

        {/* Results table */}
        <div style={{ position: "relative" }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr 1.1fr",
            fontFamily: "var(--font-mono)", fontSize: 9,
            letterSpacing: "0.08em",
            color: "var(--n-400)",
            paddingBottom: 4,
            borderBottom: "1px solid rgba(245,243,238,0.18)",
            marginBottom: 4,
          }}>
            <span>CLIENT</span>
            <span>MARGIN</span>
            <span style={{ textAlign: "right" }}>Δ 4Q</span>
          </div>
          {rows.map((r, i) => (
            <div key={r.id} style={{
              display: "grid",
              gridTemplateColumns: "1.1fr 1fr 1.1fr",
              fontFamily: "var(--font-mono)", fontSize: 10,
              color: "var(--paper)",
              padding: "3px 0",
              borderBottom: "1px dashed rgba(245,243,238,0.10)",
              opacity: 0,
              animation: `caseSqlTableRow 4s cubic-bezier(0.16,1,0.3,1) ${0.8 + i * 0.18}s infinite`,
            }}>
              <span>{r.id}</span>
              <span>{r.margin}</span>
              <span style={{ textAlign: "right", color: r.color }}>{r.delta}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// 5) HEALTHCARE — Paper records → AI-queryable EMR
// ============================================================================
function AnimHealthcare() {
  const query = useTypewriter(
    "diabetic patients on metformin > 5y\nwith HbA1c trending > 8…",
    { speed: 28, pause: 1800 }
  );

  // Timeline events along a horizontal axis
  const events = [
    { x: 14,  y: 14, kind: "Rx",  label: "metformin 500mg",  delay: 0.2, color: "var(--site-accent, var(--flame))" },
    { x: 60,  y: 38, kind: "LAB", label: "HbA1c 7.4",        delay: 0.5, color: "rgba(245,243,238,0.7)" },
    { x: 102, y: 22, kind: "VIS", label: "follow-up",        delay: 0.8, color: "rgba(245,243,238,0.6)" },
    { x: 148, y: 42, kind: "LAB", label: "HbA1c 7.9",        delay: 1.1, color: "rgba(245,243,238,0.7)" },
    { x: 190, y: 12, kind: "DX",  label: "neuropathy +",     delay: 1.4, color: "var(--site-accent, var(--flame))" },
    { x: 232, y: 36, kind: "LAB", label: "HbA1c 8.4",        delay: 1.7, color: "#FF6B6B" },
  ];

  // Result cohort
  const results = [
    { id: "P-08412", hba1c: "8.4", years: "7", flag: "↑" },
    { id: "P-04129", hba1c: "8.7", years: "9", flag: "↑↑" },
    { id: "P-11203", hba1c: "8.1", years: "6", flag: "↑" },
  ];

  return (
    <div style={animFrame}>
      <CaseAnimationStyles />

      <div style={{ position: "absolute", inset: "60px 18px 40px 18px", display: "grid", gridTemplateRows: "auto auto 1fr", gap: 10 }}>
        {/* Patient timeline */}
        <div style={{ position: "relative", height: 70 }}>
          <span style={{ ...miniLabel, top: 0 }}>PATIENT P-08412 · 24 MONTHS</span>
          <div style={{ position: "absolute", top: 18, left: 0, right: 0, bottom: 0 }}>
            {/* axis */}
            <div style={{
              position: "absolute", left: 0, right: 0, top: 26,
              height: 1, background: "rgba(245,243,238,0.18)",
            }}/>
            {/* tick months */}
            {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
              <div key={i} style={{
                position: "absolute", left: `${t * 100}%`, top: 22,
                width: 1, height: 9, background: "rgba(245,243,238,0.25)",
              }}/>
            ))}
            {/* events */}
            {events.map((e, i) => (
              <div key={i} style={{
                position: "absolute",
                left: `${(e.x / 260) * 100}%`,
                top: 16,
                opacity: 0,
                animation: `caseFadeIn 4s cubic-bezier(0.16,1,0.3,1) ${e.delay}s infinite`,
              }}>
                <div style={{
                  width: 8, height: 8, borderRadius: 8,
                  background: e.color,
                  boxShadow: `0 0 6px ${e.color}`,
                  transform: "translateX(-4px)",
                  marginBottom: 4,
                }}/>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 7.5,
                  letterSpacing: "0.08em",
                  color: "var(--n-300)",
                  display: "block",
                  transform: "translateX(-4px)",
                  whiteSpace: "nowrap",
                }}>{e.kind}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Query box */}
        <div style={{
          background: "rgba(245,243,238,0.04)",
          border: "1px solid rgba(245,243,238,0.14)",
          borderRadius: 4,
          padding: "8px 10px",
          fontFamily: "var(--font-mono)",
          fontSize: 9.5, lineHeight: 1.45,
          color: "var(--n-300)",
          whiteSpace: "pre-wrap",
        }}>
          <span style={{ color: "var(--site-accent, var(--flame))", marginRight: 8 }}>{">"}</span>
          {query}
          <span style={{
            display: "inline-block", width: 5, height: 9,
            background: "var(--site-accent, var(--flame))",
            verticalAlign: "text-bottom", marginLeft: 1,
            animation: "caseCursorBlink 1s steps(2) infinite",
          }}/>
        </div>

        {/* Result cohort */}
        <div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 0.8fr 0.6fr 0.6fr",
            fontFamily: "var(--font-mono)", fontSize: 9,
            letterSpacing: "0.08em",
            color: "var(--n-400)",
            paddingBottom: 4,
            borderBottom: "1px solid rgba(245,243,238,0.18)",
            marginBottom: 4,
          }}>
            <span>PATIENT_ID</span>
            <span>HbA1c</span>
            <span>YRS</span>
            <span style={{ textAlign: "right" }}>TREND</span>
          </div>
          {results.map((r, i) => (
            <div key={r.id} style={{
              display: "grid",
              gridTemplateColumns: "1.2fr 0.8fr 0.6fr 0.6fr",
              fontFamily: "var(--font-mono)", fontSize: 10,
              color: "var(--paper)",
              padding: "2px 0",
              borderBottom: "1px dashed rgba(245,243,238,0.10)",
              opacity: 0,
              animation: `caseSqlTableRow 4s cubic-bezier(0.16,1,0.3,1) ${1.6 + i * 0.18}s infinite`,
            }}>
              <span>{r.id}</span>
              <span>{r.hba1c}</span>
              <span>{r.years}</span>
              <span style={{ textAlign: "right", color: "#FF6B6B" }}>{r.flag}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// 6) INSURANCE — Claims pipeline (CV + fraud + routing)
// ============================================================================
function AnimInsurance() {
  // Damage boxes on a mock photo
  const damageBoxes = [
    { x: 24, y: 20, w: 38, h: 24, severity: "H", color: "#FF6B6B", delay: 0.3 },
    { x: 78, y: 38, w: 30, h: 18, severity: "M", color: "#FF9F43", delay: 0.6 },
    { x: 124, y: 26, w: 24, h: 20, severity: "L", color: "#6BE39A", delay: 0.9 },
  ];

  // Pipeline stages
  const stages = ["FILED", "CV_SCORE", "FRAUD_CHK", "ROUTED", "RESERVED"];

  return (
    <div style={animFrame}>
      <CaseAnimationStyles />

      <div style={{ position: "absolute", inset: "60px 18px 40px 18px", display: "grid", gridTemplateRows: "44px 1fr auto", gap: 12 }}>
        {/* Pipeline stages */}
        <div style={{ position: "relative", height: 44 }}>
          <span style={{ ...miniLabel, top: 0 }}>CLAIM #C-2026-0418</span>
          <div style={{
            position: "absolute", top: 14, left: 0, right: 0,
            display: "grid",
            gridTemplateColumns: "repeat(5, 1fr)",
            gap: 4,
          }}>
            {stages.map((s, i) => (
              <div key={i} style={{
                fontFamily: "var(--font-mono)", fontSize: 7.5,
                letterSpacing: "0.10em",
                textAlign: "center",
                padding: "5px 3px",
                border: "1px solid rgba(245,243,238,0.14)",
                borderRadius: 2,
                color: "var(--n-300)",
                background: "rgba(245,243,238,0.03)",
                position: "relative",
                animation: `caseFadeIn 5s cubic-bezier(0.16,1,0.3,1) ${0.3 + i * 0.5}s infinite`,
                opacity: 0,
              }}>
                {s}
              </div>
            ))}
            {/* progress line through stages */}
            <div aria-hidden="true" style={{
              position: "absolute", left: "10%", right: "10%", top: "50%",
              height: 1, background: "rgba(245,243,238,0.12)",
              transform: "translateY(-0.5px)", zIndex: -1,
            }}/>
          </div>
        </div>

        {/* Damage photo with CV bounding boxes */}
        <div style={{
          position: "relative",
          background: "linear-gradient(135deg, rgba(245,243,238,0.08), rgba(245,243,238,0.02))",
          border: "1px solid rgba(245,243,238,0.18)",
          borderRadius: 4,
          overflow: "hidden",
        }}>
          {/* mock vehicle silhouette */}
          <svg viewBox="0 0 180 90" style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            opacity: 0.45,
          }} fill="none" stroke="rgba(245,243,238,0.5)" strokeWidth="1">
            <path d="M 14 60 L 30 38 L 62 36 L 78 26 L 124 26 L 140 38 L 168 40 L 168 60 L 156 60 A 8 8 0 0 0 140 60 L 50 60 A 8 8 0 0 0 34 60 L 14 60 Z"/>
            <circle cx="42" cy="62" r="7"/>
            <circle cx="148" cy="62" r="7"/>
            <path d="M 78 30 L 78 36 M 100 28 L 100 36 M 122 30 L 122 36"/>
            <path d="M 32 40 L 38 40 M 30 47 L 38 47"/>
          </svg>
          {/* damage boxes */}
          {damageBoxes.map((b, i) => (
            <div key={i} style={{
              position: "absolute", left: b.x, top: b.y,
              width: b.w, height: b.h,
              border: `1.5px solid ${b.color}`,
              borderRadius: 2,
              opacity: 0,
              animation: `caseBoxPop 5s cubic-bezier(0.16,1,0.3,1) ${b.delay + 1}s infinite`,
              transformOrigin: "center",
            }}>
              <span style={{
                position: "absolute", top: -9, left: -1,
                fontFamily: "var(--font-mono)", fontSize: 7.5,
                letterSpacing: "0.12em",
                color: b.color,
                background: "var(--ink)",
                padding: "0 3px",
                whiteSpace: "nowrap",
              }}>SEV_{b.severity}</span>
            </div>
          ))}
          {/* scan reticle in corner */}
          <span style={{
            position: "absolute", top: 6, right: 8,
            fontFamily: "var(--font-mono)", fontSize: 7.5,
            letterSpacing: "0.14em",
            color: "var(--site-accent, var(--flame))",
            display: "inline-flex", alignItems: "center", gap: 4,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 6,
              background: "var(--site-accent, var(--flame))",
              boxShadow: "0 0 6px var(--site-accent, var(--flame))",
            }}/>
            CV.V4 · 96.4%
          </span>
        </div>

        {/* AI scores */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          gap: 6,
        }}>
          {[
            { label: "DAMAGE", value: "S/HIGH",   color: "#FF6B6B", delay: 1.6 },
            { label: "FRAUD",  value: "0.04",     color: "#6BE39A", delay: 1.9 },
            { label: "RESERVE",value: "$12,400",  color: "var(--paper)", delay: 2.2 },
          ].map((s, i) => (
            <div key={i} style={{
              padding: "6px 8px",
              border: "1px solid rgba(245,243,238,0.14)",
              borderRadius: 3,
              background: "rgba(245,243,238,0.03)",
              opacity: 0,
              animation: `caseFadeIn 5s cubic-bezier(0.16,1,0.3,1) ${s.delay}s infinite`,
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 7.5,
                letterSpacing: "0.16em",
                color: "var(--n-500)",
              }}>{s.label}</div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 13,
                color: s.color,
                marginTop: 2,
              }}>{s.value}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- styles shared by all animations ------------------------------------

const animFrame = {
  position: "absolute", inset: 0,
  background: "var(--ink)",
  overflow: "hidden",
};

const animLabel = {
  position: "absolute", left: 18, right: 18, top: 18,
  display: "flex", justifyContent: "space-between", alignItems: "center",
  fontFamily: "var(--font-mono)", fontSize: 9.5,
  letterSpacing: "0.16em", color: "var(--n-400)",
  textTransform: "uppercase",
  pointerEvents: "none",
};

const animLive = {
  display: "inline-flex", alignItems: "center", gap: 5,
  color: "var(--site-accent, var(--flame))",
};

const animLiveDot = {
  display: "inline-block", width: 6, height: 6, borderRadius: 6,
  background: "var(--site-accent, var(--flame))",
  boxShadow: "0 0 6px var(--site-accent, var(--flame))",
};

const animFootline = {
  position: "absolute", left: 18, right: 18, bottom: 14,
  display: "flex", justifyContent: "space-between",
  fontFamily: "var(--font-mono)", fontSize: 9.5,
  letterSpacing: "0.16em", color: "var(--n-400)",
  textTransform: "uppercase",
  pointerEvents: "none",
};

const ganttLabel = {
  fontFamily: "var(--font-mono)", fontSize: 8.5,
  letterSpacing: "0.12em",
  color: "var(--n-400)",
  textTransform: "uppercase",
};

const miniLabel = {
  position: "absolute", left: 0,
  fontFamily: "var(--font-mono)", fontSize: 8,
  letterSpacing: "0.16em",
  color: "var(--n-500)",
  textTransform: "uppercase",
};

const corner = (which) => {
  const sz = 8;
  const c = "rgba(245,243,238,0.4)";
  const base = { position: "absolute", width: sz, height: sz, pointerEvents: "none" };
  if (which === "tl") return { ...base, top: 0, left: 0, borderTop: `1px solid ${c}`, borderLeft: `1px solid ${c}` };
  if (which === "tr") return { ...base, top: 0, right: 0, borderTop: `1px solid ${c}`, borderRight: `1px solid ${c}` };
  if (which === "bl") return { ...base, bottom: 0, left: 0, borderBottom: `1px solid ${c}`, borderLeft: `1px solid ${c}` };
  return { ...base, bottom: 0, right: 0, borderBottom: `1px solid ${c}`, borderRight: `1px solid ${c}` };
};

Object.assign(window, {
  AnimArchitecture, AnimLaw, AnimHousing, AnimAccounting,
  AnimHealthcare, AnimInsurance,
});