// Animated line-illustrated hero for Kitchen Takeovers.
// Same commercial kitchen shell (hood, counter, floor, stool) stays constant.
// The "concept takeover" swaps: the objects on the counter + signage morph
// across six F&B themes (bakery, ramen, wine, taqueria, dumplings, burgers).
// Drawn entirely in SVG with stroke-only line art, animated by cross-fading
// between <g> groups and subtle position drift.

function HiFiHero({ themeIndex = 0, palette }) {
  // themeIndex: 0 bakery, 1 ramen, 2 wine, 3 taqueria, 4 dumplings, 5 burgers

  // Shared stroke style
  const ink = palette.ink;
  const accent = palette.accent;
  const paper = palette.paper;

  const S = { stroke: ink, strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
  const SA = { ...S, stroke: accent };

  // Visibility per theme
  const v = (i) => ({ opacity: themeIndex === i ? 1 : 0, transition: 'opacity 900ms ease' });

  return (
    <svg viewBox="0 0 800 520" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      {/* Subtle paper */}
      <rect x="0" y="0" width="800" height="520" fill={paper} />

      {/* Grid guides — very faint */}
      <g opacity="0.08" stroke={ink} strokeWidth="0.5">
        {[...Array(16)].map((_, i) => <line key={`v${i}`} x1={50 * i} y1="0" x2={50 * i} y2="520" />)}
        {[...Array(11)].map((_, i) => <line key={`h${i}`} x1="0" y1={50 * i} x2="800" y2={50 * i} />)}
      </g>

      {/* ─── Room shell (always visible) ─── */}
      {/* Back wall line */}
      <line x1="40" y1="90" x2="760" y2="90" {...S} />
      <line x1="40" y1="90" x2="40" y2="430" {...S} />
      <line x1="760" y1="90" x2="760" y2="430" {...S} />
      {/* Floor */}
      <line x1="20" y1="430" x2="780" y2="430" {...S} strokeWidth="1.8" />
      <line x1="0" y1="460" x2="800" y2="460" {...S} opacity="0.3" />

      {/* Commercial hood */}
      <g {...S}>
        <path d="M 200 90 L 200 160 L 600 160 L 600 90" />
        <line x1="200" y1="160" x2="230" y2="190" />
        <line x1="600" y1="160" x2="570" y2="190" />
        <line x1="230" y1="190" x2="570" y2="190" />
        {/* Hood ribs */}
        {[0, 1, 2, 3, 4].map(i => (
          <line key={i} x1={260 + i * 62} y1="160" x2={260 + i * 62} y2="190" opacity="0.5" />
        ))}
      </g>

      {/* Counter — trapezoid giving slight depth */}
      <g {...S}>
        <path d="M 120 310 L 680 310 L 700 350 L 100 350 Z" />
        <line x1="120" y1="310" x2="680" y2="310" strokeWidth="2" />
        <line x1="100" y1="350" x2="700" y2="350" />
      </g>

      {/* Counter front paneling */}
      <g {...S} opacity="0.5">
        {[0,1,2,3,4].map(i => <line key={i} x1={200 + i*100} y1="350" x2={200 + i*100} y2="430" />)}
      </g>

      {/* Range burners (under hood, behind theme objects) */}
      <g {...S}>
        <rect x="320" y="260" width="160" height="50" rx="2" />
        {[0,1].map(r => [0,1].map(c => (
          <circle key={`${r}${c}`} cx={360 + c*80} cy={275 + r*18} r="8" />
        )))}
      </g>

      {/* Wall shelf (always there, contents change) */}
      <line x1="250" y1="220" x2="550" y2="220" {...S} strokeWidth="1.6" />
      <line x1="250" y1="220" x2="250" y2="230" {...S} opacity="0.5" />
      <line x1="550" y1="220" x2="550" y2="230" {...S} opacity="0.5" />

      {/* Bar stool */}
      <g {...S}>
        <line x1="720" y1="430" x2="720" y2="380" strokeWidth="1.6" />
        <line x1="705" y1="380" x2="735" y2="380" strokeWidth="1.8" />
        <line x1="715" y1="430" x2="710" y2="460" />
        <line x1="725" y1="430" x2="730" y2="460" />
      </g>

      {/* ─── THEME 0 · BAKERY ─── */}
      <g style={v(0)}>
        {/* Signage — empty frame */}
        <g {...S}>
          <rect x="300" y="105" width="200" height="40" rx="2" />
        </g>

        {/* Shelf — tall mixer + flour tins + proving baskets */}
        <g {...S}>
          {/* Stand mixer */}
          <g transform="translate(285, 205)">
            <rect x="-10" y="0" width="20" height="12" />
            <path d="M -8 0 L -12 -8 L -4 -16 L 4 -16 L 12 -8 L 8 0" />
            <circle cx="0" cy="-10" r="3" opacity="0.4" />
            {/* Bowl underneath */}
            <path d="M -8 12 Q -8 18 0 18 Q 8 18 8 12 Z" />
          </g>
          {/* Flour tins */}
          <g transform="translate(340, 210)">
            <rect x="-8" y="-10" width="16" height="20" />
            <rect x="-7" y="-2" width="14" height="5" opacity="0.4" />
          </g>
          <g transform="translate(365, 210)">
            <rect x="-8" y="-10" width="16" height="20" />
            <rect x="-7" y="-2" width="14" height="5" opacity="0.4" />
          </g>
          {/* Proving baskets (banneton) */}
          <g transform="translate(410, 212)">
            <path d="M -14 8 Q -14 -6 0 -6 Q 14 -6 14 8 Z" />
            {/* Coiled rings suggesting the rattan */}
            <path d="M -12 -2 Q 0 -6 12 -2" opacity="0.4" />
            <path d="M -11 2 Q 0 -2 11 2" opacity="0.4" />
            <path d="M -10 6 Q 0 2 10 6" opacity="0.4" />
          </g>
          <g transform="translate(445, 214)">
            <path d="M -12 6 Q -12 -4 0 -4 Q 12 -4 12 6 Z" />
            <path d="M -10 -1 Q 0 -4 10 -1" opacity="0.4" />
            <path d="M -9 2 Q 0 -1 9 2" opacity="0.4" />
          </g>
          {/* Jar of sourdough starter */}
          <g transform="translate(485, 210)">
            <rect x="-7" y="-10" width="14" height="20" />
            <rect x="-7" y="-12" width="14" height="3" />
            {/* Bubbles */}
            <circle cx="-2" cy="-2" r="1.2" opacity="0.5" />
            <circle cx="3" cy="1" r="1" opacity="0.5" />
            <circle cx="0" cy="5" r="1.4" opacity="0.5" />
          </g>
          {/* Hanging scale */}
          <g transform="translate(525, 205)">
            <rect x="-8" y="-4" width="16" height="12" />
            <circle cx="0" cy="2" r="3" opacity="0.4" />
            <line x1="0" y1="-4" x2="0" y2="-10" opacity="0.4" />
          </g>
        </g>

        {/* Counter — baked goods laid out on the bench (counter top y=310) */}
        <g {...S}>
          {/* Wooden board on the left holding baguettes */}
          <g transform="translate(240, 310)">
            <rect x="-60" y="-4" width="120" height="4" opacity="0.5" />
            {/* Three baguettes laid flat */}
            <g transform="translate(0, -10)">
              <path d="M -52 0 Q -54 -7 -48 -7 L 48 -7 Q 54 -7 52 0 Z" />
              <line x1="-46" y1="-5" x2="-38" y2="-2" opacity="0.5" />
              <line x1="-30" y1="-5" x2="-22" y2="-2" opacity="0.5" />
              <line x1="-14" y1="-5" x2="-6" y2="-2" opacity="0.5" />
              <line x1="2" y1="-5" x2="10" y2="-2" opacity="0.5" />
              <line x1="18" y1="-5" x2="26" y2="-2" opacity="0.5" />
              <line x1="34" y1="-5" x2="42" y2="-2" opacity="0.5" />
            </g>
            <g transform="translate(-5, -16)">
              <path d="M -46 0 Q -48 -6 -42 -6 L 42 -6 Q 48 -6 46 0 Z" />
              <line x1="-40" y1="-4" x2="-32" y2="-1" opacity="0.5" />
              <line x1="-22" y1="-4" x2="-14" y2="-1" opacity="0.5" />
              <line x1="-4" y1="-4" x2="4" y2="-1" opacity="0.5" />
              <line x1="14" y1="-4" x2="22" y2="-1" opacity="0.5" />
              <line x1="30" y1="-4" x2="38" y2="-1" opacity="0.5" />
            </g>
          </g>

          {/* Cake stand with boule in the middle */}
          <g transform="translate(370, 310)">
            {/* Stand base */}
            <rect x="-2" y="-6" width="4" height="6" />
            <ellipse cx="0" cy="-6" rx="22" ry="3" />
            <ellipse cx="0" cy="0" rx="10" ry="2" />
            {/* Boule resting on stand */}
            <path d="M -18 -7 Q -20 -26 0 -26 Q 20 -26 18 -7 Z" />
            <path d="M -12 -18 Q 0 -22 12 -18" opacity="0.6" />
            <path d="M -12 -13 Q 0 -16 12 -13" opacity="0.5" />
          </g>

          {/* Tray of croissants on the right */}
          <g transform="translate(480, 310)">
            {/* Wooden tray */}
            <rect x="-50" y="-4" width="100" height="4" />
            <line x1="-48" y1="-3" x2="48" y2="-3" opacity="0.4" />
            {/* Row of croissants on tray */}
            <g transform="translate(-36, -8)">
              <path d="M -10 4 Q -6 -4 0 -4 Q 6 -4 10 4 Q 6 7 0 7 Q -6 7 -10 4" />
              <line x1="-6" y1="0" x2="-4" y2="4" opacity="0.5" />
              <line x1="-2" y1="-1" x2="0" y2="4" opacity="0.5" />
              <line x1="3" y1="-1" x2="5" y2="4" opacity="0.5" />
            </g>
            <g transform="translate(-15, -8)">
              <path d="M -10 4 Q -6 -4 0 -4 Q 6 -4 10 4 Q 6 7 0 7 Q -6 7 -10 4" />
              <line x1="-6" y1="0" x2="-4" y2="4" opacity="0.5" />
              <line x1="3" y1="-1" x2="5" y2="4" opacity="0.5" />
            </g>
            <g transform="translate(6, -8)">
              <path d="M -10 4 Q -6 -4 0 -4 Q 6 -4 10 4 Q 6 7 0 7 Q -6 7 -10 4" />
              <line x1="-6" y1="0" x2="-4" y2="4" opacity="0.5" />
            </g>
            {/* A pain au chocolat — rectangular, with accent ends */}
            <g transform="translate(28, -8)">
              <rect x="-8" y="-4" width="16" height="8" rx="1" />
              <line x1="-6" y1="-4" x2="-6" y2="4" stroke={accent} opacity="0.7" />
              <line x1="6" y1="-4" x2="6" y2="4" stroke={accent} opacity="0.7" />
            </g>
          </g>
        </g>

        {/* Flour sack behind counter (still near range area) */}
        <g {...S} transform="translate(600, 295)">
          <path d="M -15 15 L -18 -5 Q -18 -10 -10 -12 L 10 -12 Q 18 -10 18 -5 L 15 15 Z" />
          <line x1="-8" y1="-5" x2="8" y2="-5" opacity="0.5" />
          <circle cx="0" cy="4" r="4" opacity="0.4" />
        </g>

        {/* Rolling pin on counter */}
        <g {...S} transform="translate(640, 307)">
          <rect x="-20" y="-4" width="40" height="5" rx="2" />
          <line x1="-24" y1="-2" x2="-20" y2="-2" />
          <line x1="20" y1="-2" x2="24" y2="-2" />
        </g>

        {/* Steam from oven / rising dough */}
        <g stroke={accent} strokeWidth="1.2" fill="none" strokeLinecap="round" opacity="0.8">
          <path d="M 370 280 Q 365 265 370 250 Q 375 240 370 230">
            <animate attributeName="opacity" values="0.3;0.9;0.3" dur="3s" repeatCount="indefinite" />
          </path>
          <path d="M 380 280 Q 385 265 380 250">
            <animate attributeName="opacity" values="0.6;0.2;0.6" dur="3s" repeatCount="indefinite" />
          </path>
        </g>
      </g>

      {/* ─── THEME 1 · RAMEN BAR ─── */}
      <g style={v(1)}>
        {/* Signage — noren curtain shapes (no text) */}
        <g {...S}>
          <path d="M 300 95 L 300 145 L 320 145 L 320 95" />
          <path d="M 330 95 L 330 145 L 370 145 L 370 95" />
          <path d="M 380 95 L 380 145 L 420 145 L 420 95" />
          <path d="M 430 95 L 430 145 L 470 145 L 470 95" />
          <path d="M 480 95 L 480 145 L 500 145 L 500 95" />
        </g>

        {/* Shelf — bowls stacked + sake bottles */}
        <g {...S}>
          {/* Stacked bowls */}
          <path d="M 280 215 Q 280 208 300 208 Q 320 208 320 215 Z" />
          <path d="M 278 210 Q 278 203 300 203 Q 322 203 322 210 Z" />
          <path d="M 276 205 Q 276 198 300 198 Q 324 198 324 205 Z" />
          {/* Sake bottles */}
          {[360, 385, 410].map((x, i) => (
            <g key={i} transform={`translate(${x}, 205)`}>
              <path d="M -6 14 L -6 -2 L -3 -8 L 3 -8 L 6 -2 L 6 14 Z" />
              <line x1="-6" y1="0" x2="6" y2="0" opacity="0.5" />
            </g>
          ))}
          {/* Chopstick holder */}
          <g transform="translate(460, 212)">
            <rect x="-14" y="-6" width="28" height="8" />
            <line x1="-8" y1="-10" x2="-6" y2="2" />
            <line x1="-4" y1="-11" x2="-2" y2="1" />
            <line x1="0" y1="-11" x2="2" y2="1" />
            <line x1="4" y1="-10" x2="6" y2="2" />
          </g>
          {/* Condiments */}
          <circle cx="510" cy="210" r="6" />
          <rect x="516" y="204" width="10" height="12" />
        </g>

        {/* Big ramen bowl on counter — base sits on counter top y=310 */}
        <g {...S}>
          <path d="M 200 278 Q 200 310 270 310 Q 340 310 340 278" strokeWidth="1.8" />
          <ellipse cx="270" cy="278" rx="70" ry="10" />
          {/* Broth line */}
          <ellipse cx="270" cy="281" rx="62" ry="6" opacity="0.4" />
          {/* Noodles squiggles */}
          <path d="M 230 278 Q 240 268 250 276 Q 260 284 270 274 Q 280 268 290 278 Q 300 284 310 276" strokeWidth="1.2" opacity="0.8" />
          <path d="M 235 275 Q 245 270 255 278 Q 265 282 275 273 Q 285 269 295 277 Q 305 281 310 274" strokeWidth="1.2" opacity="0.7" />
          {/* Egg half */}
          <g transform="translate(240, 271)">
            <path d="M -10 0 Q -10 -8 0 -8 Q 10 -8 10 0 Z" />
            <ellipse cx="0" cy="-2" rx="3" ry="2" fill={accent} stroke="none" />
          </g>
          {/* Nori */}
          <rect x="280" y="261" width="6" height="12" fill={ink} opacity="0.6" />
          {/* Scallions */}
          <line x1="260" y1="274" x2="266" y2="270" stroke={accent} />
          <line x1="275" y1="272" x2="281" y2="268" stroke={accent} />
          <line x1="295" y1="276" x2="301" y2="271" stroke={accent} />
        </g>

        {/* Stockpot on range */}
        <g {...S}>
          <path d="M 400 268 L 398 305 L 480 305 L 478 268 Z" />
          <ellipse cx="439" cy="268" rx="40" ry="6" />
          <line x1="395" y1="275" x2="482" y2="275" opacity="0.4" />
          {/* Handles */}
          <path d="M 398 280 Q 390 282 390 290" />
          <path d="M 478 280 Q 486 282 486 290" />
        </g>

        {/* Chopsticks on counter */}
        <g {...S}>
          <line x1="550" y1="330" x2="620" y2="315" strokeWidth="1.8" />
          <line x1="555" y1="335" x2="625" y2="320" strokeWidth="1.8" />
        </g>

        {/* Steam from pot & bowl */}
        <g stroke={accent} strokeWidth="1.2" fill="none" strokeLinecap="round">
          <path d="M 250 268 Q 245 253 250 238 Q 255 228 250 218">
            <animate attributeName="opacity" values="0.3;0.9;0.3" dur="2.5s" repeatCount="indefinite" />
          </path>
          <path d="M 290 268 Q 295 253 290 238">
            <animate attributeName="opacity" values="0.7;0.2;0.7" dur="2.5s" repeatCount="indefinite" />
          </path>
          <path d="M 440 255 Q 435 235 440 220 Q 445 210 440 200">
            <animate attributeName="opacity" values="0.4;0.9;0.4" dur="3s" repeatCount="indefinite" />
          </path>
        </g>
      </g>

      {/* ─── THEME 2 · WINE BAR ─── */}
      <g style={v(2)}>
        {/* Signage — minimal rules only */}
        <g {...S}>
          <line x1="320" y1="110" x2="480" y2="110" strokeWidth="1.6" />
          <line x1="320" y1="145" x2="480" y2="145" strokeWidth="1.6" />
          <line x1="360" y1="128" x2="440" y2="128" opacity="0.4" />
        </g>

        {/* Shelf — wine bottles in a row */}
        <g {...S}>
          {[270, 292, 314, 336, 358, 380, 402, 424, 446, 468, 490, 512, 534].map((x, i) => {
            const h = 34 + ((i % 3) * 2);
            return (
              <g key={i} transform={`translate(${x}, 220)`}>
                <path d={`M -5 -${h} L -5 -6 L -7 -4 L -7 0 L 7 0 L 7 -4 L 5 -6 L 5 -${h} Z`} />
                {/* Label */}
                <rect x="-5" y="-20" width="10" height="8" opacity="0.5" />
              </g>
            );
          })}
        </g>

        {/* Hanging wine glasses */}
        <g {...S}>
          {[290, 320, 350, 380, 440, 470, 500, 530].map((x, i) => (
            <g key={i} transform={`translate(${x}, 195)`}>
              <line x1="0" y1="-30" x2="0" y2="-20" opacity="0.4" />
              <path d="M -8 -20 Q -8 -8 0 -5 Q 8 -8 8 -20 Z" />
              <line x1="0" y1="-5" x2="0" y2="5" />
              <line x1="-5" y1="5" x2="5" y2="5" />
            </g>
          ))}
        </g>

        {/* Counter — wine glass + decanter + cheeseboard */}
        <g {...S}>
          {/* Wine glass filled */}
          <g transform="translate(220, 290)">
            <path d="M -12 -30 Q -12 -10 0 -5 Q 12 -10 12 -30 Z" strokeWidth="1.3" />
            <path d="M -10 -25 Q -10 -12 0 -8 Q 10 -12 10 -25 Z" fill={accent} stroke="none" opacity="0.5" />
            <line x1="0" y1="-5" x2="0" y2="15" strokeWidth="1.3" />
            <line x1="-10" y1="15" x2="10" y2="15" strokeWidth="1.8" />
          </g>

          {/* Decanter */}
          <g transform="translate(290, 290)">
            <path d="M -3 -30 L -3 -20 L -16 0 L -16 10 Q -16 15 -10 15 L 10 15 Q 16 15 16 10 L 16 0 L 3 -20 L 3 -30 Z" strokeWidth="1.4" />
            <path d="M -12 5 Q 0 2 12 5" opacity="0.4" fill={accent} stroke="none" />
          </g>

          {/* Second wine glass */}
          <g transform="translate(355, 290)">
            <path d="M -12 -30 Q -12 -10 0 -5 Q 12 -10 12 -30 Z" strokeWidth="1.3" />
            <line x1="0" y1="-5" x2="0" y2="15" strokeWidth="1.3" />
            <line x1="-10" y1="15" x2="10" y2="15" strokeWidth="1.8" />
          </g>

          {/* Cheeseboard */}
          <g transform="translate(480, 300)">
            <path d="M -60 5 L -60 0 L 60 0 L 60 5 Z" strokeWidth="1.6" />
            <line x1="-55" y1="0" x2="55" y2="0" opacity="0.3" />
            {/* Wedges */}
            <path d="M -45 0 L -35 -12 L -25 0 Z" />
            <path d="M -20 0 L -10 -8 L 0 0 Z" />
            <circle cx="15" cy="-4" r="4" />
            <circle cx="28" cy="-4" r="3" />
            {/* Grapes */}
            <circle cx="40" cy="-3" r="2" fill={accent} stroke="none" />
            <circle cx="44" cy="-4" r="2" fill={accent} stroke="none" />
            <circle cx="48" cy="-3" r="2" fill={accent} stroke="none" />
            <circle cx="42" cy="-6" r="2" fill={accent} stroke="none" />
            <circle cx="46" cy="-7" r="2" fill={accent} stroke="none" />
            {/* Knife */}
            <line x1="-55" y1="-8" x2="-30" y2="-8" />
            <line x1="-30" y1="-8" x2="-20" y2="-6" />
          </g>
        </g>

        {/* Chalkboard wine list on wall (no text) */}
        <g {...S} transform="translate(640, 155)">
          <rect x="-35" y="-35" width="70" height="60" />
          <line x1="-28" y1="-22" x2="28" y2="-22" opacity="0.4" />
          <line x1="-28" y1="-14" x2="28" y2="-14" opacity="0.4" />
          <line x1="-28" y1="-6" x2="20" y2="-6" opacity="0.4" />
          <line x1="-28" y1="2" x2="25" y2="2" opacity="0.4" />
          <line x1="-28" y1="10" x2="15" y2="10" opacity="0.4" />
          <line x1="-28" y1="18" x2="22" y2="18" opacity="0.4" />
        </g>
      </g>

      {/* ─── THEME 3 · TAQUERIA ─── */}
      <g style={v(3)}>
        {/* Signage — papel picado bunting across the hood */}
        <g {...S}>
          <path d="M 220 105 Q 300 115 380 105 Q 460 115 540 105 Q 580 110 580 110" strokeWidth="0.8" opacity="0.5" />
          {/* Triangular flags hanging from the bunting */}
          {[240, 280, 320, 360, 400, 440, 480, 520, 560].map((x, i) => {
            const y = 110 + (i % 2) * 2;
            const accented = i % 3 === 0;
            return (
              <g key={i} transform={`translate(${x}, ${y})`}>
                <path d="M -10 0 L 10 0 L 0 18 Z" stroke={accented ? accent : ink} />
                {/* Cut-out dots for papel picado effect */}
                <circle cx="0" cy="6" r="1.5" opacity="0.6" />
                <circle cx="-3" cy="10" r="1" opacity="0.5" />
                <circle cx="3" cy="10" r="1" opacity="0.5" />
              </g>
            );
          })}
        </g>

        {/* Shelf — ceramic jars + lime bowl + hot sauce bottles */}
        <g {...S}>
          {/* Talavera-style ceramic jars */}
          {[280, 315, 350].map((x, i) => (
            <g key={i} transform={`translate(${x}, 208)`}>
              <path d="M -10 12 L -12 -6 Q -12 -10 -8 -10 L -6 -14 L 6 -14 L 8 -10 Q 12 -10 12 -6 L 10 12 Z" />
              <line x1="-10" y1="-2" x2="10" y2="-2" opacity="0.4" />
              <circle cx="0" cy="4" r="2" opacity="0.5" />
            </g>
          ))}
          {/* Bowl of limes */}
          <g transform="translate(410, 215)">
            <path d="M -22 0 Q -22 8 -14 8 L 14 8 Q 22 8 22 0 Z" />
            <line x1="-20" y1="0" x2="20" y2="0" opacity="0.4" />
            {/* Limes */}
            <circle cx="-10" cy="-3" r="4" />
            <circle cx="-2" cy="-4" r="4" />
            <circle cx="7" cy="-3" r="4" />
            <circle cx="-5" cy="-7" r="3.5" />
            <circle cx="4" cy="-7" r="3.5" />
          </g>
          {/* Hot sauce bottles */}
          {[460, 480, 500, 520].map((x, i) => (
            <g key={i} transform={`translate(${x}, 210)`}>
              <path d="M -4 10 L -4 -6 L -2 -10 L 2 -10 L 4 -6 L 4 10 Z" />
              <rect x="-4" y="-2" width="8" height="6" fill={i % 2 === 0 ? accent : 'none'} stroke={ink} opacity={i % 2 === 0 ? 0.6 : 1} />
            </g>
          ))}
        </g>

        {/* Tortilla stack with cloth — center */}
        <g {...S}>
          <g transform="translate(270, 300)">
            {/* Cloth-wrapped stack */}
            <path d="M -26 -4 Q -28 -14 -18 -16 L 18 -16 Q 28 -14 26 -4 Q 24 4 18 6 L -18 6 Q -24 4 -26 -4 Z" strokeWidth="1.5" />
            {/* Stack layers visible on top */}
            <ellipse cx="0" cy="-10" rx="20" ry="4" />
            <line x1="-18" y1="-8" x2="18" y2="-8" opacity="0.5" />
            <line x1="-17" y1="-6" x2="17" y2="-6" opacity="0.4" />
            {/* Cloth fold */}
            <path d="M -20 2 Q -18 8 -10 10" opacity="0.4" />
            <path d="M 20 2 Q 18 8 10 10" opacity="0.4" />
          </g>
        </g>

        {/* Comal / flat grill on range with three tacos */}
        <g {...S}>
          {/* The comal (round flat cast iron) */}
          <circle cx="420" cy="290" r="40" strokeWidth="1.6" />
          <circle cx="420" cy="290" r="35" opacity="0.3" />
          {/* Three tacos arranged on the comal */}
          <g transform="translate(400, 290)">
            <path d="M -10 -2 Q -10 -10 -2 -10 Q 6 -10 6 -2 L 6 2 L -10 2 Z" />
            {/* Filling suggestion (terracotta accent) */}
            <path d="M -8 -4 Q -4 -6 0 -4 Q 4 -6 6 -4" stroke={accent} strokeWidth="1.4" fill="none" />
          </g>
          <g transform="translate(425, 285)">
            <path d="M -10 -2 Q -10 -10 -2 -10 Q 6 -10 6 -2 L 6 2 L -10 2 Z" />
            <path d="M -8 -4 Q -4 -6 0 -4 Q 4 -6 6 -4" stroke={accent} strokeWidth="1.4" fill="none" />
          </g>
          <g transform="translate(440, 295)">
            <path d="M -10 -2 Q -10 -10 -2 -10 Q 6 -10 6 -2 L 6 2 L -10 2 Z" />
            <path d="M -8 -4 Q -4 -6 0 -4 Q 4 -6 6 -4" stroke={accent} strokeWidth="1.4" fill="none" />
          </g>
        </g>

        {/* Molcajete (stone mortar) on counter */}
        <g {...S} transform="translate(540, 295)">
          <path d="M -18 10 Q -20 -2 -14 -4 L 14 -4 Q 20 -2 18 10 Z" strokeWidth="1.5" />
          {/* Three tripod feet */}
          <line x1="-12" y1="10" x2="-14" y2="16" />
          <line x1="0" y1="10" x2="0" y2="16" />
          <line x1="12" y1="10" x2="14" y2="16" />
          <ellipse cx="0" cy="-4" rx="14" ry="3" opacity="0.4" />
          {/* Salsa inside */}
          <path d="M -10 -4 Q 0 -2 10 -4" stroke={accent} strokeWidth="1.4" fill="none" />
          {/* Texture dots */}
          <circle cx="-8" cy="3" r="0.8" opacity="0.4" />
          <circle cx="-3" cy="6" r="0.8" opacity="0.4" />
          <circle cx="5" cy="4" r="0.8" opacity="0.4" />
          <circle cx="10" cy="7" r="0.8" opacity="0.4" />
        </g>

        {/* Steam from comal */}
        <g stroke={accent} strokeWidth="1.2" fill="none" strokeLinecap="round">
          <path d="M 420 260 Q 415 245 420 230 Q 425 220 420 210">
            <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.8s" repeatCount="indefinite" />
          </path>
          <path d="M 440 260 Q 445 248 440 238">
            <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2.8s" repeatCount="indefinite" />
          </path>
        </g>
      </g>

      {/* ─── THEME 4 · DUMPLING HOUSE ─── */}
      <g style={v(4)}>
        {/* Signage — circular hanging lantern and a rectangular banner */}
        <g {...S}>
          {/* Two paper lanterns hanging from hood */}
          <line x1="320" y1="90" x2="320" y2="100" opacity="0.5" />
          <g transform="translate(320, 118)">
            <ellipse cx="0" cy="0" rx="18" ry="20" />
            <line x1="-18" y1="0" x2="18" y2="0" opacity="0.4" />
            <line x1="-14" y1="-12" x2="14" y2="-12" opacity="0.3" />
            <line x1="-14" y1="12" x2="14" y2="12" opacity="0.3" />
            {/* Tassel */}
            <line x1="0" y1="20" x2="0" y2="28" />
            <line x1="-3" y1="24" x2="-3" y2="30" opacity="0.6" />
            <line x1="3" y1="24" x2="3" y2="30" opacity="0.6" />
          </g>
          <line x1="480" y1="90" x2="480" y2="100" opacity="0.5" />
          <g transform="translate(480, 118)">
            <ellipse cx="0" cy="0" rx="18" ry="20" stroke={accent} />
            <line x1="-18" y1="0" x2="18" y2="0" opacity="0.4" stroke={accent} />
            <line x1="-14" y1="-12" x2="14" y2="-12" opacity="0.3" stroke={accent} />
            <line x1="-14" y1="12" x2="14" y2="12" opacity="0.3" stroke={accent} />
            <line x1="0" y1="20" x2="0" y2="28" stroke={accent} />
          </g>
          {/* Horizontal banner across the middle */}
          <path d="M 355 140 L 445 140 L 450 150 L 350 150 Z" />
          <line x1="370" y1="145" x2="430" y2="145" opacity="0.3" />
        </g>

        {/* Shelf — teapots, teacups, sauce bottles */}
        <g {...S}>
          {/* Teapot */}
          <g transform="translate(290, 210)">
            <path d="M -14 8 Q -14 -4 -8 -6 L 8 -6 Q 14 -4 14 8 Z" />
            <path d="M -8 -6 L -8 -10 Q -8 -12 -4 -12 L 4 -12 Q 8 -12 8 -10 L 8 -6" />
            <path d="M 14 2 Q 20 0 20 -4 Q 20 -6 16 -6" />
            <path d="M -14 2 Q -18 0 -18 -4" />
          </g>
          {/* Teacups */}
          {[325, 345, 365].map((x, i) => (
            <g key={i} transform={`translate(${x}, 214)`}>
              <path d="M -6 4 Q -6 -4 0 -4 Q 6 -4 6 4 Z" />
              <ellipse cx="0" cy="-4" rx="6" ry="1.5" opacity="0.4" />
            </g>
          ))}
          {/* Sauce bottles (soy, vinegar, chili oil) */}
          {[400, 420, 440, 460].map((x, i) => (
            <g key={i} transform={`translate(${x}, 210)`}>
              <path d="M -4 10 L -4 -4 L -2 -8 L 2 -8 L 4 -4 L 4 10 Z" />
              <rect x="-4" y="0" width="8" height="5" fill={i === 2 ? accent : 'none'} stroke={ink} opacity={i === 2 ? 0.7 : 1} />
            </g>
          ))}
          {/* Stacked small plates */}
          <g transform="translate(510, 215)">
            <ellipse cx="0" cy="0" rx="18" ry="3" />
            <ellipse cx="0" cy="-3" rx="18" ry="3" />
            <ellipse cx="0" cy="-6" rx="18" ry="3" />
          </g>
        </g>

        {/* Bamboo steamer tower — main centerpiece */}
        <g {...S}>
          <g transform="translate(260, 300)">
            {/* Stack of 3 steamer baskets with slightly offset lids */}
            {/* Bottom basket */}
            <rect x="-32" y="-4" width="64" height="10" />
            <line x1="-32" y1="0" x2="32" y2="0" opacity="0.3" />
            <line x1="-32" y1="3" x2="32" y2="3" opacity="0.3" />
            {/* Middle basket (slightly offset left) */}
            <rect x="-34" y="-14" width="64" height="10" />
            <line x1="-34" y1="-10" x2="30" y2="-10" opacity="0.3" />
            <line x1="-34" y1="-7" x2="30" y2="-7" opacity="0.3" />
            {/* Top basket (slightly offset right) */}
            <rect x="-30" y="-24" width="64" height="10" />
            <line x1="-30" y1="-20" x2="34" y2="-20" opacity="0.3" />
            <line x1="-30" y1="-17" x2="34" y2="-17" opacity="0.3" />
            {/* Lid — domed */}
            <path d="M -30 -24 Q -30 -36 0 -36 Q 30 -36 34 -24" />
            <line x1="-24" y1="-30" x2="28" y2="-30" opacity="0.3" />
            <line x1="-20" y1="-33" x2="22" y2="-33" opacity="0.3" />
            {/* Little knob on top */}
            <circle cx="0" cy="-36" r="2" />
          </g>

          {/* Open steamer on the right showing dumplings */}
          <g transform="translate(400, 300)">
            <ellipse cx="0" cy="0" rx="32" ry="8" />
            <rect x="-32" y="0" width="64" height="8" />
            <line x1="-32" y1="4" x2="32" y2="4" opacity="0.3" />
            {/* 4 pleated dumplings inside */}
            <g transform="translate(-16, -2)">
              <path d="M -7 2 Q -7 -6 0 -6 Q 7 -6 7 2 Z" />
              {/* Pleats */}
              <line x1="-4" y1="-4" x2="-3" y2="2" opacity="0.5" />
              <line x1="0" y1="-5" x2="0" y2="2" opacity="0.5" />
              <line x1="4" y1="-4" x2="3" y2="2" opacity="0.5" />
            </g>
            <g transform="translate(0, -2)">
              <path d="M -7 2 Q -7 -6 0 -6 Q 7 -6 7 2 Z" />
              <line x1="-4" y1="-4" x2="-3" y2="2" opacity="0.5" />
              <line x1="0" y1="-5" x2="0" y2="2" opacity="0.5" />
              <line x1="4" y1="-4" x2="3" y2="2" opacity="0.5" />
            </g>
            <g transform="translate(16, -2)">
              <path d="M -7 2 Q -7 -6 0 -6 Q 7 -6 7 2 Z" />
              <line x1="-4" y1="-4" x2="-3" y2="2" opacity="0.5" />
              <line x1="0" y1="-5" x2="0" y2="2" opacity="0.5" />
              <line x1="4" y1="-4" x2="3" y2="2" opacity="0.5" />
            </g>
          </g>
        </g>

        {/* Small dipping sauce bowl */}
        <g {...S} transform="translate(490, 318)">
          <path d="M -10 0 Q -10 8 0 8 Q 10 8 10 0 Z" />
          <ellipse cx="0" cy="0" rx="10" ry="2" opacity="0.4" />
          {/* Sauce — accent */}
          <ellipse cx="0" cy="3" rx="7" ry="1.5" fill={accent} stroke="none" opacity="0.6" />
        </g>

        {/* Chopsticks on counter */}
        <g {...S}>
          <line x1="560" y1="335" x2="620" y2="318" strokeWidth="1.6" />
          <line x1="564" y1="340" x2="624" y2="323" strokeWidth="1.6" />
          {/* Chopstick rest */}
          <path d="M 555 336 Q 560 332 565 336" opacity="0.6" />
        </g>

        {/* Wok on range */}
        <g {...S}>
          <path d="M 150 265 Q 150 300 200 300 Q 250 300 250 265" strokeWidth="1.6" />
          <ellipse cx="200" cy="265" rx="50" ry="6" />
          {/* Long wok handle */}
          <line x1="250" y1="272" x2="280" y2="268" strokeWidth="1.6" />
          <rect x="275" y="266" width="10" height="5" opacity="0.5" />
        </g>

        {/* Steam from steamers and wok — generous, since steam is the star */}
        <g stroke={accent} strokeWidth="1.2" fill="none" strokeLinecap="round">
          <path d="M 250 258 Q 245 240 250 222 Q 255 210 250 198">
            <animate attributeName="opacity" values="0.4;0.9;0.4" dur="2.6s" repeatCount="indefinite" />
          </path>
          <path d="M 270 258 Q 275 240 270 222">
            <animate attributeName="opacity" values="0.7;0.2;0.7" dur="2.6s" repeatCount="indefinite" />
          </path>
          <path d="M 400 284 Q 395 268 400 252 Q 405 242 400 232">
            <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3.1s" repeatCount="indefinite" />
          </path>
          <path d="M 200 258 Q 195 242 200 226">
            <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2.4s" repeatCount="indefinite" />
          </path>
        </g>
      </g>

      {/* ─── THEME 5 · BURGER JOINT ─── */}
      <g style={v(5)}>
        {/* Signage — retro diner marquee with border frame */}
        <g {...S}>
          <rect x="300" y="100" width="200" height="50" rx="4" />
          <rect x="305" y="105" width="190" height="40" rx="2" opacity="0.4" />
          {/* Decorative bulbs along the top */}
          {[320, 340, 360, 380, 400, 420, 440, 460, 480].map((x, i) => (
            <circle key={i} cx={x} cy="100" r="2.5" fill={i % 2 === 0 ? accent : 'none'} stroke={ink} />
          ))}
        </g>

        {/* Shelf — milkshake machines, ketchup/mustard, stacked cups */}
        <g {...S}>
          {/* Milkshake blender */}
          <g transform="translate(280, 205)">
            <rect x="-8" y="-12" width="16" height="22" />
            <rect x="-6" y="-10" width="12" height="3" opacity="0.4" />
            <line x1="0" y1="-12" x2="0" y2="-18" />
            <circle cx="0" cy="-20" r="3" />
            {/* Cup below spindle */}
            <path d="M -6 10 L -5 18 L 5 18 L 6 10 Z" />
          </g>
          {/* Second milkshake blender */}
          <g transform="translate(315, 205)">
            <rect x="-8" y="-12" width="16" height="22" />
            <rect x="-6" y="-10" width="12" height="3" opacity="0.4" />
            <line x1="0" y1="-12" x2="0" y2="-18" />
            <circle cx="0" cy="-20" r="3" />
          </g>
          {/* Ketchup & mustard squeeze bottles */}
          <g transform="translate(360, 208)">
            <path d="M -4 12 L -4 -6 Q -4 -10 0 -10 Q 4 -10 4 -6 L 4 12 Z" stroke={accent} />
            <circle cx="0" cy="-10" r="2" stroke={accent} />
            <rect x="-4" y="0" width="8" height="6" fill={accent} stroke="none" opacity="0.5" />
          </g>
          <g transform="translate(380, 208)">
            <path d="M -4 12 L -4 -6 Q -4 -10 0 -10 Q 4 -10 4 -6 L 4 12 Z" />
            <circle cx="0" cy="-10" r="2" />
            <rect x="-4" y="0" width="8" height="6" opacity="0.3" />
          </g>
          {/* Stacked paper cups */}
          <g transform="translate(420, 210)">
            <path d="M -8 10 L -6 -8 L 6 -8 L 8 10 Z" />
            <path d="M -9 8 L -7 -10 L 7 -10 L 9 8" opacity="0.5" />
            <path d="M -10 6 L -8 -12 L 8 -12 L 10 6" opacity="0.4" />
          </g>
          {/* Glass jar of straws */}
          <g transform="translate(455, 210)">
            <rect x="-8" y="-12" width="16" height="22" />
            {/* Straws poking out */}
            <line x1="-4" y1="-12" x2="-4" y2="-18" stroke={accent} />
            <line x1="0" y1="-12" x2="0" y2="-20" stroke={accent} />
            <line x1="4" y1="-12" x2="4" y2="-17" stroke={accent} />
            <line x1="-2" y1="-12" x2="-2" y2="-19" stroke={ink} />
            <line x1="2" y1="-12" x2="2" y2="-18" stroke={ink} />
          </g>
          {/* Pickle jar */}
          <g transform="translate(500, 210)">
            <path d="M -7 10 L -8 -10 Q -8 -12 -6 -12 L 6 -12 Q 8 -12 8 -10 L 7 10 Z" />
            <line x1="-8" y1="-6" x2="8" y2="-6" opacity="0.5" />
            {/* Pickles inside */}
            <ellipse cx="-3" cy="0" rx="2" ry="3" opacity="0.5" />
            <ellipse cx="3" cy="2" rx="2" ry="3" opacity="0.5" />
            <ellipse cx="0" cy="5" rx="2" ry="3" opacity="0.5" />
          </g>
          {/* Small condiment caddy */}
          <g transform="translate(540, 212)">
            <rect x="-12" y="-6" width="24" height="10" />
            <line x1="-6" y1="-6" x2="-6" y2="4" opacity="0.4" />
            <line x1="0" y1="-6" x2="0" y2="4" opacity="0.4" />
            <line x1="6" y1="-6" x2="6" y2="4" opacity="0.4" />
          </g>
        </g>

        {/* The hero burger on a plate — center-left, tall stacked */}
        <g {...S}>
          <g transform="translate(250, 305)">
            {/* Plate */}
            <ellipse cx="0" cy="12" rx="50" ry="5" strokeWidth="1.5" />
            <ellipse cx="0" cy="10" rx="46" ry="4" opacity="0.4" />
            {/* Bottom bun */}
            <path d="M -28 10 Q -28 2 -22 2 L 22 2 Q 28 2 28 10 Z" strokeWidth="1.4" />
            {/* Patty — thick, accent-filled */}
            <path d="M -26 2 Q -26 -6 -20 -8 L 20 -8 Q 26 -6 26 2 Z" stroke={accent} strokeWidth="1.4" />
            <line x1="-24" y1="-4" x2="24" y2="-4" stroke={accent} opacity="0.5" />
            {/* Cheese slice (corners sticking out) */}
            <path d="M -28 -8 L -20 -12 L 20 -12 L 28 -8 L 24 -6 L -24 -6 Z" />
            {/* Lettuce — wavy frill */}
            <path d="M -26 -12 Q -22 -16 -18 -12 Q -14 -16 -10 -12 Q -6 -16 -2 -12 Q 2 -16 6 -12 Q 10 -16 14 -12 Q 18 -16 22 -12 Q 26 -16 26 -12" />
            {/* Tomato slice */}
            <ellipse cx="0" cy="-14" rx="22" ry="3" stroke={accent} />
            {/* Top bun with sesame seeds */}
            <path d="M -24 -14 Q -26 -28 -10 -30 Q 0 -32 10 -30 Q 26 -28 24 -14 Z" strokeWidth="1.4" />
            {/* Sesame seeds */}
            <ellipse cx="-14" cy="-24" rx="1.5" ry="0.8" opacity="0.6" />
            <ellipse cx="-6" cy="-27" rx="1.5" ry="0.8" opacity="0.6" />
            <ellipse cx="2" cy="-28" rx="1.5" ry="0.8" opacity="0.6" />
            <ellipse cx="10" cy="-26" rx="1.5" ry="0.8" opacity="0.6" />
            <ellipse cx="16" cy="-22" rx="1.5" ry="0.8" opacity="0.6" />
            {/* Toothpick with flag */}
            <line x1="0" y1="-30" x2="0" y2="-40" />
            <path d="M 0 -40 L 8 -38 L 0 -36 Z" stroke={accent} fill={accent} opacity="0.7" />
          </g>
        </g>

        {/* Fries basket on counter */}
        <g {...S}>
          <g transform="translate(370, 310)">
            {/* Paper-lined basket / cone */}
            <path d="M -20 10 L -16 -10 L 16 -10 L 20 10 Z" strokeWidth="1.5" />
            <line x1="-18" y1="0" x2="18" y2="0" opacity="0.3" />
            {/* Fries sticking out top */}
            <line x1="-12" y1="-10" x2="-13" y2="-22" stroke={accent} />
            <line x1="-8" y1="-10" x2="-9" y2="-24" stroke={accent} />
            <line x1="-4" y1="-10" x2="-5" y2="-23" stroke={accent} />
            <line x1="0" y1="-10" x2="0" y2="-26" stroke={accent} />
            <line x1="4" y1="-10" x2="5" y2="-25" stroke={accent} />
            <line x1="8" y1="-10" x2="9" y2="-22" stroke={accent} />
            <line x1="12" y1="-10" x2="13" y2="-24" stroke={accent} />
            <line x1="-6" y1="-10" x2="-7" y2="-20" stroke={accent} />
            <line x1="6" y1="-10" x2="7" y2="-21" stroke={accent} />
            <line x1="2" y1="-10" x2="3" y2="-22" stroke={accent} />
          </g>
          {/* Small ramekin of ketchup beside */}
          <g transform="translate(405, 315)">
            <path d="M -7 5 Q -7 -2 0 -2 Q 7 -2 7 5 Z" />
            <ellipse cx="0" cy="-2" rx="7" ry="1.5" opacity="0.4" />
            <ellipse cx="0" cy="1" rx="5" ry="1.2" fill={accent} stroke="none" opacity="0.6" />
          </g>
        </g>

        {/* Flat-top griddle on range with patties cooking */}
        <g {...S}>
          {/* The flat-top surface */}
          <rect x="440" y="270" width="100" height="40" rx="2" strokeWidth="1.6" />
          <rect x="444" y="274" width="92" height="32" rx="1" opacity="0.3" />
          {/* Grill lines */}
          <line x1="444" y1="282" x2="536" y2="282" opacity="0.3" />
          <line x1="444" y1="290" x2="536" y2="290" opacity="0.3" />
          <line x1="444" y1="298" x2="536" y2="298" opacity="0.3" />
          {/* Three patties smashed on it */}
          <g transform="translate(465, 290)">
            <ellipse cx="0" cy="0" rx="10" ry="4" stroke={accent} strokeWidth="1.4" />
            <path d="M -6 -1 Q 0 -3 6 -1" opacity="0.5" />
          </g>
          <g transform="translate(490, 288)">
            <ellipse cx="0" cy="0" rx="10" ry="4" stroke={accent} strokeWidth="1.4" />
            <path d="M -6 -1 Q 0 -3 6 -1" opacity="0.5" />
          </g>
          <g transform="translate(515, 292)">
            <ellipse cx="0" cy="0" rx="10" ry="4" stroke={accent} strokeWidth="1.4" />
            <path d="M -6 -1 Q 0 -3 6 -1" opacity="0.5" />
          </g>
          {/* Spatula leaning against side */}
          <line x1="540" y1="310" x2="560" y2="280" strokeWidth="1.4" />
          <rect x="556" y="272" width="10" height="12" />
        </g>

        {/* Milkshake in a tall glass on counter */}
        <g {...S} transform="translate(600, 305)">
          {/* Tall diner glass */}
          <path d="M -10 12 L -8 -20 L 8 -20 L 10 12 Z" strokeWidth="1.4" />
          {/* Shake fill (accent) */}
          <path d="M -9 -4 L -8 -18 L 8 -18 L 9 -4 Z" fill={accent} stroke="none" opacity="0.4" />
          {/* Whipped cream swirl on top */}
          <path d="M -8 -20 Q -4 -26 0 -22 Q 4 -28 8 -20" />
          <path d="M -5 -22 Q 0 -26 5 -22" opacity="0.5" />
          {/* Cherry on top */}
          <circle cx="0" cy="-27" r="2" fill={accent} stroke={ink} />
          <line x1="0" y1="-29" x2="2" y2="-32" />
          {/* Straw */}
          <line x1="4" y1="-24" x2="7" y2="-34" strokeWidth="1.4" />
        </g>

        {/* Steam from the griddle — savory sizzle */}
        <g stroke={accent} strokeWidth="1.2" fill="none" strokeLinecap="round">
          <path d="M 470 268 Q 465 252 470 238 Q 475 228 470 218">
            <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.7s" repeatCount="indefinite" />
          </path>
          <path d="M 500 268 Q 505 252 500 238">
            <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2.9s" repeatCount="indefinite" />
          </path>
          <path d="M 520 268 Q 515 252 520 240">
            <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2.5s" repeatCount="indefinite" />
          </path>
        </g>
      </g>

    </svg>
  );
}

Object.assign(window, { HiFiHero });