// Animated SVG covers — code-window style with thematic backdrops.
// Each cover keeps a unique backdrop motif behind a window chrome that
// shows project-relevant code / config / timeline.
const Covers = {};

// ─── Shared window chrome helpers ────────────────────────────────────────────
function WindowChrome({ x, y, w, h, title, hue, hideLights }) {
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect width={w} height={h} rx="14" fill="#0a0a0b"
        stroke={`oklch(0.7 0.18 ${hue})`} strokeWidth="1" opacity="0.97" />
      {!hideLights && (
        <g>
          <circle cx="22" cy="22" r="5" fill="oklch(0.7 0.18 25)" />
          <circle cx="40" cy="22" r="5" fill="oklch(0.8 0.18 80)" />
          <circle cx="58" cy="22" r="5" fill="oklch(0.78 0.18 145)" />
        </g>
      )}
      <text x={hideLights ? 22 : 80} y="26" fontFamily="'JetBrains Mono', monospace"
        fontSize="11" fill={`oklch(0.6 0.05 ${hue})`}>{title}</text>
      <line x1="0" y1="40" x2={w} y2="40" stroke={`oklch(0.5 0.05 ${hue})`} opacity="0.3" />
    </g>
  );
}

// Caret blink reused inside windows
function Caret({ x, y, hue }) {
  return (
    <rect x={x} y={y} width="7" height="13" fill={`oklch(0.95 0.18 ${hue})`}>
      <animate attributeName="opacity" values="0;1;1;0" dur="1.1s" repeatCount="indefinite" />
    </rect>
  );
}

// ─── Project Zeus — Unreal C++ header in front of a storm ───────────────────
Covers.zeus = function ZeusCover({ hue = 220 }) {
  return (
    <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id="zs-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={`oklch(0.16 0.06 ${hue})`} />
          <stop offset="100%" stopColor="#050505" />
        </linearGradient>
      </defs>
      <rect width="800" height="500" fill="url(#zs-bg)" />
      {/* lightning flash backdrop */}
      <g opacity="0.55">
        <path d="M 130 40 L 110 180 L 160 190 L 120 330 L 200 200 L 160 195 L 195 50 Z"
          fill={`oklch(0.95 0.18 ${hue})`}>
          <animate attributeName="opacity" values="0;1;0;0;1;0;0" dur="6s" repeatCount="indefinite" />
        </path>
        <path d="M 680 30 L 660 180 L 705 190 L 680 320 L 740 200 L 700 195 L 720 40 Z"
          fill={`oklch(0.92 0.15 ${hue})`}>
          <animate attributeName="opacity" values="0;0;1;0;0;1;0" dur="6s" repeatCount="indefinite" />
        </path>
      </g>
      {/* rain */}
      {Array.from({ length: 30 }).map((_, i) => {
        const x = (i * 27) % 800;
        return (
          <line key={i} x1={x} y1="0" x2={x - 18} y2="80"
            stroke={`oklch(0.7 0.08 ${hue})`} strokeWidth="0.6" opacity="0.35">
            <animate attributeName="y1" from={-50} to={500} dur={`${1.5 + (i % 5) * 0.3}s`} repeatCount="indefinite" />
            <animate attributeName="y2" from={30} to={580} dur={`${1.5 + (i % 5) * 0.3}s`} repeatCount="indefinite" />
          </line>
        );
      })}
      {/* code window */}
      <WindowChrome x={70} y={90} w={660} h={320} title="ZeusCharacter.h" hue={hue} />
      <g transform="translate(70 90)" fontFamily="'JetBrains Mono', monospace" fontSize="13">
        {[
          { n: 1, txt: [['// gameplay · cinematics · UI', `oklch(0.5 0.05 ${hue})`]] },
          { n: 2, txt: [['UCLASS', 'oklch(0.85 0.18 50)'], ['(Blueprintable)', '#ededed']] },
          { n: 3, txt: [['class', `oklch(0.85 0.18 ${hue})`], [' AZeusCharacter ', '#ededed'], [':', `oklch(0.85 0.18 ${hue})`], [' public ACharacter ', '#ededed'], ['{', '#ededed']] },
          { n: 4, txt: [['  GENERATED_BODY', 'oklch(0.85 0.18 50)'], ['()', '#ededed']] },
          { n: 5, txt: [['  UFUNCTION', 'oklch(0.85 0.18 50)'], ['(BlueprintCallable)', '#ededed']] },
          { n: 6, txt: [['  void ', `oklch(0.85 0.18 ${hue})`], ['TriggerCinematic', 'oklch(0.85 0.16 50)'], ['();', '#ededed']] },
          { n: 7, txt: [['  UFUNCTION', 'oklch(0.85 0.18 50)'], ['()', '#ededed']] },
          { n: 8, txt: [['  void ', `oklch(0.85 0.18 ${hue})`], ['MoveAlong', 'oklch(0.85 0.16 50)'], ['(FVector dir);', '#ededed']] },
          { n: 9, txt: [['};', '#ededed']] }
        ].map((line, i) => {
          let x = 50;
          return (
            <g key={i}>
              <text x="22" y={75 + i * 24} fill={`oklch(0.6 0.05 ${hue})`}>{line.n}</text>
              {line.txt.map((seg, j) => {
                const t = <text key={j} x={x} y={75 + i * 24} fill={seg[1]}>{seg[0]}</text>;
                x += seg[0].length * 7.4;
                return t;
              })}
            </g>
          );
        })}
        <Caret x={330} y={257 - 12} hue={hue} />
      </g>
    </svg>
  );
};

// ─── Ghostrunner Fan Trailer — CapCut-style editor timeline ─────────────────
Covers.ghost = function GhostCover({ hue = 350 }) {
  return (
    <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id="gh-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={`oklch(0.16 0.08 ${hue})`} />
          <stop offset="100%" stopColor={`oklch(0.12 0.1 ${hue + 200})`} />
        </linearGradient>
      </defs>
      <rect width="800" height="500" fill="url(#gh-bg)" />
      {/* scanlines */}
      <g opacity="0.12" stroke={`oklch(0.9 0.15 ${hue})`}>
        {Array.from({ length: 80 }).map((_, i) => (
          <line key={i} x1="0" y1={i * 6.5} x2="800" y2={i * 6.5} strokeWidth="0.4" />
        ))}
      </g>
      <WindowChrome x={50} y={60} w={700} h={380} title="GhostrunnerCut.proj — CapCut" hue={hue} />
      {/* preview viewport */}
      <g transform="translate(50 60)">
        <rect x="22" y="56" width="380" height="200" rx="6" fill="#050505" stroke={`oklch(0.5 0.1 ${hue})`} opacity="0.95" />
        <g transform="translate(212 156)">
          <circle r="36" fill="rgba(0,0,0,0.5)" stroke={`oklch(0.95 0.15 ${hue})`} strokeWidth="1.4">
            <animate attributeName="r" values="36;42;36" dur="2.5s" repeatCount="indefinite" />
          </circle>
          <polygon points="-10,-14 -10,14 14,0" fill={`oklch(0.95 0.15 ${hue})`} />
        </g>
        <text x="34" y="80" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={`oklch(0.85 0.18 ${hue})`}>● REC · 00:00:47 / 00:01:38</text>
        {/* metadata panel */}
        <rect x="416" y="56" width="262" height="200" rx="6" fill="#0a0a0b" stroke={`oklch(0.3 0.05 ${hue})`} />
        <g fontFamily="'JetBrains Mono', monospace" fontSize="11">
          <text x="428" y="80" fill={`oklch(0.6 0.05 ${hue})`}>// project</text>
          <text x="428" y="100" fill="#ededed">fan-trailer</text>
          <text x="428" y="124" fill={`oklch(0.6 0.05 ${hue})`}>// course</text>
          <text x="428" y="144" fill="#ededed">Cinematography</text>
          <text x="428" y="168" fill={`oklch(0.6 0.05 ${hue})`}>// length</text>
          <text x="428" y="188" fill="#ededed">01:38</text>
          <text x="428" y="212" fill={`oklch(0.6 0.05 ${hue})`}>// status</text>
          <text x="428" y="232" fill={`oklch(0.85 0.18 ${hue})`}>NOT OFFICIAL</text>
        </g>
        {/* timeline tracks */}
        <g transform="translate(22 280)">
          <text x="0" y="-4" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={`oklch(0.6 0.05 ${hue})`}>V1</text>
          <rect x="0" y="0" width="656" height="22" rx="3" fill="oklch(0.18 0.05 220)" />
          {[0, 90, 160, 250, 360, 480, 560].map((x, i) => (
            <rect key={i} x={x} y="2" width={(i + 1) * 18} height="18" rx="2"
              fill={`oklch(${0.3 + (i % 3) * 0.05} 0.08 ${hue + (i * 25) % 360})`} />
          ))}
          <text x="0" y="42" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={`oklch(0.6 0.05 ${hue})`}>A1</text>
          <rect x="0" y="46" width="656" height="22" rx="3" fill={`oklch(0.18 0.05 ${hue})`} />
          {/* waveform */}
          <g fill={`oklch(0.7 0.15 ${hue})`}>
            {Array.from({ length: 80 }).map((_, i) => (
              <rect key={i} x={i * 8} y={47 + 5} width="3"
                height={Math.abs(Math.sin(i * 0.7) * 8 + Math.cos(i * 0.3) * 4) + 3} />
            ))}
          </g>
          {/* playhead */}
          <line x1="180" y1="-10" x2="180" y2="78" stroke={`oklch(0.95 0.18 ${hue})`} strokeWidth="1.2">
            <animate attributeName="x1" values="40;640;40" dur="8s" repeatCount="indefinite" />
            <animate attributeName="x2" values="40;640;40" dur="8s" repeatCount="indefinite" />
          </line>
        </g>
      </g>
    </svg>
  );
};

// ─── Konata — terminal session in front of waveform ─────────────────────────
Covers.konata = function KonataCover({ hue = 168 }) {
  return (
    <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <radialGradient id="kn-bg" cx="50%" cy="50%" r="75%">
          <stop offset="0%" stopColor={`oklch(0.22 0.10 ${hue})`} />
          <stop offset="100%" stopColor="#0a0a0b" />
        </radialGradient>
      </defs>
      <rect width="800" height="500" fill="url(#kn-bg)" />
      {/* dim waveform backdrop */}
      <g opacity="0.35">
        {Array.from({ length: 60 }).map((_, i) => {
          const x = 30 + i * 12.5;
          const base = Math.abs(Math.sin(i * 0.45)) * 30 + Math.abs(Math.sin(i * 0.18)) * 25 + 8;
          return (
            <rect key={i} x={x} y={250 - base / 2} width="6" height={base}
              rx="2" fill={`oklch(0.85 0.16 ${hue})`}>
              <animate attributeName="height"
                values={`${base};${base + 40};${base - 15};${base + 60};${base}`}
                dur={`${1.4 + (i % 5) * 0.2}s`} repeatCount="indefinite" />
              <animate attributeName="y"
                values={`${250 - base / 2};${250 - (base + 40) / 2};${250 - (base - 15) / 2};${250 - (base + 60) / 2};${250 - base / 2}`}
                dur={`${1.4 + (i % 5) * 0.2}s`} repeatCount="indefinite" />
            </rect>
          );
        })}
      </g>
      {/* terminal window — slightly tilted */}
      <g transform="translate(80 90)">
        <WindowChrome x={0} y={0} w={640} h={320} title="konata-bot ~ ❯ pm2 logs" hue={hue} />
        <g fontFamily="'JetBrains Mono', monospace" fontSize="12">
          {[
            ['[INFO] ', `oklch(0.85 0.16 145)`, ' Shard 0/3 ready', '#ededed'],
            ['[INFO] ', `oklch(0.85 0.16 145)`, ' Shard 1/3 ready', '#ededed'],
            ['[INFO] ', `oklch(0.85 0.16 145)`, ' Shard 2/3 ready', '#ededed'],
            ['[CMD]  ', `oklch(0.85 0.16 ${hue})`, ' /play  → ', '#ededed', 'spotify:trk:42', `oklch(0.85 0.18 80)`],
            ['[STRM] ', `oklch(0.85 0.16 ${hue})`, ' opus@48kHz · stereo', '#ededed'],
            ['[DB]   ', `oklch(0.85 0.16 50)`,    ' wrote queue → ', '#ededed', 'sqlite', `oklch(0.85 0.18 ${hue})`],
            ['[CMD]  ', `oklch(0.85 0.16 ${hue})`, ' /filter bassboost', '#ededed'],
            ['[OK]   ', `oklch(0.85 0.16 145)`, ' 4 servers · 12 voice chans', '#ededed'],
            ['❯ ',     `oklch(0.95 0.18 ${hue})`, '', '#ededed']
          ].map((row, i) => {
            const y = 70 + i * 24;
            return (
              <g key={i}>
                <text x="22" y={y} fill={row[1]}>{row[0]}</text>
                <text x={22 + row[0].length * 7.2} y={y} fill={row[3]}>{row[2]}</text>
                {row[4] && <text x={22 + row[0].length * 7.2 + row[2].length * 7.2} y={y} fill={row[5]}>{row[4]}</text>}
              </g>
            );
          })}
          <Caret x={36} y={250 - 12} hue={hue} />
        </g>
      </g>
    </svg>
  );
};

// ─── Snowy Parkour — level.json viewer with snowfall + yellow target ────────
Covers.snowy = function SnowyCover({ hue = 195 }) {
  return (
    <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id="sn-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={`oklch(0.30 0.06 ${hue})`} />
          <stop offset="100%" stopColor={`oklch(0.14 0.04 ${hue + 20})`} />
        </linearGradient>
      </defs>
      <rect width="800" height="500" fill="url(#sn-bg)" />
      {/* mountains */}
      <polygon points="0,360 140,220 260,310 380,180 520,290 650,200 800,330 800,500 0,500" fill={`oklch(0.32 0.04 ${hue})`} opacity="0.7" />
      <polygon points="0,420 110,300 200,380 320,250 430,360 560,280 700,370 800,330 800,500 0,500" fill={`oklch(0.55 0.05 ${hue})`} opacity="0.5" />
      {/* yellow target floating right */}
      <g transform="translate(660 130)">
        <rect x="-14" y="-14" width="28" height="28" fill="oklch(0.9 0.18 90)" stroke="oklch(0.7 0.18 80)" strokeWidth="1.5">
          <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="6s" repeatCount="indefinite" />
        </rect>
      </g>
      {/* snowfall */}
      {Array.from({ length: 35 }).map((_, i) => (
        <circle key={i} cx={(i * 37) % 800} cy={(i * 53) % 500} r={(i % 3) === 0 ? 1.4 : 0.9}
          fill="#ffffff" opacity={0.7}>
          <animate attributeName="cy" from={-10} to={510} dur={`${4 + (i % 5)}s`} repeatCount="indefinite" begin={`${(i % 7) * 0.5}s`} />
        </circle>
      ))}
      {/* JSON window */}
      <WindowChrome x={60} y={80} w={500} h={340} title="level.json" hue={hue} />
      <g transform="translate(60 80)" fontFamily="'JetBrains Mono', monospace" fontSize="13">
        {[
          { n: 1, txt: [['{', '#ededed']] },
          { n: 2, txt: [['  "objective"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['"yellow_box"', `oklch(0.8 0.16 145)`], [',', '#ededed']] },
          { n: 3, txt: [['  "timer"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['30', `oklch(0.85 0.18 90)`], [',', '#ededed']] },
          { n: 4, txt: [['  "spawn"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['[0, 0, 0]', `oklch(0.85 0.18 90)`], [',', '#ededed']] },
          { n: 5, txt: [['  "wind"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['"chilly"', `oklch(0.8 0.16 145)`], [',', '#ededed']] },
          { n: 6, txt: [['  "best"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['"00:18.4"', `oklch(0.8 0.16 145)`]] },
          { n: 7, txt: [['}', '#ededed']] },
          { n: 8, txt: [['// nyxoril.itch.io/snowy-parkour', `oklch(0.5 0.05 ${hue})`]] }
        ].map((line, i) => {
          let x = 50;
          return (
            <g key={i}>
              <text x="22" y={75 + i * 26} fill={`oklch(0.6 0.05 ${hue})`}>{line.n}</text>
              {line.txt.map((seg, j) => {
                const t = <text key={j} x={x} y={75 + i * 26} fill={seg[1]}>{seg[0]}</text>;
                x += seg[0].length * 7.6;
                return t;
              })}
            </g>
          );
        })}
      </g>
    </svg>
  );
};

// ─── Three.js Porsche — scene init code over wireframe car ──────────────────
Covers.porsche = function PorscheCover({ hue = 12 }) {
  return (
    <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id="pr-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={`oklch(0.18 0.08 ${hue})`} />
          <stop offset="100%" stopColor="#0a0a0b" />
        </linearGradient>
      </defs>
      <rect width="800" height="500" fill="url(#pr-bg)" />
      {/* perspective floor */}
      <g stroke={`oklch(0.55 0.12 ${hue})`} strokeWidth="0.5" opacity="0.35">
        {Array.from({ length: 14 }).map((_, i) => {
          const t = (i + 1) / 14;
          const y = 340 + Math.pow(t, 2) * 160;
          return <line key={i} x1="0" y1={y} x2="800" y2={y} opacity={0.3 + t * 0.5} />;
        })}
        {Array.from({ length: 17 }).map((_, i) => {
          const x = (i - 8) * 70;
          return <line key={`v${i}`} x1={400 + x * 0.05} y1="340" x2={400 + x} y2="500" />;
        })}
      </g>
      {/* car silhouette (lower-right, dim) */}
      <g transform="translate(560 360)" opacity="0.5">
        <path d="M -120 -8 Q -105 -34 -60 -38 L -33 -50 Q 0 -57 40 -50 L 73 -38 Q 105 -34 120 -8 L 120 17 L -120 17 Z"
          fill="none" stroke={`oklch(0.9 0.18 ${hue})`} strokeWidth="1.2" />
        <circle cx="-73" cy="14" r="15" fill="none" stroke={`oklch(0.9 0.18 ${hue})`} strokeWidth="1.2" />
        <circle cx="73" cy="14" r="15" fill="none" stroke={`oklch(0.9 0.18 ${hue})`} strokeWidth="1.2" />
      </g>
      {/* code window */}
      <WindowChrome x={50} y={70} w={560} h={340} title="porsche.js — three.js" hue={hue} />
      <g transform="translate(50 70)" fontFamily="'JetBrains Mono', monospace" fontSize="13">
        {[
          { n: 1, txt: [['import ', `oklch(0.85 0.18 ${hue})`], ['* ', '#ededed'], ['as ', `oklch(0.85 0.18 ${hue})`], ['THREE ', '#ededed'], ['from ', `oklch(0.85 0.18 ${hue})`], ["'three'", 'oklch(0.8 0.16 145)']] },
          { n: 2, txt: [['', '#ededed']] },
          { n: 3, txt: [['const ', `oklch(0.85 0.18 ${hue})`], ['scene ', '#ededed'], ['= ', `oklch(0.85 0.18 ${hue})`], ['new ', `oklch(0.85 0.18 ${hue})`], ['THREE.Scene', 'oklch(0.85 0.16 50)'], ['()', '#ededed']] },
          { n: 4, txt: [['const ', `oklch(0.85 0.18 ${hue})`], ['renderer ', '#ededed'], ['= ', `oklch(0.85 0.18 ${hue})`], ['new ', `oklch(0.85 0.18 ${hue})`], ['WebGLRenderer', 'oklch(0.85 0.16 50)'], ['({ ', '#ededed'], ['antialias', 'oklch(0.85 0.16 50)'], [': ', '#ededed'], ['true ', `oklch(0.85 0.18 ${hue})`], ['})', '#ededed']] },
          { n: 5, txt: [['', '#ededed']] },
          { n: 6, txt: [['loader.', '#ededed'], ['load', 'oklch(0.85 0.16 50)'], ["('porsche.glb', ", '#ededed'], ['gltf ', '#ededed'], ['=> ', `oklch(0.85 0.18 ${hue})`], ['{', '#ededed']] },
          { n: 7, txt: [['  scene.', '#ededed'], ['add', 'oklch(0.85 0.16 50)'], ['(gltf.scene)', '#ededed']] },
          { n: 8, txt: [['  scene.environment ', '#ededed'], ['= ', `oklch(0.85 0.18 ${hue})`], ['hdr', '#ededed']] },
          { n: 9, txt: [['})', '#ededed']] },
          { n: 10, txt: [['', '#ededed']] },
          { n: 11, txt: [['// 🚗 → orbit · HDR · custom shaders', `oklch(0.5 0.05 ${hue})`]] }
        ].map((line, i) => {
          let x = 50;
          return (
            <g key={i}>
              <text x="22" y={75 + i * 23} fill={`oklch(0.6 0.05 ${hue})`}>{line.n}</text>
              {line.txt.map((seg, j) => {
                const t = <text key={j} x={x} y={75 + i * 23} fill={seg[1]}>{seg[0]}</text>;
                x += seg[0].length * 7.4;
                return t;
              })}
            </g>
          );
        })}
      </g>
    </svg>
  );
};

// ─── This Portfolio — original code window (kept) ───────────────────────────
Covers.portfolio = function PortfolioCover({ hue = 285 }) {
  return (
    <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id="pf-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={`oklch(0.22 0.12 ${hue})`} />
          <stop offset="100%" stopColor={`oklch(0.10 0.06 ${hue + 60})`} />
        </linearGradient>
      </defs>
      <rect width="800" height="500" fill="url(#pf-bg)" />
      <g stroke={`oklch(0.6 0.12 ${hue})`} strokeWidth="0.5" opacity="0.3">
        {Array.from({ length: 18 }).map((_, i) => (
          <line key={i} x1={i * 50} y1="0" x2={i * 50} y2="500" />
        ))}
        {Array.from({ length: 11 }).map((_, i) => (
          <line key={`h${i}`} x1="0" y1={i * 50} x2="800" y2={i * 50} />
        ))}
      </g>
      <WindowChrome x={100} y={100} w={600} h={300} title="portfolio.jsx" hue={hue} />
      <g transform="translate(100 100)" fontFamily="'JetBrains Mono', monospace" fontSize="13">
        <text x="22" y="75" fill={`oklch(0.6 0.05 ${hue})`}>1</text>
        <text x="50" y="75" fill={`oklch(0.85 0.18 ${hue})`}>const</text>
        <text x="100" y="75" fill="#ededed"> Cedrick </text>
        <text x="175" y="75" fill={`oklch(0.85 0.18 ${hue})`}>= </text>
        <text x="200" y="75" fill="oklch(0.8 0.16 145)">() =&gt; (</text>
        <text x="22" y="105" fill={`oklch(0.6 0.05 ${hue})`}>2</text>
        <text x="60" y="105" fill={`oklch(0.85 0.16 25)`}>&lt;Portfolio</text>
        <text x="22" y="135" fill={`oklch(0.6 0.05 ${hue})`}>3</text>
        <text x="80" y="135" fill="oklch(0.85 0.16 60)">name=</text>
        <text x="130" y="135" fill="oklch(0.82 0.15 165)">"Cédrick"</text>
        <text x="22" y="165" fill={`oklch(0.6 0.05 ${hue})`}>4</text>
        <text x="80" y="165" fill="oklch(0.85 0.16 60)">alias=</text>
        <text x="135" y="165" fill="oklch(0.82 0.15 165)">"Nyxoril"</text>
        <text x="22" y="195" fill={`oklch(0.6 0.05 ${hue})`}>5</text>
        <text x="80" y="195" fill="oklch(0.85 0.16 60)">role=</text>
        <text x="125" y="195" fill="oklch(0.82 0.15 165)">"Game Dev"</text>
        <text x="22" y="225" fill={`oklch(0.6 0.05 ${hue})`}>6</text>
        <text x="60" y="225" fill={`oklch(0.85 0.16 25)`}>/&gt;</text>
        <text x="22" y="255" fill={`oklch(0.6 0.05 ${hue})`}>7</text>
        <text x="50" y="255" fill="oklch(0.8 0.16 145)">);</text>
        <text x="22" y="285" fill={`oklch(0.6 0.05 ${hue})`}>8</text>
        <text x="50" y="285" fill={`oklch(0.5 0.05 ${hue})`}>// shipped → you're reading it</text>
        <Caret x={270} y="232" hue={hue} />
      </g>
      <g fontFamily="'JetBrains Mono', monospace" fontSize="80" fill={`oklch(0.7 0.18 ${hue})`} opacity="0.18">
        <text x="20" y="430">&#123;</text>
        <text x="720" y="430">&#125;</text>
      </g>
    </svg>
  );
};

window.Covers = Covers;
