/* ============================================================
   VCBackdrop — illustrated GTA-WC scene generator.
   Layered SVG that approximates the og-image keyart:
     · sunset sky gradient
     · stars + halftone dot triangle
     · diagonal scratch marks
     · road-map crosshatch (optional)
     · distant skyline + mid skyline + foreground subject
     · palm silhouettes left/right
     · water with neon reflections + boats
     · glow halo (optional)

   Props:
     palette  — "sunset" | "twilight" | "vapor" | "noon" | "dusk"
              | "miami-haze" | "neon-violet" | "neon-mint" | "magenta"
     subject  — "trophy" | "stadium" | "yacht" | "skyline" | "police"
              | "highway" | "none"
     mapLines — boolean — show road-map crosshatch on the left
     halo     — boolean — neon ring behind the subject
     stars    — boolean — scattered stars in sky
     halftone — boolean — pink dot triangle in upper-right
     scratches— boolean — diagonal scratch marks in lower-left
     palms    — "both" | "left" | "right" | "none"
   ============================================================ */

function VCBackdrop({
  palette = "sunset",
  subject = "trophy",
  mapLines = true,
  halo = true,
  stars = true,
  halftone = true,
  scratches = true,
  palms = "both",
  className = "",
}) {
  /* ---- palette table -------------------------------------- */
  const PAL = {
    sunset: {
      sky: [
        ["0%",   "#3a1278"],
        ["18%",  "#7a2cc4"],
        ["38%",  "#c63a9a"],
        ["58%",  "#ff5a7a"],
        ["75%",  "#ff8e5a"],
        ["90%",  "#ffc78a"],
        ["100%", "#ffe8b8"],
      ],
      sun: ["#fffae0", "#ffae3a"],
      cityFar:  "#3a1255",
      cityMid:  "#250a44",
      cityNear: "#140628",
      subject:  "#0a0014",
      water:    ["#2a0a55", "#46e5e5"],
      accent1:  "#ff3aa3",
      accent2:  "#46e5e5",
      palm:     "#0a0014",
    },
    twilight: {
      sky: [
        ["0%",   "#1a0855"],
        ["35%",  "#5a1a88"],
        ["60%",  "#c83a88"],
        ["85%",  "#ff7a5a"],
        ["100%", "#ffc78a"],
      ],
      sun: ["#fff", "#ff5a7a"],
      cityFar:  "#2a0e55",
      cityMid:  "#1a0a44",
      cityNear: "#0a0428",
      subject:  "#0a0014",
      water:    ["#1a0844", "#46e5e5"],
      accent1:  "#ff3aa3",
      accent2:  "#46e5e5",
      palm:     "#0a0014",
    },
    vapor: {
      sky: [
        ["0%",   "#2a0a78"],
        ["35%",  "#a02bff"],
        ["65%",  "#ff5a9a"],
        ["100%", "#46e5e5"],
      ],
      sun: ["#fff", "#ff7ac8"],
      cityFar:  "#1a0a55",
      cityMid:  "#0a0a3a",
      cityNear: "#050025",
      subject:  "#0a0014",
      water:    ["#0a1444", "#46e5e5"],
      accent1:  "#ff3aa3",
      accent2:  "#46e5e5",
      palm:     "#0a0014",
    },
    noon: {
      sky: [
        ["0%",   "#46e5e5"],
        ["35%",  "#b5d8f0"],
        ["62%",  "#ffc78a"],
        ["100%", "#ff6a3a"],
      ],
      sun: ["#fff8d4", "#ff8e3a"],
      cityFar:  "#3a1f55",
      cityMid:  "#2a1444",
      cityNear: "#180828",
      subject:  "#0a0014",
      water:    ["#2a1444", "#46e5e5"],
      accent1:  "#ff8a3a",
      accent2:  "#46e5e5",
      palm:     "#0a0014",
    },
    dusk: {
      sky: [
        ["0%",   "#1a0855"],
        ["35%",  "#5a1a88"],
        ["65%",  "#c83a88"],
        ["100%", "#ff8a5a"],
      ],
      sun: ["#fff", "#ff5a8a"],
      cityFar:  "#180835",
      cityMid:  "#0a0428",
      cityNear: "#050015",
      subject:  "#0a0014",
      water:    ["#1a0844", "#a02bff"],
      accent1:  "#a02bff",
      accent2:  "#ff3aa3",
      palm:     "#0a0014",
    },
    "miami-haze": {
      sky: [
        ["0%",   "#5a2bff"],
        ["28%",  "#ff7ac8"],
        ["55%",  "#ffae6a"],
        ["80%",  "#ffd29a"],
        ["100%", "#ffe8b8"],
      ],
      sun: ["#fff8d4", "#ff8e3a"],
      cityFar:  "#2a1255",
      cityMid:  "#1a0a44",
      cityNear: "#0a0425",
      subject:  "#0a0014",
      water:    ["#1a0844", "#46e5e5"],
      accent1:  "#ff3aa3",
      accent2:  "#46e5e5",
      palm:     "#0a0014",
    },
    "neon-violet": {
      sky: [
        ["0%",   "#3a0a88"],
        ["50%",  "#a02bff"],
        ["100%", "#ff7ac8"],
      ],
      sun: ["#fff", "#ff3aa3"],
      cityFar:  "#1a0a55",
      cityMid:  "#0a0844",
      cityNear: "#050025",
      subject:  "#0a0014",
      water:    ["#0a0a55", "#a02bff"],
      accent1:  "#46e5e5",
      accent2:  "#ff3aa3",
      palm:     "#0a0014",
    },
    "neon-mint": {
      sky: [
        ["0%",   "#0a3a88"],
        ["40%",  "#3aa8e5"],
        ["70%",  "#ffae6a"],
        ["100%", "#ff5a7a"],
      ],
      sun: ["#fff", "#ffae6a"],
      cityFar:  "#1a1a44",
      cityMid:  "#0a1438",
      cityNear: "#051025",
      subject:  "#0a0014",
      water:    ["#0a1444", "#46e5e5"],
      accent1:  "#46e5e5",
      accent2:  "#ff3aa3",
      palm:     "#0a0014",
    },
    magenta: {
      sky: [
        ["0%",   "#28045a"],
        ["40%",  "#7a14a8"],
        ["72%",  "#ff3aa3"],
        ["100%", "#ff8a5a"],
      ],
      sun: ["#fff", "#ff3aa3"],
      cityFar:  "#2a0a55",
      cityMid:  "#180628",
      cityNear: "#080115",
      subject:  "#0a0014",
      water:    ["#1a0844", "#ff3aa3"],
      accent1:  "#ff3aa3",
      accent2:  "#46e5e5",
      palm:     "#0a0014",
    },
  };
  const p = PAL[palette] || PAL.sunset;

  /* ---- skyline paths (mid layer) -------------------------- */
  const skylineMid = "M 0 360 L 50 360 L 50 300 L 90 300 L 90 320 L 130 320 L 130 250 L 170 230 L 210 250 L 210 290 L 260 290 L 260 240 L 300 200 L 340 160 L 380 200 L 380 270 L 430 270 L 430 230 L 480 180 L 540 140 L 600 180 L 600 250 L 660 250 L 660 210 L 720 160 L 780 210 L 840 170 L 840 240 L 900 240 L 900 200 L 960 150 L 1020 200 L 1020 260 L 1080 260 L 1080 220 L 1140 170 L 1200 220 L 1200 280 L 1260 280 L 1260 250 L 1320 210 L 1370 250 L 1370 300 L 1430 300 L 1430 270 L 1500 270 L 1500 320 L 1600 320 L 1600 500 L 0 500 Z";
  const skylineFar = "M 0 380 L 40 380 L 40 360 L 90 360 L 90 340 L 140 340 L 140 320 L 190 320 L 190 305 L 250 305 L 250 285 L 320 285 L 320 270 L 380 270 L 380 290 L 440 290 L 440 275 L 510 275 L 510 290 L 580 290 L 580 270 L 650 270 L 650 285 L 720 285 L 720 270 L 790 270 L 790 295 L 860 295 L 860 280 L 930 280 L 930 300 L 1010 300 L 1010 285 L 1080 285 L 1080 305 L 1150 305 L 1150 295 L 1230 295 L 1230 315 L 1300 315 L 1300 300 L 1380 300 L 1380 325 L 1450 325 L 1450 315 L 1530 315 L 1530 340 L 1600 340 L 1600 500 L 0 500 Z";

  /* ---- subject silhouettes -------------------------------- */
  function Trophy({ cx, cy, s = 1 }) {
    const k = 90 * s;
    return (
      <g transform={`translate(${cx} ${cy}) scale(${s})`}>
        {/* halo */}
        {halo && (
          <circle r={k * 1.2} fill="none" stroke={p.accent1} strokeWidth="3"
            opacity="0.9" filter="url(#vcb-glow-soft)" />
        )}
        {halo && (
          <circle r={k * 1.18} fill="none" stroke={p.accent2} strokeWidth="2"
            opacity="0.6" filter="url(#vcb-glow-soft)" />
        )}
        {/* base */}
        <ellipse cx={0} cy={k * 0.9} rx={k * 0.45} ry={k * 0.08} fill={p.subject} />
        <rect x={-k * 0.3} y={k * 0.7} width={k * 0.6} height={k * 0.16} fill={p.subject} />
        {/* stem */}
        <rect x={-k * 0.1} y={k * 0.3} width={k * 0.2} height={k * 0.4} fill={p.subject} />
        {/* cup */}
        <path
          d={`M ${-k * 0.35} ${-k * 0.15}
              C ${-k * 0.45} ${k * 0.15} ${-k * 0.18} ${k * 0.32} 0 ${k * 0.32}
              C ${k * 0.18} ${k * 0.32} ${k * 0.45} ${k * 0.15} ${k * 0.35} ${-k * 0.15}
              Z`}
          fill={p.subject}
        />
        {/* ball nested in cup */}
        <circle cx={0} cy={k * 0.07} r={k * 0.18} fill="#fff" stroke={p.subject} strokeWidth={2} />
        <polygon
          points={`0,${-k * 0.04} ${k * 0.05},${0} ${0},${k * 0.06} ${-k * 0.05},${0}`}
          fill={p.subject}
        />
        {/* palm fronds on top */}
        <g fill={p.subject}>
          <path d={`M 0 ${-k * 0.18} Q ${-k * 0.18} ${-k * 0.42} ${-k * 0.42} ${-k * 0.5} Q ${-k * 0.26} ${-k * 0.4} ${-k * 0.1} ${-k * 0.2} Z`} />
          <path d={`M 0 ${-k * 0.18} Q ${k * 0.18} ${-k * 0.42} ${k * 0.42} ${-k * 0.5} Q ${k * 0.26} ${-k * 0.4} ${k * 0.1} ${-k * 0.2} Z`} />
          <path d={`M 0 ${-k * 0.18} Q 0 ${-k * 0.5} 0 ${-k * 0.58} L ${k * 0.04} ${-k * 0.18} Z`} />
        </g>
        {/* star atop */}
        <polygon
          points={`0,${-k * 0.66} ${k * 0.04},${-k * 0.56} ${k * 0.13},${-k * 0.56} ${k * 0.06},${-k * 0.48} ${k * 0.09},${-k * 0.38} 0,${-k * 0.44} ${-k * 0.09},${-k * 0.38} ${-k * 0.06},${-k * 0.48} ${-k * 0.13},${-k * 0.56} ${-k * 0.04},${-k * 0.56}`}
          fill={p.sun[1]}
          stroke={p.subject}
          strokeWidth={1.5}
        />
      </g>
    );
  }

  function Stadium({ cx, cy, s = 1 }) {
    const k = 200 * s;
    return (
      <g transform={`translate(${cx} ${cy}) scale(${s})`}>
        {halo && (
          <ellipse cx={0} cy={0} rx={k * 1.2} ry={k * 0.35}
            fill="none" stroke={p.accent1} strokeWidth="3"
            opacity="0.7" filter="url(#vcb-glow-soft)" />
        )}
        {/* dome shadow */}
        <ellipse cx={0} cy={k * 0.4} rx={k * 0.9} ry={k * 0.16}
          fill={p.cityNear} />
        {/* dome */}
        <path
          d={`M ${-k * 0.85} ${k * 0.4}
              Q ${-k * 0.85} ${-k * 0.45} 0 ${-k * 0.5}
              Q ${k * 0.85} ${-k * 0.45} ${k * 0.85} ${k * 0.4}
              Z`}
          fill={p.subject}
        />
        {/* dome ribs */}
        {Array.from({length: 14}, (_, i) => {
          const a = (-90 + (i + 1) * (180 / 15)) * Math.PI / 180;
          const x1 = Math.cos(a) * k * 0.85;
          const y1 = Math.sin(a) * k * 0.45 + k * 0.05;
          return (
            <line key={i} x1={0} y1={k * 0.4} x2={x1} y2={y1}
              stroke={p.accent1} strokeWidth={1.5} opacity={0.55} />
          );
        })}
        {/* stadium lights — 3 vertical poles */}
        {[-0.6, 0, 0.6].map((xt, i) => (
          <g key={i}>
            <line x1={k * xt} y1={-k * 0.4} x2={k * xt} y2={-k * 0.9}
              stroke={p.subject} strokeWidth={2.5} />
            <rect x={k * xt - 14} y={-k * 0.95} width={28} height={10} fill={p.subject} />
            <path
              d={`M ${k * xt} ${-k * 0.9} L ${k * xt - 80} ${-k * 0.55} L ${k * xt + 80} ${-k * 0.55} Z`}
              fill={p.sun[0]} opacity="0.18"
              filter="url(#vcb-glow-soft)"
            />
          </g>
        ))}
      </g>
    );
  }

  function Yacht({ cx, cy, s = 1 }) {
    const k = 110 * s;
    return (
      <g transform={`translate(${cx} ${cy}) scale(${s})`}>
        {halo && (
          <ellipse cx={0} cy={0} rx={k * 1.3} ry={k * 0.5}
            fill="none" stroke={p.accent1} strokeWidth="3"
            opacity="0.7" filter="url(#vcb-glow-soft)" />
        )}
        {/* hull */}
        <path
          d={`M ${-k * 0.95} ${k * 0.18}
              L ${-k * 0.75} ${k * 0.45}
              L ${k * 0.7} ${k * 0.45}
              L ${k * 0.95} ${k * 0.18}
              L ${-k * 0.95} ${k * 0.18} Z`}
          fill={p.subject}
        />
        {/* upper deck */}
        <path
          d={`M ${-k * 0.55} ${k * 0.18}
              L ${-k * 0.45} ${-k * 0.05}
              L ${k * 0.55} ${-k * 0.05}
              L ${k * 0.7} ${k * 0.18} Z`}
          fill={p.subject}
        />
        {/* bridge */}
        <rect x={-k * 0.2} y={-k * 0.3} width={k * 0.5} height={k * 0.28} fill={p.subject} />
        {/* mast */}
        <line x1={k * 0.05} y1={-k * 0.3} x2={k * 0.05} y2={-k * 0.6}
          stroke={p.subject} strokeWidth={2.5} />
        {/* windows — neon strips */}
        <rect x={-k * 0.4} y={0} width={k * 0.92} height={3} fill={p.accent2} opacity="0.8" />
        <rect x={-k * 0.15} y={-k * 0.22} width={k * 0.4} height={3} fill={p.accent1} opacity="0.8" />
        {/* wake */}
        <path
          d={`M ${k * 0.95} ${k * 0.42}
              Q ${k * 1.4} ${k * 0.5} ${k * 1.7} ${k * 0.55}`}
          stroke={p.accent2} strokeWidth={2.5} fill="none" opacity="0.7"
        />
      </g>
    );
  }

  function Helicopter({ cx, cy, s = 1 }) {
    const k = 60 * s;
    return (
      <g transform={`translate(${cx} ${cy}) scale(${s})`}>
        <rect x={-k * 0.7} y={-k * 0.15} width={k * 1.2} height={k * 0.4} fill={p.subject} rx={k * 0.15} />
        <rect x={-k * 0.55} y={-k * 0.4} width={k * 0.9} height={k * 0.25} fill={p.subject} rx={k * 0.1} />
        <line x1={-k * 1.4} y1={-k * 0.18} x2={k * 1.4} y2={-k * 0.18}
          stroke={p.subject} strokeWidth={3} />
        <line x1={k * 0.5} y1={k * 0.05} x2={k * 1.0} y2={k * 0.05}
          stroke={p.subject} strokeWidth={2} />
        {/* search beam */}
        <path
          d={`M ${k * 0.5} ${k * 0.2} L ${k * 1.4} ${k * 1.4} L ${-k * 0.6} ${k * 1.4} Z`}
          fill={p.sun[0]} opacity="0.18"
        />
      </g>
    );
  }

  /* ---- palm builder --------------------------------------- */
  function Palm({ x, y, h, flip = false, idx = 0 }) {
    const trunkW = h * 0.05;
    const fronds = [];
    const nF = 8;
    for (let i = 0; i < nF; i++) {
      const a = -100 + (i / (nF - 1)) * 220 + (idx * 11 % 24);
      const len = h * 0.42 + (i % 2) * (h * 0.08);
      const rad = (a * Math.PI) / 180;
      const fx = Math.cos(rad) * len;
      const fy = Math.sin(rad) * len;
      const cpx = Math.cos(rad - 0.35) * (len * 0.55);
      const cpy = Math.sin(rad - 0.35) * (len * 0.55) - 8;
      fronds.push(
        <path key={`f-${i}`}
          d={`M 0 0 Q ${cpx} ${cpy} ${fx} ${fy}`}
          stroke={p.palm} strokeWidth={5} strokeLinecap="round" fill="none"
        />
      );
      for (let j = 0; j < 5; j++) {
        const t = (j + 1) / 6;
        const lx = cpx * 2 * t * (1 - t) + fx * t * t;
        const ly = cpy * 2 * t * (1 - t) + fy * t * t;
        const perp = a + 90;
        const pr = (perp * Math.PI) / 180;
        const ll = h * 0.045;
        fronds.push(
          <line key={`l-${i}-${j}-a`}
            x1={lx} y1={ly}
            x2={lx + Math.cos(pr) * ll} y2={ly + Math.sin(pr) * ll}
            stroke={p.palm} strokeWidth={3} strokeLinecap="round"
          />,
          <line key={`l-${i}-${j}-b`}
            x1={lx} y1={ly}
            x2={lx - Math.cos(pr) * ll} y2={ly - Math.sin(pr) * ll}
            stroke={p.palm} strokeWidth={3} strokeLinecap="round"
          />
        );
      }
    }
    return (
      <g transform={`translate(${x} ${y}) ${flip ? "scale(-1 1)" : ""}`}>
        <path
          d={`M ${-trunkW / 2} 0
              Q ${-trunkW / 2 - 8} ${h * 0.5} ${trunkW * 0.4} ${h}
              L ${trunkW * 0.4 + trunkW} ${h}
              Q ${trunkW / 2 + 6} ${h * 0.5} ${trunkW / 2} 0 Z`}
          fill={p.palm}
        />
        {fronds}
        <circle cx={0} cy={-2} r={5} fill={p.palm} />
        <circle cx={7} cy={-1} r={4} fill={p.palm} />
        <circle cx={-6} cy={1} r={4} fill={p.palm} />
      </g>
    );
  }

  /* ---- subject placement -------------------------------- */
  let subjectEl = null;
  if (subject === "trophy")  subjectEl = <Trophy cx={1180} cy={310} s={2.4} />;
  if (subject === "stadium") subjectEl = <Stadium cx={1100} cy={280} s={1.1} />;
  if (subject === "yacht")   subjectEl = <Yacht cx={1180} cy={400} s={1.4} />;
  if (subject === "police")  subjectEl = <Helicopter cx={1150} cy={130} s={1.5} />;

  /* ---- random star positions (deterministic) ------------ */
  const starPositions = [];
  for (let i = 0; i < 22; i++) {
    starPositions.push({
      x: 80 + (i * 137) % 1500,
      y: 30 + (i * 89) % 220,
      r: 1.5 + (i % 3) * 0.8,
    });
  }

  /* ---- halftone dot triangle (upper-right) --------------- */
  const halftoneDots = [];
  if (halftone) {
    for (let i = 0; i < 16; i++) {
      for (let j = 0; j < 16; j++) {
        const x = 1180 + j * 26;
        const y = 0   + i * 18;
        if (x > 1600 || y > 220) continue;
        const t = (j + i * 0.6) / 16;
        if (t < 0.15) continue;
        const r = 2 + t * 5;
        halftoneDots.push(
          <circle key={`h-${i}-${j}`} cx={x} cy={y} r={r}
            fill={p.accent1} opacity={0.18 + t * 0.4} />
        );
      }
    }
  }

  /* ---- diagonal scratch marks (lower-left) -------------- */
  const scratchMarks = [];
  if (scratches) {
    for (let i = 0; i < 14; i++) {
      const x1 = -50 + i * 22;
      const y1 = 320 + i * 12;
      const len = 80 + (i * 41 % 60);
      scratchMarks.push(
        <line key={`s-${i}`}
          x1={x1} y1={y1} x2={x1 + len * 0.7} y2={y1 + len * 0.5}
          stroke={p.accent1} strokeWidth={1.4} opacity={0.25 + (i % 3) * 0.12}
        />
      );
    }
  }

  /* ---- map crosshatch -------------------------------------- */
  const mapPath = mapLines && (
    <g opacity="0.6" stroke={p.accent2} strokeWidth={1.4} fill="none">
      <path d="M -20 180 Q 120 200 180 260 T 250 380 T 200 480" />
      <path d="M -40 240 Q 100 260 160 320 T 220 440" />
      <path d="M 80 80 L 220 220 L 280 320 L 200 460" />
      <path d="M 140 60 L 320 240 L 380 380" />
      <circle cx="180" cy="260" r="6" stroke={p.sun[1]} strokeWidth={2.5} fill="none" />
      <circle cx="280" cy="320" r="6" stroke={p.sun[1]} strokeWidth={2.5} fill="none" />
      <circle cx="220" cy="440" r="6" stroke={p.sun[1]} strokeWidth={2.5} fill="none" />
    </g>
  );

  return (
    <svg
      className={`vc-backdrop ${className}`}
      viewBox="0 0 1600 500"
      preserveAspectRatio="xMidYMid slice"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <defs>
        <linearGradient id={`vcb-sky-${palette}`} x1="0" y1="0" x2="0" y2="1">
          {p.sky.map(([off, c], i) => (
            <stop key={i} offset={off} stopColor={c} />
          ))}
        </linearGradient>
        <radialGradient id={`vcb-sun-${palette}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor={p.sun[0]} />
          <stop offset="55%" stopColor={p.sun[1]} stopOpacity="0.8" />
          <stop offset="100%" stopColor={p.sun[1]} stopOpacity="0" />
        </radialGradient>
        <linearGradient id={`vcb-water-${palette}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"   stopColor={p.water[0]} stopOpacity="0.75" />
          <stop offset="40%"  stopColor={p.water[0]} stopOpacity="0.9" />
          <stop offset="100%" stopColor={p.water[1]} stopOpacity="0.65" />
        </linearGradient>
        <linearGradient id={`vcb-city-hl-${palette}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"   stopColor={p.accent1} stopOpacity="0.45" />
          <stop offset="100%" stopColor={p.accent1} stopOpacity="0" />
        </linearGradient>
        <filter id="vcb-glow-soft" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6" />
        </filter>
        <filter id="vcb-glow-strong" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="18" />
        </filter>
      </defs>

      {/* Sky */}
      <rect width="1600" height="500" fill={`url(#vcb-sky-${palette})`} />

      {/* Stars */}
      {stars && starPositions.map((s, i) => (
        <g key={`star-${i}`}>
          {s.r > 2.5 ? (
            <polygon
              points={`${s.x},${s.y - s.r} ${s.x + s.r * 0.4},${s.y - s.r * 0.4} ${s.x + s.r},${s.y} ${s.x + s.r * 0.4},${s.y + s.r * 0.4} ${s.x},${s.y + s.r} ${s.x - s.r * 0.4},${s.y + s.r * 0.4} ${s.x - s.r},${s.y} ${s.x - s.r * 0.4},${s.y - s.r * 0.4}`}
              fill={p.sun[0]}
            />
          ) : (
            <circle cx={s.x} cy={s.y} r={s.r} fill={p.sun[0]} />
          )}
        </g>
      ))}

      {/* Sun */}
      <g>
        <circle cx="1100" cy="320" r="140" fill={`url(#vcb-sun-${palette})`} filter="url(#vcb-glow-strong)" />
        <circle cx="1100" cy="320" r="62" fill={p.sun[0]} opacity="0.95" />
        {Array.from({length: 5}, (_, i) => (
          <rect key={i} x="970" y={310 + i * 9} width="260" height="3"
            fill={p.water[0]} opacity={0.55 - i * 0.08} />
        ))}
      </g>

      {/* Halftone */}
      {halftoneDots}

      {/* Map crosshatch */}
      {mapPath}

      {/* Far skyline */}
      <path d={skylineFar} fill={p.cityFar} />
      <path d={skylineFar} fill={`url(#vcb-city-hl-${palette})`} opacity="0.6" />

      {/* Mid skyline */}
      <path d={skylineMid} fill={p.cityMid} />
      {/* window lights on mid skyline */}
      <g fill={p.accent2} opacity="0.7">
        {Array.from({length: 60}, (_, i) => {
          const x = 40 + (i * 31) % 1530;
          const y = 200 + ((i * 47) % 130);
          return <rect key={i} x={x} y={y} width="2" height="2" />;
        })}
      </g>

      {/* Subject silhouette (in front of skyline, behind water) */}
      {subjectEl}

      {/* Water */}
      <rect x="0" y="400" width="1600" height="100" fill={`url(#vcb-water-${palette})`} />
      {/* Water shimmer */}
      <g stroke={p.accent2} strokeOpacity="0.35" strokeWidth="1">
        {Array.from({length: 18}, (_, i) => (
          <line key={i}
            x1={50 + (i * 91) % 1500} y1={420 + (i % 4) * 18}
            x2={120 + (i * 91) % 1500} y2={420 + (i % 4) * 18}
          />
        ))}
      </g>

      {/* Foreground palms */}
      {(palms === "both" || palms === "left") && (
        <Palm x={110} y={70} h={420} flip={false} idx={1} />
      )}
      {(palms === "both" || palms === "left") && (
        <Palm x={230} y={150} h={310} flip={true} idx={2} />
      )}
      {(palms === "both" || palms === "right") && (
        <Palm x={1490} y={90} h={400} flip={true} idx={3} />
      )}
      {(palms === "both" || palms === "right") && (
        <Palm x={1380} y={170} h={290} flip={false} idx={4} />
      )}

      {/* Scratch marks */}
      {scratchMarks}
    </svg>
  );
}

window.VCBackdrop = VCBackdrop;