/* Tidewell — editorial product illustrations.
   Style: flat geometric, layered, deep aqua/navy palette + cream highlight,
   subtle texture, mono-labelled. Designed to feel like a brand system,
   not stock clip-art. */

const ILLUS_BG = "var(--illus-bg, #1f3a52)";
const ILLUS_WATER = "var(--illus-water, #4a8fb8)";
const ILLUS_WATER_DEEP = "var(--illus-water-deep, #2a5d7e)";
const ILLUS_CREAM = "var(--illus-cream, #f4ede0)";
const ILLUS_ACCENT = "var(--illus-accent, #d9a663)";
const ILLUS_INK = "var(--illus-ink, #0f2030)";

/* shared decorations */
const ScanLines = ({ opacity = 0.06 }) => (
  <pattern id="scan" patternUnits="userSpaceOnUse" width="6" height="6">
    <path d="M0 6 L6 0" stroke="#fff" strokeWidth="0.5" opacity={opacity} />
  </pattern>
);

const Caustics = ({ id = "caustics" }) => (
  <radialGradient id={id} cx="30%" cy="20%" r="80%">
    <stop offset="0%" stopColor="#fff" stopOpacity="0.25" />
    <stop offset="60%" stopColor="#fff" stopOpacity="0" />
  </radialGradient>
);

const CornerTag = ({ children }) => (
  <g style={{ fontFamily: "var(--mono)", fontSize: 10, fill: "#fff", opacity: 0.55, letterSpacing: 1.5 }}>
    <text x="20" y="380" textTransform="uppercase">{children}</text>
  </g>
);

/* ─────────── 01 Automatic Pool Cover — top-down ─────────── */
function IllusAutoCover() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <ScanLines />
        <Caustics />
        <linearGradient id="acWater" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5ea0c8" />
          <stop offset="100%" stopColor="#2a5d7e" />
        </linearGradient>
        <linearGradient id="acCover" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#1a4060" />
          <stop offset="50%" stopColor="#2a5070" />
          <stop offset="100%" stopColor="#1a4060" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      {/* deck pattern */}
      <g opacity="0.5">
        {[...Array(8)].map((_, i) => (
          <line key={i} x1="0" y1={i * 50} x2="400" y2={i * 50} stroke="#0a1a28" strokeWidth="0.5" />
        ))}
      </g>
      {/* pool */}
      <rect x="40" y="50" width="320" height="300" rx="8" fill={ILLUS_INK} />
      <rect x="46" y="56" width="308" height="288" rx="6" fill="url(#acWater)" />
      <rect x="46" y="56" width="308" height="288" rx="6" fill="url(#caustics)" />
      <rect x="46" y="56" width="308" height="288" rx="6" fill="url(#scan)" />
      {/* cover halfway across */}
      <rect x="46" y="56" width="180" height="288" rx="6" fill="url(#acCover)" />
      {/* cover slats */}
      <g opacity="0.6">
        {[...Array(14)].map((_, i) => (
          <line key={i} x1={50 + i * 13} y1="58" x2={50 + i * 13} y2="342"
                stroke="#0a1a28" strokeWidth="0.6" />
        ))}
      </g>
      {/* leading edge */}
      <rect x="222" y="56" width="6" height="288" fill={ILLUS_CREAM} opacity="0.95" />
      {/* tracks */}
      <line x1="46" y1="60" x2="354" y2="60" stroke={ILLUS_CREAM} strokeWidth="2" />
      <line x1="46" y1="340" x2="354" y2="340" stroke={ILLUS_CREAM} strokeWidth="2" />
      {/* roller housing */}
      <rect x="42" y="50" width="14" height="300" rx="3" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="0.5" />
      <circle cx="49" cy="200" r="3" fill={ILLUS_ACCENT} />
      {/* ripple at open end */}
      <g stroke={ILLUS_CREAM} strokeWidth="0.5" fill="none" opacity="0.4">
        <path d="M260 100 Q280 110 300 100" />
        <path d="M260 200 Q300 215 340 200" />
        <path d="M270 280 Q300 290 330 280" />
      </g>
      <CornerTag>01 · Auto Cover · Track-driven</CornerTag>
    </svg>
  );
}

/* ─────────── 02 Manual Pool Cover — isometric reel ─────────── */
function IllusManualCover() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="mcReel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5ea0c8" />
          <stop offset="100%" stopColor="#1a4060" />
        </linearGradient>
        <linearGradient id="mcWater" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a7da0" />
          <stop offset="100%" stopColor="#1a4060" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      {/* ground */}
      <ellipse cx="200" cy="340" rx="170" ry="14" fill="#0a1a28" opacity="0.6" />
      {/* pool */}
      <rect x="50" y="250" width="300" height="90" rx="4" fill={ILLUS_INK} />
      <rect x="55" y="255" width="290" height="80" rx="3" fill="url(#mcWater)" />
      {/* reel stand */}
      <g>
        {/* legs */}
        <path d="M80 320 L100 200 L300 200 L320 320" fill="none" stroke={ILLUS_CREAM} strokeWidth="3" strokeLinecap="round" />
        <line x1="80" y1="320" x2="100" y2="200" stroke={ILLUS_CREAM} strokeWidth="3" strokeLinecap="round" />
        {/* reel cylinder */}
        <ellipse cx="100" cy="200" rx="14" ry="22" fill="url(#mcReel)" stroke={ILLUS_CREAM} strokeWidth="2" />
        <ellipse cx="300" cy="200" rx="14" ry="22" fill="url(#mcReel)" stroke={ILLUS_CREAM} strokeWidth="2" />
        <rect x="100" y="178" width="200" height="44" fill="url(#mcReel)" />
        <line x1="100" y1="178" x2="300" y2="178" stroke={ILLUS_CREAM} strokeWidth="2" />
        <line x1="100" y1="222" x2="300" y2="222" stroke={ILLUS_CREAM} strokeWidth="2" />
        {/* wound material rings */}
        <g opacity="0.5">
          {[...Array(20)].map((_, i) => (
            <line key={i} x1={108 + i * 9} y1="178" x2={108 + i * 9} y2="222" stroke="#0a1a28" strokeWidth="0.6" />
          ))}
        </g>
        {/* crank */}
        <circle cx="55" cy="200" r="10" fill={ILLUS_ACCENT} stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <line x1="55" y1="200" x2="80" y2="200" stroke={ILLUS_CREAM} strokeWidth="3" />
        <circle cx="345" cy="200" r="6" fill={ILLUS_CREAM} />
      </g>
      <CornerTag>02 · Manual Cover · Reel-mounted</CornerTag>
    </svg>
  );
}

/* ─────────── 03 Solar Heater — collector panel ─────────── */
function IllusSolar() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="solBg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a6890" />
          <stop offset="100%" stopColor="#1f3a52" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill="url(#solBg)" />
      {/* sun */}
      <circle cx="320" cy="80" r="34" fill={ILLUS_ACCENT} />
      <circle cx="320" cy="80" r="50" fill={ILLUS_ACCENT} opacity="0.18" />
      <circle cx="320" cy="80" r="70" fill={ILLUS_ACCENT} opacity="0.08" />
      {/* rays */}
      <g stroke={ILLUS_ACCENT} strokeWidth="1.5" opacity="0.7">
        <line x1="320" y1="20" x2="320" y2="32" />
        <line x1="260" y1="80" x2="272" y2="80" />
        <line x1="278" y1="38" x2="287" y2="47" />
        <line x1="278" y1="122" x2="287" y2="113" />
      </g>
      {/* roof tilted panel — isometric */}
      <g transform="translate(60 130) skewY(-15)">
        <rect width="280" height="180" fill={ILLUS_INK} />
        <rect x="4" y="4" width="272" height="172" fill="#1a3548" />
        {/* tubes */}
        <g stroke={ILLUS_WATER} strokeWidth="3">
          {[...Array(20)].map((_, i) => (
            <line key={i} x1={14 + i * 13} y1="14" x2={14 + i * 13} y2="166" />
          ))}
        </g>
        {/* manifolds */}
        <rect x="4" y="4" width="272" height="12" fill={ILLUS_CREAM} />
        <rect x="4" y="164" width="272" height="12" fill={ILLUS_CREAM} />
        {/* corner accent */}
        <rect x="4" y="4" width="40" height="12" fill={ILLUS_ACCENT} />
      </g>
      {/* flow indicators */}
      <g fill={ILLUS_CREAM} opacity="0.85" style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: 1 }}>
        <text x="60" y="120">IN ▾</text>
        <text x="310" y="330">▴ OUT</text>
      </g>
      <CornerTag>03 · Solar Heater · EPDM</CornerTag>
    </svg>
  );
}

/* ─────────── 04 Saltwater Chlorinator — cell cylinder ─────────── */
function IllusSalt() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="sCell" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#a0c8df" />
          <stop offset="100%" stopColor="#4a8fb8" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      <line x1="0" y1="320" x2="400" y2="320" stroke="#0a1a28" strokeWidth="1" />
      {/* controller box */}
      <rect x="40" y="130" width="100" height="160" rx="6" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1" />
      <rect x="50" y="142" width="80" height="40" fill={ILLUS_WATER_DEEP} />
      {/* screen lines */}
      <g stroke={ILLUS_ACCENT} strokeWidth="2">
        <line x1="56" y1="155" x2="86" y2="155" />
        <line x1="56" y1="165" x2="74" y2="165" />
        <line x1="56" y1="175" x2="92" y2="175" />
      </g>
      {/* buttons */}
      <g fill={ILLUS_CREAM}>
        <circle cx="62" cy="210" r="6" />
        <circle cx="84" cy="210" r="6" />
        <circle cx="106" cy="210" r="6" />
        <rect x="56" y="240" width="68" height="6" rx="3" />
        <rect x="56" y="256" width="50" height="6" rx="3" />
      </g>
      {/* pipe in */}
      <rect x="140" y="195" width="40" height="30" fill={ILLUS_CREAM} opacity="0.4" />
      <rect x="140" y="200" width="40" height="20" fill={ILLUS_CREAM} />
      {/* cell tube */}
      <g>
        <ellipse cx="180" cy="210" rx="14" ry="50" fill="url(#sCell)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <rect x="180" y="160" width="100" height="100" fill="url(#sCell)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <ellipse cx="280" cy="210" rx="14" ry="50" fill="url(#sCell)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        {/* plates inside */}
        <g stroke="#0a1a28" strokeWidth="1.2" opacity="0.45">
          {[...Array(11)].map((_, i) => (
            <line key={i} x1={188 + i * 8} y1="170" x2={188 + i * 8} y2="250" />
          ))}
        </g>
        {/* bubbles */}
        <g fill="#fff" opacity="0.75">
          <circle cx="200" cy="190" r="3" />
          <circle cx="220" cy="180" r="2" />
          <circle cx="240" cy="195" r="3" />
          <circle cx="225" cy="225" r="2" />
          <circle cx="255" cy="210" r="3" />
          <circle cx="210" cy="240" r="2.5" />
        </g>
      </g>
      {/* pipe out */}
      <rect x="280" y="200" width="40" height="20" fill={ILLUS_CREAM} />
      <rect x="320" y="180" width="20" height="60" fill={ILLUS_CREAM} />
      <CornerTag>04 · Salt Cell · 40 g/h</CornerTag>
    </svg>
  );
}

/* ─────────── 05 Solar Shower ─────────── */
function IllusShower() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="shTank" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5a7a96" />
          <stop offset="100%" stopColor="#2a3f54" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      {/* sun in corner */}
      <circle cx="60" cy="60" r="22" fill={ILLUS_ACCENT} opacity="0.85" />
      <circle cx="60" cy="60" r="40" fill={ILLUS_ACCENT} opacity="0.12" />
      {/* ground line */}
      <rect x="0" y="340" width="400" height="60" fill="#0a1a28" />
      <line x1="0" y1="340" x2="400" y2="340" stroke={ILLUS_CREAM} strokeWidth="1" opacity="0.5" />
      {/* shower base */}
      <rect x="180" y="334" width="40" height="6" fill={ILLUS_CREAM} />
      {/* pole */}
      <rect x="196" y="120" width="8" height="220" fill={ILLUS_CREAM} />
      {/* tank — long vertical solar */}
      <rect x="160" y="80" width="80" height="60" rx="6" fill="url(#shTank)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
      <g stroke={ILLUS_INK} strokeWidth="0.8" opacity="0.5">
        {[...Array(6)].map((_, i) => (
          <line key={i} x1={170 + i * 12} y1="86" x2={170 + i * 12} y2="134" />
        ))}
      </g>
      {/* shower head */}
      <rect x="170" y="146" width="60" height="14" rx="3" fill={ILLUS_CREAM} />
      <rect x="178" y="160" width="44" height="6" fill={ILLUS_ACCENT} />
      {/* water stream */}
      <g stroke={ILLUS_WATER} strokeWidth="1.5" opacity="0.7">
        {[...Array(7)].map((_, i) => (
          <line key={i} x1={184 + i * 6} y1="172" x2={180 + i * 6} y2="320" strokeDasharray="2 4" />
        ))}
      </g>
      {/* puddle */}
      <ellipse cx="200" cy="335" rx="40" ry="4" fill={ILLUS_WATER} opacity="0.6" />
      {/* tap */}
      <circle cx="200" cy="200" r="9" fill={ILLUS_ACCENT} stroke={ILLUS_CREAM} strokeWidth="1.5" />
      <line x1="200" y1="200" x2="218" y2="190" stroke={ILLUS_CREAM} strokeWidth="2" strokeLinecap="round" />
      <CornerTag>05 · Solar Shower · 9 gal</CornerTag>
    </svg>
  );
}

/* ─────────── 06 Heat Pump — boxy unit + fan ─────────── */
function IllusHeatPump() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hpBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a5670" />
          <stop offset="100%" stopColor="#1a2c40" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      {/* ground */}
      <ellipse cx="200" cy="350" rx="160" ry="10" fill="#0a1a28" opacity="0.7" />
      {/* concrete pad */}
      <rect x="50" y="338" width="300" height="14" fill={ILLUS_CREAM} opacity="0.85" />
      <line x1="50" y1="338" x2="350" y2="338" stroke={ILLUS_INK} strokeWidth="0.5" />
      {/* body */}
      <rect x="80" y="100" width="240" height="238" rx="6" fill="url(#hpBody)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
      {/* top vent grille */}
      <rect x="90" y="110" width="220" height="20" fill={ILLUS_INK} />
      <g stroke={ILLUS_CREAM} strokeWidth="0.6" opacity="0.6">
        {[...Array(20)].map((_, i) => (
          <line key={i} x1={94 + i * 11} y1="113" x2={94 + i * 11} y2="127" />
        ))}
      </g>
      {/* fan circle */}
      <circle cx="200" cy="225" r="78" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1.5" />
      <circle cx="200" cy="225" r="68" fill="none" stroke={ILLUS_CREAM} strokeWidth="0.5" opacity="0.4" />
      {/* fan blades */}
      <g transform="translate(200 225)">
        {[0, 72, 144, 216, 288].map(a => (
          <path key={a}
            d="M0 0 Q -8 -30 -22 -56 Q 4 -42 8 -10 Z"
            transform={`rotate(${a})`}
            fill={ILLUS_WATER}
            stroke={ILLUS_CREAM}
            strokeWidth="0.6"
            opacity="0.92"
          />
        ))}
        <circle r="8" fill={ILLUS_ACCENT} stroke={ILLUS_CREAM} strokeWidth="1" />
      </g>
      {/* side louvers */}
      <g stroke={ILLUS_CREAM} strokeWidth="0.6" opacity="0.4">
        {[...Array(8)].map((_, i) => (
          <line key={i} x1="90" y1={140 + i * 7} x2="120" y2={140 + i * 7} />
        ))}
      </g>
      {/* badge */}
      <rect x="160" y="310" width="80" height="14" rx="2" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="0.5" />
      <text x="200" y="320" fill={ILLUS_CREAM} textAnchor="middle"
            style={{ fontFamily: "var(--mono)", fontSize: 8, letterSpacing: 2 }}>TIDEWELL INVERTER</text>
      <CornerTag>06 · Heat Pump · COP 14</CornerTag>
    </svg>
  );
}

/* ─────────── 07 Pool Light — submerged glow ─────────── */
function IllusLight() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="lGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.9" />
          <stop offset="25%" stopColor="#cfe6f3" stopOpacity="0.7" />
          <stop offset="100%" stopColor="#5ea0c8" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="lWater" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2a5d7e" />
          <stop offset="100%" stopColor="#0f2a40" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill="url(#lWater)" />
      {/* caustics */}
      <g opacity="0.18" stroke="#fff" strokeWidth="0.6" fill="none">
        <path d="M0 80 Q 100 60 200 90 T 400 90" />
        <path d="M0 150 Q 80 130 180 160 T 400 160" />
        <path d="M0 240 Q 120 220 240 240 T 400 240" />
        <path d="M0 320 Q 80 300 180 330 T 400 330" />
      </g>
      {/* big glow */}
      <circle cx="200" cy="200" r="180" fill="url(#lGlow)" />
      {/* wall niche */}
      <ellipse cx="200" cy="200" rx="50" ry="50" fill={ILLUS_INK} />
      <ellipse cx="200" cy="200" rx="44" ry="44" fill={ILLUS_CREAM} opacity="0.95" />
      <ellipse cx="200" cy="200" rx="36" ry="36" fill="#fff" />
      {/* lens segments */}
      <g stroke="#a0c8df" strokeWidth="0.6" opacity="0.7" fill="none">
        <circle cx="200" cy="200" r="32" />
        <circle cx="200" cy="200" r="24" />
        <circle cx="200" cy="200" r="16" />
        <circle cx="200" cy="200" r="8" />
      </g>
      {/* mounting screws */}
      <g fill={ILLUS_INK}>
        <circle cx="200" cy="158" r="2" />
        <circle cx="200" cy="242" r="2" />
        <circle cx="158" cy="200" r="2" />
        <circle cx="242" cy="200" r="2" />
      </g>
      {/* particles in water */}
      <g fill="#fff" opacity="0.7">
        <circle cx="80" cy="120" r="1.5" />
        <circle cx="320" cy="100" r="1" />
        <circle cx="350" cy="280" r="1.5" />
        <circle cx="60" cy="300" r="1" />
        <circle cx="120" cy="60" r="1" />
        <circle cx="300" cy="340" r="1" />
      </g>
      <CornerTag>07 · Pool Light · 30 W RGBW</CornerTag>
    </svg>
  );
}

/* ─────────── 08 Filter & Pump ─────────── */
function IllusFilter() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="fTank" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5ea0c8" />
          <stop offset="100%" stopColor="#1a4060" />
        </linearGradient>
        <linearGradient id="fPump" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#4a5d70" />
          <stop offset="100%" stopColor="#1a2c40" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      <rect x="0" y="340" width="400" height="60" fill="#0a1a28" />
      <line x1="0" y1="340" x2="400" y2="340" stroke={ILLUS_CREAM} strokeWidth="0.5" opacity="0.5" />
      {/* filter tank (right) */}
      <g>
        <ellipse cx="270" cy="120" rx="60" ry="14" fill="url(#fTank)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <rect x="210" y="120" width="120" height="200" fill="url(#fTank)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <ellipse cx="270" cy="320" rx="60" ry="14" fill="url(#fTank)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        {/* dome top knob */}
        <circle cx="270" cy="100" r="10" fill={ILLUS_ACCENT} stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <rect x="266" y="80" width="8" height="14" fill={ILLUS_CREAM} />
        {/* multiport */}
        <rect x="246" y="142" width="48" height="34" rx="3" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1" />
        <circle cx="270" cy="159" r="10" fill={ILLUS_CREAM} />
        <line x1="270" y1="151" x2="270" y2="167" stroke={ILLUS_ACCENT} strokeWidth="2" />
        {/* highlight stripe */}
        <rect x="220" y="130" width="6" height="190" fill="#fff" opacity="0.2" />
      </g>
      {/* pump (left) */}
      <g>
        <rect x="60" y="240" width="140" height="80" rx="6" fill="url(#fPump)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <circle cx="100" cy="280" r="26" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1" />
        {/* strainer basket lid */}
        <circle cx="100" cy="220" r="18" fill={ILLUS_CREAM} stroke={ILLUS_INK} strokeWidth="1" />
        <circle cx="100" cy="220" r="12" fill="none" stroke={ILLUS_INK} strokeWidth="0.5" opacity="0.4" />
        {/* impeller hint */}
        <g transform="translate(100 280)" stroke={ILLUS_CREAM} strokeWidth="1" opacity="0.7">
          <circle r="18" fill="none" />
          {[0, 60, 120, 180, 240, 300].map(a => (
            <line key={a} x1="0" y1="0" x2={Math.cos(a * Math.PI / 180) * 18} y2={Math.sin(a * Math.PI / 180) * 18} />
          ))}
        </g>
        {/* motor housing right */}
        <rect x="140" y="252" width="50" height="56" rx="4" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="0.8" />
        <g stroke={ILLUS_CREAM} strokeWidth="0.5" opacity="0.5">
          {[...Array(7)].map((_, i) => (
            <line key={i} x1="146" y1={258 + i * 7} x2="184" y2={258 + i * 7} />
          ))}
        </g>
      </g>
      {/* connecting pipe */}
      <path d="M200 280 Q 210 250 230 240 L 240 240 Q 250 240 250 250 L 250 320 Q 250 330 240 330"
            fill="none" stroke={ILLUS_CREAM} strokeWidth="6" strokeLinecap="round" />
      <CornerTag>08 · Filter & Pump · VS</CornerTag>
    </svg>
  );
}

/* ─────────── 09 Robotic Cleaner — top-down pool ─────────── */
function IllusCleaner() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="cWater" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#4a8fb8" />
          <stop offset="100%" stopColor="#1a4060" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      {/* pool */}
      <rect x="30" y="50" width="340" height="300" rx="10" fill={ILLUS_INK} />
      <rect x="36" y="56" width="328" height="288" rx="6" fill="url(#cWater)" />
      <rect x="36" y="56" width="328" height="288" rx="6" fill="url(#scan)" />
      {/* path traced by cleaner */}
      <path d="M 100 100 Q 150 80 200 110 T 320 130 Q 340 200 280 220 T 130 250 Q 80 280 200 310"
            fill="none" stroke={ILLUS_CREAM} strokeWidth="1" strokeDasharray="3 4" opacity="0.55" />
      {/* debris dots */}
      <g fill="#0a1a28" opacity="0.5">
        <circle cx="120" cy="180" r="1.5" />
        <circle cx="150" cy="220" r="1" />
        <circle cx="260" cy="160" r="1.5" />
        <circle cx="300" cy="280" r="1" />
        <circle cx="200" cy="250" r="1.2" />
      </g>
      {/* the cleaner */}
      <g transform="translate(200 310)">
        <rect x="-32" y="-22" width="64" height="44" rx="10" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1.5" />
        {/* top window */}
        <rect x="-22" y="-14" width="44" height="14" rx="4" fill={ILLUS_ACCENT} opacity="0.85" />
        {/* tracks */}
        <rect x="-36" y="-18" width="6" height="36" rx="3" fill={ILLUS_CREAM} />
        <rect x="30" y="-18" width="6" height="36" rx="3" fill={ILLUS_CREAM} />
        {/* brush */}
        <rect x="-30" y="20" width="60" height="6" rx="2" fill={ILLUS_ACCENT} />
        {/* cord */}
        <path d="M 0 -22 Q -40 -80 -80 -130" fill="none" stroke={ILLUS_CREAM} strokeWidth="1.2" opacity="0.7" />
      </g>
      {/* ripples around it */}
      <g stroke="#fff" strokeWidth="0.6" fill="none" opacity="0.4">
        <ellipse cx="200" cy="310" rx="50" ry="12" />
        <ellipse cx="200" cy="310" rx="68" ry="16" />
      </g>
      <CornerTag>09 · Robotic Cleaner · Cordless</CornerTag>
    </svg>
  );
}

/* ─────────── 10 Pool Fitting — close-up assembly ─────────── */
function IllusFitting() {
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ftBody" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#3a5670" />
          <stop offset="50%" stopColor="#5a7a96" />
          <stop offset="100%" stopColor="#1a2c40" />
        </linearGradient>
      </defs>
      <rect width="400" height="400" fill={ILLUS_BG} />
      {/* exploded view */}
      {/* left pipe */}
      <g>
        <rect x="30" y="170" width="80" height="60" fill="url(#ftBody)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <ellipse cx="30" cy="200" rx="6" ry="30" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <ellipse cx="110" cy="200" rx="6" ry="30" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1.5" />
      </g>
      {/* gasket */}
      <g transform="translate(140 200)">
        <ellipse rx="12" ry="34" fill={ILLUS_ACCENT} />
        <ellipse rx="6" ry="22" fill={ILLUS_INK} />
      </g>
      {/* center body */}
      <g>
        <rect x="170" y="160" width="80" height="80" rx="2" fill="url(#ftBody)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        {/* hex face */}
        <polygon points="180,200 200,170 240,170 250,200 240,230 200,230" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1" />
        <circle cx="210" cy="200" r="14" fill={ILLUS_CREAM} stroke={ILLUS_INK} strokeWidth="1" />
        <circle cx="210" cy="200" r="6" fill={ILLUS_INK} />
        {/* bolts */}
        <g fill={ILLUS_CREAM}>
          <circle cx="178" cy="168" r="3" />
          <circle cx="242" cy="168" r="3" />
          <circle cx="178" cy="232" r="3" />
          <circle cx="242" cy="232" r="3" />
        </g>
      </g>
      {/* gasket right */}
      <g transform="translate(280 200)">
        <ellipse rx="12" ry="34" fill={ILLUS_ACCENT} />
        <ellipse rx="6" ry="22" fill={ILLUS_INK} />
      </g>
      {/* right pipe */}
      <g>
        <rect x="310" y="170" width="60" height="60" fill="url(#ftBody)" stroke={ILLUS_CREAM} strokeWidth="1.5" />
        <ellipse cx="370" cy="200" rx="6" ry="30" fill={ILLUS_INK} stroke={ILLUS_CREAM} strokeWidth="1.5" />
      </g>
      {/* construction lines */}
      <g stroke={ILLUS_CREAM} strokeWidth="0.5" strokeDasharray="2 4" opacity="0.5">
        <line x1="50" y1="200" x2="370" y2="200" />
        <line x1="140" y1="100" x2="140" y2="300" />
        <line x1="210" y1="100" x2="210" y2="300" />
        <line x1="280" y1="100" x2="280" y2="300" />
      </g>
      {/* annotations */}
      <g style={{ fontFamily: "var(--mono)", fontSize: 8, fill: "#fff", opacity: 0.6, letterSpacing: 1 }}>
        <text x="50" y="130">PIPE · 1.5″</text>
        <text x="125" y="290">O-RING</text>
        <text x="180" y="130">UNION BODY</text>
        <text x="270" y="290">O-RING</text>
      </g>
      <CornerTag>10 · Pool Fittings · Series-7</CornerTag>
    </svg>
  );
}

/* ─────────── HERO — beach-meets-pool editorial scene ─────────── */
function IllusHero() {
  return (
    <svg viewBox="0 0 600 750" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hSky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#e8d8b8" />
          <stop offset="60%" stopColor="#d9a663" />
          <stop offset="100%" stopColor="#a05a3a" />
        </linearGradient>
        <linearGradient id="hWater" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5ea0c8" />
          <stop offset="60%" stopColor="#2a5d7e" />
          <stop offset="100%" stopColor="#0f2a40" />
        </linearGradient>
        <linearGradient id="hDeck" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#f4ede0" />
          <stop offset="100%" stopColor="#ddd0bc" />
        </linearGradient>
        <radialGradient id="hSun" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fff" stopOpacity="1" />
          <stop offset="60%" stopColor="#ffd994" stopOpacity="0.85" />
          <stop offset="100%" stopColor="#d9a663" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* sky */}
      <rect width="600" height="320" fill="url(#hSky)" />
      {/* sun glow */}
      <circle cx="420" cy="180" r="160" fill="url(#hSun)" />
      <circle cx="420" cy="180" r="42" fill="#fff" opacity="0.95" />

      {/* horizon mountains */}
      <path d="M0 280 L80 230 L150 260 L220 220 L300 245 L380 215 L470 250 L560 230 L600 240 L600 320 L0 320 Z"
            fill="#1f3a52" opacity="0.6" />
      <path d="M0 300 L60 270 L130 290 L200 265 L290 285 L370 270 L460 290 L560 275 L600 285 L600 320 L0 320 Z"
            fill="#0f2a40" opacity="0.85" />

      {/* deck top edge */}
      <rect y="316" width="600" height="40" fill="url(#hDeck)" />
      {/* deck planks */}
      <g stroke="#bca685" strokeWidth="0.6" opacity="0.5">
        {[...Array(20)].map((_, i) => (
          <line key={i} x1={i * 32} y1="316" x2={i * 32} y2="356" />
        ))}
      </g>

      {/* pool — infinity edge */}
      <rect y="356" width="600" height="394" fill="url(#hWater)" />
      {/* infinity-edge spillway */}
      <rect y="356" width="600" height="6" fill="#fff" opacity="0.7" />
      {/* caustics */}
      <g stroke="#fff" strokeWidth="0.6" fill="none" opacity="0.25">
        <path d="M0 420 Q100 405 200 425 T 400 420 T 600 425" />
        <path d="M0 480 Q120 465 220 485 T 420 480 T 600 485" />
        <path d="M0 540 Q90 525 200 545 T 400 540 T 600 545" />
        <path d="M0 610 Q120 595 240 615 T 420 610 T 600 615" />
        <path d="M0 680 Q90 665 200 685 T 400 680 T 600 685" />
      </g>

      {/* underwater lights — twin glow */}
      <g>
        <circle cx="160" cy="560" r="80" fill="#a0d8f0" opacity="0.4" />
        <circle cx="160" cy="560" r="40" fill="#fff" opacity="0.55" />
        <circle cx="160" cy="560" r="14" fill="#fff" />
        <circle cx="460" cy="600" r="70" fill="#a0d8f0" opacity="0.35" />
        <circle cx="460" cy="600" r="32" fill="#fff" opacity="0.5" />
        <circle cx="460" cy="600" r="12" fill="#fff" />
      </g>

      {/* floating leaves / particles */}
      <g fill="#fff" opacity="0.55">
        <ellipse cx="80" cy="380" rx="8" ry="2" />
        <ellipse cx="320" cy="395" rx="6" ry="1.6" />
        <ellipse cx="510" cy="385" rx="10" ry="2.4" />
      </g>

      {/* lounge chair silhouette */}
      <g transform="translate(60 280)" fill="#1f2a3a" opacity="0.9">
        <path d="M0 30 L60 30 L70 36 L10 36 Z" />
        <path d="M58 4 L66 30 L72 30 L64 4 Z" />
        <rect x="0" y="36" width="3" height="6" />
        <rect x="60" y="36" width="3" height="6" />
      </g>
      {/* palm-tree silhouette (right) */}
      <g transform="translate(520 200)" fill="#0f2030" opacity="0.85">
        <rect x="14" y="40" width="4" height="80" />
        <path d="M16 40 Q -10 30 -18 12 Q 0 22 14 36 Z" />
        <path d="M16 40 Q 50 30 60 14 Q 38 22 18 36 Z" />
        <path d="M16 40 Q 12 16 -4 0 Q 8 16 14 38 Z" />
        <path d="M16 40 Q 22 14 38 -2 Q 22 12 18 38 Z" />
      </g>

      {/* mono caption */}
      <g style={{ fontFamily: "var(--mono)", fontSize: 10, fill: "#fff", letterSpacing: 2, opacity: 0.7 }}>
        <text x="24" y="730">N 45.4° · W 75.7° · 6:42 PM</text>
      </g>
    </svg>
  );
}

window.ILLUS = {
  "cover-auto": IllusAutoCover,
  "cover-manual": IllusManualCover,
  "solar": IllusSolar,
  "salt": IllusSalt,
  "shower": IllusShower,
  "heatpump": IllusHeatPump,
  "light": IllusLight,
  "filter": IllusFilter,
  "cleaner": IllusCleaner,
  "fitting": IllusFitting,
  "hero": IllusHero
};
