// heroscenes.jsx - realistic animated hero vignettes that PARADE across the hero
// Each peril rolls in from the right, plays, then rolls off to the left as the next floats in.
// scenes: motor crash · house fire · cargo damage · claim payout
// Controlled via tweaks/admin (off | auto | motor | house | cargo | claim)
const { useState: useStateHS, useEffect: useEffectHS } = React;

const HERO_SCENE_STYLE = `
.vc-scene-layer { position:absolute; inset:0; will-change:transform,opacity; }
.vc-scene svg { width:100%; height:100%; display:block; }
.vc-wheel { transform-box: fill-box; transform-origin: center; animation: vc-wheel-spin .5s linear infinite; }
@keyframes vc-wheel-spin { to { transform: rotate(360deg); } }

/* ---- MOTOR ---- */
@keyframes vc-road-dash { to { stroke-dashoffset: -160; } }
@keyframes vc-carL {
  0%{transform:translateX(-720px);opacity:1} 33%{transform:translateX(-160px)}
  40%{transform:translateX(-88px)} 41.5%{transform:translateX(-74px)}
  44%{transform:translateX(-110px)} 48%{transform:translateX(-100px)}
  88%{transform:translateX(-100px);opacity:1} 94%{transform:translateX(-100px);opacity:0}
  100%{transform:translateX(-720px);opacity:0}
}
@keyframes vc-carR {
  0%{transform:translateX(720px);opacity:1} 33%{transform:translateX(160px)}
  40%{transform:translateX(88px)} 41.5%{transform:translateX(74px)}
  44%{transform:translateX(110px)} 48%{transform:translateX(100px)}
  88%{transform:translateX(100px);opacity:1} 94%{transform:translateX(100px);opacity:0}
  100%{transform:translateX(720px);opacity:0}
}
@keyframes vc-shake {
  0%,39.9%{transform:translate(0,0)} 40.5%{transform:translate(-3px,1.5px)} 41.5%{transform:translate(3px,-2px)}
  42.5%{transform:translate(-2px,1px)} 43.5%{transform:translate(2px,-1px)} 44.5%{transform:translate(-1px,.5px)} 46%,100%{transform:translate(0,0)}
}
@keyframes vc-flash { 0%,39.5%{opacity:0;transform:scale(0)} 41%{opacity:.45;transform:scale(.8)} 50%{opacity:0;transform:scale(1.2)} 100%{opacity:0} }
@keyframes vc-damage { 0%,40%{opacity:0} 43%{opacity:1} 88%{opacity:1} 94%,100%{opacity:0} }
@keyframes vc-shard { 0%,40%{opacity:0;transform:translate(0,0) rotate(0)} 42%{opacity:1} 60%{opacity:1;transform:translate(var(--sx),var(--sy)) rotate(var(--sr))} 88%{opacity:1;transform:translate(var(--sx),var(--sy)) rotate(var(--sr))} 94%,100%{opacity:0} }
.vc-carL{ animation: vc-carL 7s cubic-bezier(.45,0,.3,1) infinite; transform-box:fill-box; }
.vc-carR{ animation: vc-carR 7s cubic-bezier(.45,0,.3,1) infinite; transform-box:fill-box; }
.vc-shake{ animation: vc-shake 7s linear infinite; transform-box:fill-box; }
.vc-flash{ animation: vc-flash 7s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.vc-damage{ animation: vc-damage 7s var(--ease) infinite; }
.vc-shard{ animation: vc-shard 7s ease-out infinite; transform-box:fill-box; transform-origin:center; }

/* ---- shared smoke/steam ---- */
@keyframes vc-smoke { 0%{transform:translateY(0) translateX(0) scale(.4);opacity:0} 18%{opacity:.7} 100%{transform:translateY(-180px) translateX(40px) scale(2.1);opacity:0} }
.vc-smoke{ transform-box:fill-box; transform-origin:center bottom; }
.vc-smoke.s1{ animation: vc-smoke 3.4s ease-out infinite; }
.vc-smoke.s2{ animation: vc-smoke 4.0s ease-out infinite .7s; }
.vc-smoke.s3{ animation: vc-smoke 3.6s ease-out infinite 1.4s; }
.vc-smoke.s4{ animation: vc-smoke 4.3s ease-out infinite 2.1s; }
.vc-smoke.s5{ animation: vc-smoke 3.8s ease-out infinite 2.8s; }

/* ---- FIRE ---- */
@keyframes vc-flame { 0%,100%{transform:scaleY(.84) scaleX(1.06);opacity:.92} 50%{transform:scaleY(1.18) scaleX(.92);opacity:1} }
@keyframes vc-sway { 0%,100%{transform:translateX(-2px) skewX(-2deg)} 50%{transform:translateX(3px) skewX(3deg)} }
@keyframes vc-ember { 0%{transform:translate(0,0) scale(1);opacity:0} 12%{opacity:1} 100%{transform:translate(var(--ex),-150px) scale(.2);opacity:0} }
@keyframes vc-winglow { 0%,100%{opacity:.5} 30%{opacity:.85} 55%{opacity:.65} 75%{opacity:.9} }
@keyframes vc-glow { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.8;transform:scale(1.08)} }
.vc-flame{ transform-box:fill-box; transform-origin:center bottom; }
.vc-flame.f1{ animation: vc-flame .42s ease-in-out infinite; }
.vc-flame.f2{ animation: vc-flame .54s ease-in-out infinite .1s; }
.vc-flame.f3{ animation: vc-flame .36s ease-in-out infinite .2s; }
.vc-flame.f4{ animation: vc-flame .48s ease-in-out infinite .3s; }
.vc-swaywrap{ transform-box:fill-box; transform-origin:center bottom; animation: vc-sway 2.4s ease-in-out infinite; }
.vc-ember{ transform-box:fill-box; animation: vc-ember linear infinite; }
.vc-winglow{ animation: vc-winglow 1.4s ease-in-out infinite; }
.vc-glow{ transform-box:fill-box; transform-origin:center; animation: vc-glow 1.7s ease-in-out infinite; }

/* ---- CARGO ---- */
@keyframes vc-tip { 0%{transform:rotate(0) translateY(-4px)} 16%{transform:rotate(-9deg) translateY(0)} 24%{transform:rotate(-6deg)} 32%{transform:rotate(-8deg)} 100%{transform:rotate(-8deg)} }
@keyframes vc-spill { 0%,14%{opacity:0;transform:translate(0,0) rotate(0)} 20%{opacity:1} 46%{transform:translate(var(--tx),var(--ty)) rotate(var(--tr))} 86%{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(var(--tr))} 95%,100%{opacity:0} }
@keyframes vc-dust { 0%,16%{opacity:0;transform:scale(.3)} 26%{opacity:.55;transform:scale(1)} 60%{opacity:0;transform:scale(1.8)} 100%{opacity:0} }
.vc-tip{ transform-box:fill-box; transform-origin:center bottom; animation: vc-tip 7s cubic-bezier(.4,0,.3,1) infinite; }
.vc-spill{ transform-box:fill-box; transform-origin:center; animation: vc-spill 7s cubic-bezier(.4,0,.4,1) infinite; }
.vc-dust{ transform-box:fill-box; transform-origin:center bottom; animation: vc-dust 7s ease-out infinite; }

/* ---- CLAIM ---- */
@keyframes vc-claim-b1 { 0%,6%{opacity:0;transform:translateY(12px) scale(.85)} 14%,84%{opacity:1;transform:none} 92%,100%{opacity:0} }
@keyframes vc-claim-b2 { 0%,22%{opacity:0;transform:translateY(12px) scale(.85)} 30%,84%{opacity:1;transform:none} 92%,100%{opacity:0} }
@keyframes vc-scan { 0%,14%{transform:translateY(-22px);opacity:0} 18%{opacity:1} 30%{transform:translateY(20px);opacity:1} 34%{opacity:0} 100%{opacity:0} }
@keyframes vc-claim-seal { 0%,54%{opacity:0;transform:scale(.4) rotate(-14deg)} 64%{opacity:1;transform:scale(1.14) rotate(0)} 70%{transform:scale(1)} 86%{opacity:1} 94%,100%{opacity:0} }
@keyframes vc-note { 0%,52%{opacity:0;transform:translateY(0) rotate(var(--nr))} 60%{opacity:.85} 100%{opacity:0;transform:translateY(-130px) rotate(var(--nr2))} }
@keyframes vc-phone-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.vc-phone{ animation: vc-phone-float 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.vc-cb1{ animation: vc-claim-b1 7s var(--ease) infinite; transform-box:fill-box; transform-origin:left center; }
.vc-cb2{ animation: vc-claim-b2 7s var(--ease) infinite; transform-box:fill-box; transform-origin:right center; }
.vc-scan{ animation: vc-scan 7s ease-in-out infinite; transform-box:fill-box; }
.vc-seal{ animation: vc-claim-seal 7s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
.vc-note{ transform-box:fill-box; animation: vc-note 4s ease-out infinite; }

@media (prefers-reduced-motion: reduce){
  .vc-scene-layer *{ animation: none !important; }
  .vc-carL{ transform: translateX(-100px); } .vc-carR{ transform: translateX(100px); }
  .vc-damage,.vc-seal,.vc-cb1,.vc-cb2,.vc-spill{ opacity:1 !important; }
  .vc-tip{ transform: rotate(-8deg) !important; }
  .vc-flash{ opacity:0 !important; }
}
`;

/* ================= MOTOR ================= */
function CarDrawing({ body, bodyDark, roof, glass, plate }) {
  return (
    <g>
      <ellipse cx="0" cy="50" rx="98" ry="9" fill="#000" opacity="0.18" />
      <path d="M-92 22 C-92 10 -86 4 -74 2 L-56 0 C-48 -20 -34 -29 -10 -30 L22 -30 C46 -30 58 -20 66 -4 L82 0 C92 2 96 9 96 22 L94 32 C94 38 88 40 80 40 L-82 40 C-90 40 -92 30 -92 22 Z" fill={bodyDark} />
      <path d="M-92 20 C-92 8 -86 2 -74 0 L-56 -2 C-48 -22 -34 -31 -10 -32 L22 -32 C46 -32 58 -22 66 -6 L82 -2 C92 0 96 7 96 20 L95 26 L-91 26 Z" fill={body} />
      <path d="M-52 -4 C-45 -22 -33 -29 -12 -30 L20 -30 C40 -30 50 -22 58 -8 Z" fill={roof} opacity="0.55" />
      <path d="M-48 -4 C-42 -19 -32 -25 -14 -26 L-5 -26 L-5 -4 Z" fill={glass} />
      <path d="M3 -26 L16 -26 C36 -26 46 -19 52 -4 L3 -4 Z" fill={glass} />
      <path d="M-48 -4 C-42 -19 -32 -25 -14 -26 L-5 -26 L-5 -4 Z" fill="#fff" opacity="0.12" />
      <line x1="-58" y1="-2" x2="78" y2="-2" stroke="#000" strokeWidth="1.4" opacity="0.18" />
      <line x1="-2" y1="-2" x2="-2" y2="22" stroke="#000" strokeWidth="1.4" opacity="0.18" />
      <rect x="-26" y="2" width="12" height="3.4" rx="1.7" fill="#000" opacity="0.28" />
      <ellipse className="vc-glow" cx="90" cy="8" rx="7" ry="9" fill="#fff7d6" />
      <ellipse cx="90" cy="8" rx="4.5" ry="6.5" fill="#fffef2" />
      <rect x="-92" y="2" width="6" height="13" rx="2.5" fill="#e0392b" />
      <rect x="78" y="16" width="18" height="9" rx="3" fill={bodyDark} />
      <rect x="-90" y="15" width="16" height="9" rx="1.5" fill="#e9ecf5" /><text x="-82" y="22" fontSize="6" fontFamily="monospace" fill="#222" textAnchor="middle">{plate}</text>
      <g transform="translate(-52,30)"><circle r="18" fill="#15172e" /><circle r="17" fill="none" stroke="#2a2d44" strokeWidth="3" /><g className="vc-wheel"><circle r="9" fill="#3a3f55" /><circle r="3" fill="#1b1d30" /><g stroke="#9aa0bf" strokeWidth="1.6">{[0,60,120].map(a=><line key={a} x1="0" y1="-8" x2="0" y2="8" transform={`rotate(${a})`} />)}</g></g></g>
      <g transform="translate(58,30)"><circle r="18" fill="#15172e" /><circle r="17" fill="none" stroke="#2a2d44" strokeWidth="3" /><g className="vc-wheel"><circle r="9" fill="#3a3f55" /><circle r="3" fill="#1b1d30" /><g stroke="#9aa0bf" strokeWidth="1.6">{[0,60,120].map(a=><line key={a} x1="0" y1="-8" x2="0" y2="8" transform={`rotate(${a})`} />)}</g></g></g>
      <g className="vc-damage">
        <path d="M40 -6 L52 -19 L60 -7 L72 -17 L82 -3 L70 0 L58 -4 Z" fill={bodyDark} stroke="#0c0e20" strokeWidth="1.6" strokeLinejoin="round" />
        <path d="M64 -4 L74 2 L66 8 L78 12 L68 20" fill="none" stroke="#0c0e20" strokeWidth="2" strokeLinecap="round" opacity="0.55" />
        <path d="M78 -2 C90 0 96 8 96 20 L82 22 C80 8 78 2 70 0 Z" fill="#000" opacity="0.28" />
        <ellipse cx="90" cy="8" rx="7" ry="9" fill="#3a2a1a" />
        <path d="M86 2 L92 8 L87 12 M90 1 L90 15" stroke="#cdd2e6" strokeWidth="1" opacity="0.7" />
        {[["-44","-30","120","amber"],["-30","-44","-80","glass"],["-14","-50","40","amber"],["8","-40","200","glass"],["-52","-18","-140","glass"]].map((s,i)=>(
          <rect key={i} className="vc-shard" x={88} y={6} width={i%2?5:7} height={i%2?5:3} rx="1"
            fill={s[3]==="amber"?"#f4a82a":"#cfd6ec"} style={{["--sx"]:s[0]+"px",["--sy"]:s[1]+"px",["--sr"]:s[2]+"deg"}} />
        ))}
        <rect className="vc-glow" x="82" y="0" width="7" height="5" rx="2" fill="#f4a82a" />
      </g>
    </g>
  );
}

function SceneMotor() {
  return (
    <svg viewBox="0 0 1200 460" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <radialGradient id="vcFlash" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stopColor="#fff" /><stop offset="0.4" stopColor="#ffe39a" /><stop offset="1" stopColor="#f4a82a" stopOpacity="0" /></radialGradient>
      </defs>
      <rect x="0" y="296" width="1200" height="120" fill="var(--text)" opacity="0.05" />
      <line x1="0" y1="296" x2="1200" y2="296" stroke="var(--border-strong)" strokeWidth="2.5" opacity="0.5" />
      <line x1="0" y1="330" x2="1200" y2="330" stroke="var(--accent)" strokeWidth="4" strokeDasharray="46 34" strokeLinecap="round" style={{ animation: "vc-road-dash 1s linear infinite" }} opacity="0.35" />
      <g transform="translate(600,268)">
        <g className="vc-damage" opacity="0.6">
          <path d="M-150 30 Q-120 28 -96 30" stroke="#111" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.4" />
          <path d="M150 30 Q120 28 96 30" stroke="#111" strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.4" />
        </g>
        <g className="vc-shake">
          <g className="vc-carL"><CarDrawing body="var(--accent)" bodyDark="var(--accent-ink)" roof="#c9bcff" glass="#1a1f3a" plate="LAG" /></g>
          <g className="vc-carR"><g transform="scale(-1,1)"><CarDrawing body="#475569" bodyDark="#2c3445" roof="#aeb6c6" glass="#161b2e" plate="VC" /></g></g>
          <g className="vc-flash">
            <circle r="46" fill="url(#vcFlash)" />
            {[0,40,72,110,145,180,215,250,290,325].map((a,i)=>(
              <rect key={i} x="-2.5" y="-40" width="5" height={i%2?28:18} rx="2.5" fill={i%3===0?"#fff":i%2?"#f4a82a":"#ffd27a"} transform={`rotate(${a})`} />
            ))}
          </g>
          <g className="vc-damage">
            <g fill="#8b90a6">
              <circle className="vc-smoke s1" cx="-6" cy="-18" r="16" opacity="0.5" />
              <circle className="vc-smoke s3" cx="10" cy="-20" r="20" opacity="0.5" />
              <circle className="vc-smoke s2" cx="2" cy="-14" r="13" opacity="0.5" />
              <circle className="vc-smoke s4" cx="-14" cy="-16" r="11" opacity="0.45" />
            </g>
          </g>
        </g>
      </g>
    </svg>
  );
}

/* ================= HOUSE FIRE (brand blend, small roof-corner fire) ================= */
function flameTongue(x, y, scale, cls, fill) {
  return (
    <g transform={`translate(${x},${y}) scale(${scale})`}>
      <path className={`vc-flame ${cls}`} d="M0 0 C-22 -16 -18 -46 -4 -64 C-7 -44 6 -42 4 -58 C18 -46 22 -22 12 -6 C22 -16 20 -36 15 -46 C30 -30 26 -2 0 0 Z" fill={fill} />
    </g>
  );
}

function SceneHouse() {
  return (
    <svg viewBox="0 0 1200 460" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="vcRoofG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--accent-2)" /><stop offset="1" stopColor="var(--accent)" /></linearGradient>
        <linearGradient id="vcWallG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--accent)" stopOpacity="0.20" /><stop offset="1" stopColor="var(--accent)" stopOpacity="0.10" /></linearGradient>
        <linearGradient id="vcFireG" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stopColor="#d61f1f" /><stop offset="0.45" stopColor="#f4671f" /><stop offset="0.8" stopColor="#f9a825" /><stop offset="1" stopColor="#ffe07a" /></linearGradient>
        <linearGradient id="vcFireCore" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stopColor="#f9a825" /><stop offset="1" stopColor="#fff3c0" /></linearGradient>
        <filter id="vcSmk2" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="6" /></filter>
      </defs>

      <line x1="0" y1="360" x2="1200" y2="360" stroke="var(--border-strong)" strokeWidth="2.5" opacity="0.5" />

      {/* billowing smoke from the roof corner (the only "big" motion, kept to one side) */}
      <g filter="url(#vcSmk2)" fill="#7c8398" transform="translate(690,205)">
        <circle className="vc-smoke s1" cx="0" cy="0" r="20" opacity="0.5" />
        <circle className="vc-smoke s2" cx="14" cy="0" r="26" opacity="0.5" />
        <circle className="vc-smoke s3" cx="6" cy="0" r="18" opacity="0.45" />
        <circle className="vc-smoke s4" cx="20" cy="0" r="22" opacity="0.4" />
      </g>

      <g>
        {/* ground shadow */}
        <ellipse cx="600" cy="360" rx="150" ry="12" fill="#000" opacity="0.10" />
        {/* walls */}
        <rect x="508" y="250" width="184" height="110" fill="url(#vcWallG)" stroke="var(--accent)" strokeWidth="2.5" />
        {/* gable side shade */}
        <rect x="508" y="250" width="30" height="110" fill="var(--accent)" opacity="0.10" />
        {/* roof */}
        <path d="M492 256 L600 188 L708 256 Z" fill="url(#vcRoofG)" />
        <path d="M600 188 L708 256 L676 256 L600 206 Z" fill="var(--accent-ink)" opacity="0.45" />
        {/* chimney (left, calm) */}
        <rect x="535" y="206" width="22" height="44" fill="var(--accent)" /><rect x="531" y="202" width="30" height="9" rx="2" fill="var(--accent-ink)" />
        {/* door */}
        <rect x="582" y="300" width="36" height="60" rx="3" fill="var(--accent)" />
        <rect x="582" y="300" width="36" height="60" rx="3" fill="#fff" opacity="0.08" />
        <circle cx="611" cy="332" r="2.4" fill="#fff" opacity="0.8" />
        {/* windows */}
        <g>
          <rect x="528" y="282" width="34" height="32" rx="3" fill="var(--surface)" stroke="var(--accent)" strokeWidth="2" />
          <line x1="545" y1="282" x2="545" y2="314" stroke="var(--accent)" strokeWidth="1.5" opacity="0.7" /><line x1="528" y1="298" x2="562" y2="298" stroke="var(--accent)" strokeWidth="1.5" opacity="0.7" />
          {/* right window glows from the fire */}
          <rect className="vc-winglow" x="638" y="282" width="34" height="32" rx="3" fill="url(#vcFireCore)" />
          <rect x="638" y="282" width="34" height="32" rx="3" fill="none" stroke="var(--accent)" strokeWidth="2" />
          <line x1="655" y1="282" x2="655" y2="314" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5" /><line x1="638" y1="298" x2="672" y2="298" stroke="var(--accent)" strokeWidth="1.5" opacity="0.5" />
        </g>
      </g>

      {/* warm glow behind the burning corner */}
      <ellipse className="vc-glow" cx="686" cy="250" rx="48" ry="40" fill="#ff7a18" opacity="0.35" />
      {/* small contained fire at the RIGHT roof corner */}
      <g className="vc-swaywrap" style={{ transformOrigin: "684px 248px" }}>
        {flameTongue(668, 252, 1.5, "f1", "url(#vcFireG)")}
        {flameTongue(686, 252, 2.0, "f3", "url(#vcFireG)")}
        {flameTongue(704, 252, 1.6, "f2", "url(#vcFireG)")}
        {flameTongue(688, 251, 1.25, "f4", "url(#vcFireCore)")}
      </g>
      {/* a few embers */}
      <g fill="#ffb347">
        {[["686","-30","2.4","0"],["700","20","2.9","0.6"],["672","-10","2.6","1.2"],["694","30","3.0","1.9"]].map((e,i)=>(
          <circle key={i} className="vc-ember" cx={e[0]} cy="246" r={i%2?2:2.6} style={{["--ex"]:e[1]+"px", animationDuration:e[2]+"s", animationDelay:e[3]+"s"}} />
        ))}
      </g>
    </svg>
  );
}

/* ================= CARGO DAMAGE (tipped container, spilled crates - brand blend) ================= */
function Crate({ x, y, s, tx, ty, tr, delay, cracked }) {
  return (
    <g className="vc-spill" transform={`translate(${x},${y})`} style={{ ["--tx"]: tx + "px", ["--ty"]: ty + "px", ["--tr"]: tr + "deg", animationDelay: delay + "s" }}>
      <rect x={-s/2} y={-s/2} width={s} height={s} rx="3" fill="var(--accent)" />
      <rect x={-s/2} y={-s/2} width={s} height={s} rx="3" fill="none" stroke="var(--accent-ink)" strokeWidth="2.5" />
      <path d={`M${-s/2} ${-s/2} L${s/2} ${s/2} M${s/2} ${-s/2} L${-s/2} ${s/2}`} stroke="var(--accent-ink)" strokeWidth="1.6" opacity="0.6" />
      {cracked && <path d={`M0 ${-s/2} L3 -2 L-3 4 L2 ${s/2}`} stroke="#fff" strokeWidth="1.6" fill="none" opacity="0.85" />}
    </g>
  );
}

function SceneCargo() {
  return (
    <svg viewBox="0 0 1200 460" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="vcContainerG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--accent-2)" /><stop offset="1" stopColor="var(--accent)" /></linearGradient>
      </defs>
      <line x1="0" y1="344" x2="1200" y2="344" stroke="var(--border-strong)" strokeWidth="2.5" opacity="0.5" />
      <ellipse cx="560" cy="344" rx="190" ry="13" fill="#000" opacity="0.10" />

      {/* dust puff at the point of impact */}
      <g className="vc-dust" fill="#9aa0bf" transform="translate(700,332)">
        <circle cx="0" cy="0" r="22" opacity="0.5" /><circle cx="22" cy="-6" r="16" opacity="0.45" /><circle cx="-20" cy="-4" r="14" opacity="0.4" />
      </g>

      {/* tipped shipping container */}
      <g className="vc-tip" style={{ transformOrigin: "470px 336px" }}>
        <g transform="translate(560,284)">
          {/* body */}
          <rect x="-150" y="-44" width="300" height="92" rx="6" fill="url(#vcContainerG)" />
          <rect x="-150" y="-44" width="300" height="92" rx="6" fill="#fff" opacity="0.06" />
          {/* corrugation */}
          <g stroke="var(--accent-ink)" strokeWidth="2" opacity="0.45">
            {Array.from({length:13}).map((_,i)=><line key={i} x1={-138+i*22} y1="-42" x2={-138+i*22} y2="46" />)}
          </g>
          {/* top & bottom rails */}
          <rect x="-150" y="-44" width="300" height="10" rx="4" fill="var(--accent-ink)" opacity="0.55" />
          <rect x="-150" y="38" width="300" height="10" rx="4" fill="var(--accent-ink)" opacity="0.55" />
          {/* burst doors on the right end */}
          <g>
            <path d="M150 -44 L188 -58 L188 34 L150 48 Z" fill="var(--accent)" stroke="var(--accent-ink)" strokeWidth="2" />
            <line x1="169" y1="-51" x2="169" y2="41" stroke="var(--accent-ink)" strokeWidth="2" opacity="0.6" />
            <rect x="163" y="-12" width="5" height="22" rx="2" fill="var(--accent-ink)" />
          </g>
          {/* dent / crease on the lower-right */}
          <path d="M96 18 L120 30 L104 40 L130 48" fill="none" stroke="var(--accent-ink)" strokeWidth="2.4" strokeLinecap="round" opacity="0.6" />
          {/* ID badge */}
          <rect x="-120" y="-8" width="70" height="22" rx="3" fill="var(--surface)" opacity="0.92" />
          <text x="-85" y="7" fontSize="12" fontFamily="monospace" fontWeight="700" fill="var(--accent-ink)" textAnchor="middle">VCU-7042</text>
        </g>
      </g>

      {/* spilled crates tumbling out to the right */}
      <Crate x={720} y={314} s={34} tx={26} ty={-4} tr={28} delay={0} />
      <Crate x={760} y={320} s={28} tx={54} ty={6} tr={-34} delay={0.25} cracked />
      <Crate x={732} y={284} s={24} tx={40} ty={20} tr={60} delay={0.5} />
      <Crate x={700} y={320} s={30} tx={10} ty={2} tr={-16} delay={0.15} />
      {/* a couple of loose items */}
      <g className="vc-spill" transform="translate(778,332)" style={{ ["--tx"]: "40px", ["--ty"]: "0px", ["--tr"]: "120deg", animationDelay: "0.6s" }}>
        <circle r="9" fill="var(--accent-2)" /><circle r="9" fill="none" stroke="var(--accent-ink)" strokeWidth="1.6" />
      </g>
    </svg>
  );
}

/* ================= CLAIM PAYOUT ================= */
function MiniCarDamaged() {
  return (
    <g transform="translate(0,0) scale(0.42)">
      <path d="M-70 14 C-70 4 -65 -1 -55 -3 L-40 -5 C-33 -20 -22 -27 -4 -28 L18 -28 C38 -28 48 -20 55 -7 L68 -4 C77 -2 80 4 80 14 L78 22 L-68 22 Z" fill="var(--accent)" />
      <path d="M-36 -5 C-31 -18 -22 -23 -8 -24 L-2 -24 L-2 -5 Z" fill="#1a1f3a" />
      <path d="M4 -24 L14 -24 C30 -24 38 -18 44 -5 L4 -5 Z" fill="#1a1f3a" />
      <path d="M44 -6 L54 -17 L62 -5 L72 -14 L80 -2 L66 2 Z" fill="var(--accent-ink)" stroke="#0c0e20" strokeWidth="1.6" strokeLinejoin="round" />
      <circle cx="-44" cy="22" r="13" fill="#15172e" /><circle cx="50" cy="22" r="13" fill="#15172e" />
    </g>
  );
}

function SceneClaim() {
  return (
    <svg viewBox="0 0 1200 460" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g transform="translate(600,232)">
      <g className="vc-phone">
        <rect x="-115" y="-158" width="230" height="316" rx="34" fill="var(--text)" />
        <rect x="-115" y="-158" width="230" height="316" rx="34" fill="none" stroke="var(--accent)" strokeWidth="2.5" opacity="0.5" />
        <rect x="-104" y="-134" width="208" height="276" rx="20" fill="var(--surface)" />
        <rect x="-16" y="-150" width="32" height="7" rx="3.5" fill="var(--surface-3)" />
        <circle cx="-82" cy="-112" r="14" fill="var(--accent)" />
        <path d="M-82 -120 a8 8 0 1 0 0.1 0 M-82 -120 v3.5 M-82 -107 v3.5 M-89.5 -112 h3.5 M-78 -112 h3.5" stroke="#fff" strokeWidth="1.7" fill="none" />
        <rect x="-60" y="-119" width="66" height="7" rx="3.5" fill="var(--text)" opacity="0.55" />
        <rect x="-60" y="-107" width="40" height="6" rx="3" fill="var(--success)" opacity="0.75" />
        <g className="vc-cb1">
          <rect x="-92" y="-86" width="150" height="74" rx="12" fill="var(--surface-3)" />
          <rect x="-84" y="-78" width="134" height="44" rx="7" fill="var(--bg)" />
          <g transform="translate(-17,-54)"><MiniCarDamaged /></g>
          <g className="vc-scan"><rect x="-84" y="-56" width="134" height="3" rx="1.5" fill="var(--accent)" opacity="0.9" /></g>
          <rect x="-84" y="-26" width="96" height="6" rx="3" fill="var(--text-faint)" />
          <rect x="-84" y="-16" width="60" height="6" rx="3" fill="var(--text-faint)" />
        </g>
        <g className="vc-cb2">
          <rect x="-40" y="2" width="126" height="38" rx="12" fill="var(--accent)" />
          <rect x="-28" y="11" width="98" height="6" rx="3" fill="#fff" opacity="0.9" />
          <rect x="-28" y="23" width="64" height="6" rx="3" fill="#fff" opacity="0.6" />
        </g>
        <g className="vc-seal" transform="translate(0,98)">
          <circle r="38" fill="var(--success)" />
          <circle r="38" fill="none" stroke="#fff" strokeWidth="2.5" strokeDasharray="5 6" opacity="0.6" />
          <path d="M-16 0 l11 13 20 -25" stroke="#fff" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </g>
      </g>
      </g>
      <g>
        {[["470","320","-12","6","2.4","0"],["735","330","10","-8","3.0","0.8"],["430","350","-6","8","2.7","1.5"],["770","355","8","-10","3.2","2.2"]].map((n,i)=>(
          <g key={i} className="vc-note" transform={`translate(${n[0]},${n[1]})`} style={{["--nr"]:n[2]+"deg",["--nr2"]:n[3]+"deg", animationDuration:n[4]+"s", animationDelay:n[5]+"s"}}>
            <rect x="-22" y="-13" width="44" height="26" rx="4" fill="#1f9d55" />
            <rect x="-22" y="-13" width="44" height="26" rx="4" fill="#fff" opacity="0.08" />
            <circle cx="0" cy="0" r="8" fill="none" stroke="#d6f3e2" strokeWidth="1.4" />
            <text x="0" y="4" fontSize="11" fontWeight="700" fill="#eafaf0" textAnchor="middle" fontFamily="sans-serif">₦</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

const SCENES = { motor: SceneMotor, house: SceneHouse, cargo: SceneCargo, claim: SceneClaim };
const SCENE_ORDER = ["motor", "house", "cargo", "claim"];

function HeroScene({ scene = "auto", isDark }) {
  const [idx, setIdx] = useStateHS(0);
  const isAuto = scene === "auto";

  useEffectHS(() => {
    if (!isAuto) return;
    const id = setInterval(() => setIdx((i) => (i + 1) % SCENE_ORDER.length), 11000);
    return () => clearInterval(id);
  }, [isAuto]);

  if (scene === "off") return null;

  const activeId = isAuto ? SCENE_ORDER[idx] : scene;
  const prevId = isAuto ? SCENE_ORDER[(idx - 1 + SCENE_ORDER.length) % SCENE_ORDER.length] : null;

  // parade positioning: active centered, the one just shown rolls off left, the rest wait off-right
  const layerStyle = (id) => {
    if (!isAuto) {
      return { transform: "translateX(0)", opacity: id === activeId ? 1 : 0, transition: "opacity .6s var(--ease)", pointerEvents: "none" };
    }
    if (id === activeId) return { transform: "translateX(0)", opacity: 1, transition: "transform 1.2s cubic-bezier(.45,0,.25,1), opacity .6s var(--ease)" };
    if (id === prevId) return { transform: "translateX(-124%)", opacity: 1, transition: "transform 1.2s cubic-bezier(.45,0,.25,1), opacity .8s var(--ease) .35s" };
    return { transform: "translateX(124%)", opacity: 0, transition: "none" }; // waiting off-right, snapped & invisible
  };

  return (
    <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, overflow: "hidden", pointerEvents: "none" }}>
      <style>{HERO_SCENE_STYLE}</style>
      <div className="vc-scene" style={{ position: "absolute", inset: 0, opacity: isDark ? 0.4 : 0.3, transform: "scale(0.7)", transformOrigin: "center 66%" }}>
        {SCENE_ORDER.map((id) => {
          const S = SCENES[id];
          return (
            <div key={id} className="vc-scene-layer" style={layerStyle(id)}>
              <S />
            </div>
          );
        })}
      </div>
      {/* readability scrim */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(54% 44% at 50% 22%, var(--bg) 0%, transparent 70%), linear-gradient(180deg, transparent 0%, transparent 50%, var(--bg) 88%)",
      }} />
    </div>
  );
}

window.HeroScene = HeroScene;