/* CinematicScene — GTA VI cover-art quality SVG illustration
   Bright Miami sunset · art-deco towers · palm silhouettes · ocean reflections
*/

function CinematicScene() {
  return (
    <svg
      viewBox="0 0 1920 780"
      preserveAspectRatio="xMidYMax slice"
      aria-hidden="true"
    >
      <defs>
        {/* SUN */}
        <radialGradient id="sun" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="#fff4d2" />
          <stop offset="22%" stopColor="#ffdfa4" />
          <stop offset="50%" stopColor="#ffb079" />
          <stop offset="80%" stopColor="#ff8aab" stopOpacity="0.6" />
          <stop offset="100%" stopColor="#ff79b5" stopOpacity="0" />
        </radialGradient>

        {/* CLOUDS — pinkish wisps */}
        <linearGradient id="cloud" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#fff" stopOpacity="0.65" />
          <stop offset="100%" stopColor="#ff8db8" stopOpacity="0.35" />
        </linearGradient>

        {/* DISTANT BUILDINGS — peach/lavender (sunlit) */}
        <linearGradient id="farBldg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#f3a8ac" />
          <stop offset="100%" stopColor="#a96a96" />
        </linearGradient>

        {/* MID BUILDINGS — sun-side peach + shadow */}
        <linearGradient id="midBldg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#e689a9" />
          <stop offset="100%" stopColor="#5a2778" />
        </linearGradient>
        <linearGradient id="midBldgShade" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#7e3c8a" />
          <stop offset="100%" stopColor="#2c0e4d" />
        </linearGradient>

        {/* NEAR BUILDINGS — dark silhouette */}
        <linearGradient id="nearBldg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#2a0e5c" />
          <stop offset="100%" stopColor="#0a0322" />
        </linearGradient>

        {/* OCEAN — sunset reflection */}
        <linearGradient id="ocean" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#ffcba0" stopOpacity="0.9" />
          <stop offset="35%" stopColor="#ff8dc8" stopOpacity="0.85" />
          <stop offset="70%" stopColor="#7e3aa6" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#1a0a3a" stopOpacity="1" />
        </linearGradient>

        {/* PALM — deep violet to black */}
        <linearGradient id="palm" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#3a0a52" />
          <stop offset="100%" stopColor="#08030f" />
        </linearGradient>

        {/* Window-light blob filter (soft glow) */}
        <filter id="winglow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
      </defs>

      {/* SUN halo on horizon */}
      <ellipse cx="960" cy="370" rx="640" ry="200" fill="url(#sun)" opacity="0.95" />
      {/* Sun core */}
      <circle cx="960" cy="370" r="48" fill="#fff8dc" opacity="0.9" />

      {/* Soft pinkish clouds floating in sky */}
      <g opacity="0.55">
        <ellipse cx="240"  cy="120" rx="160" ry="14" fill="url(#cloud)" />
        <ellipse cx="540"  cy="80"  rx="220" ry="12" fill="url(#cloud)" />
        <ellipse cx="1180" cy="100" rx="240" ry="16" fill="url(#cloud)" />
        <ellipse cx="1620" cy="60"  rx="180" ry="12" fill="url(#cloud)" />
        <ellipse cx="1700" cy="160" rx="160" ry="10" fill="url(#cloud)" opacity="0.55" />
        <ellipse cx="380"  cy="200" rx="180" ry="8"  fill="url(#cloud)" opacity="0.55" />
      </g>

      {/* Distant birds */}
      <g stroke="#3d1a52" strokeWidth="1.4" fill="none" opacity="0.55">
        <path d="M380 180 q5 -6 10 0 q5 -6 10 0" />
        <path d="M420 200 q4 -5 8 0 q4 -5 8 0" />
        <path d="M1500 150 q5 -6 10 0 q5 -6 10 0" />
        <path d="M1560 170 q4 -5 8 0 q4 -5 8 0" />
      </g>

      {/* === DISTANT SKYLINE === peachy, soft */}
      <g fill="url(#farBldg)" opacity="0.95">
        <path d="M0,440 L0,405 L40,405 L40,395 L120,395 L120,378 L180,378 L180,400 L240,400 L240,380 L320,380 L320,358 L380,358 L380,375 L440,375 L440,362 L520,362 L520,388 L600,388 L600,372 L680,372 L680,385 L760,385 L760,348 L840,348 L840,376 L920,376 L920,362 L1000,362 L1000,384 L1080,384 L1080,366 L1160,366 L1160,352 L1240,352 L1240,378 L1320,378 L1320,360 L1400,360 L1400,386 L1480,386 L1480,370 L1560,370 L1560,348 L1640,348 L1640,374 L1720,374 L1720,392 L1800,392 L1800,378 L1880,378 L1880,400 L1920,400 L1920,440 Z"/>
      </g>

      {/* === ART DECO MID TOWERS === iconic Miami profile */}
      {/* central trio */}
      <g transform="translate(820, 240)">
        <g fill="url(#midBldg)">
          <rect x="0"   y="100" width="44" height="180" />
          <rect x="44"  y="68"  width="48" height="212" />
          <rect x="92"  y="30"  width="60" height="250" />
          <rect x="152" y="68"  width="48" height="212" />
          <rect x="200" y="100" width="44" height="180" />
          <polygon points="92,30 122,4 152,30" />
        </g>
        {/* shadow side */}
        <g fill="url(#midBldgShade)" opacity="0.55">
          <rect x="122" y="30" width="30" height="250" />
          <rect x="172" y="68" width="28" height="212" />
          <rect x="218" y="100" width="26" height="180" />
        </g>
        {/* antenna */}
        <rect x="120" y="-30" width="4" height="34" fill="#2a0e5c" />
        <circle cx="122" cy="-32" r="3" fill="#ffd7a3" />
      </g>

      {/* left art deco */}
      <g transform="translate(380, 290)">
        <g fill="url(#midBldg)">
          <rect x="0"  y="56" width="40" height="140" />
          <rect x="40" y="32" width="44" height="164" />
          <rect x="84" y="56" width="40" height="140" />
          <polygon points="40,32 62,8 84,32" />
        </g>
        <g fill="url(#midBldgShade)" opacity="0.55">
          <rect x="62" y="32" width="22" height="164" />
          <rect x="104" y="56" width="20" height="140" />
        </g>
      </g>
      {/* right art deco */}
      <g transform="translate(1240, 270)">
        <g fill="url(#midBldg)">
          <rect x="0"   y="48" width="36" height="148" />
          <rect x="36"  y="22" width="42" height="174" />
          <rect x="78"  y="2"  width="50" height="194" />
          <rect x="128" y="22" width="42" height="174" />
          <rect x="170" y="48" width="36" height="148" />
          <polygon points="78,2 103,-20 128,2" />
        </g>
        <g fill="url(#midBldgShade)" opacity="0.55">
          <rect x="103" y="2"  width="25" height="194" />
          <rect x="148" y="22" width="22" height="174" />
          <rect x="188" y="48" width="18" height="148" />
        </g>
      </g>
      <g transform="translate(1560, 320)">
        <g fill="url(#midBldg)">
          <rect x="0"  y="36" width="32" height="116" />
          <rect x="32" y="12" width="34" height="140" />
          <rect x="66" y="36" width="32" height="116" />
        </g>
      </g>
      <g transform="translate(220, 340)">
        <g fill="url(#midBldg)">
          <rect x="0"  y="34" width="34" height="108" />
          <rect x="34" y="6"  width="38" height="136" />
          <rect x="72" y="34" width="34" height="108" />
        </g>
      </g>

      {/* lit windows — warm + cool dots across mid towers */}
      <g>
        {Array.from({ length: 360 }, (_, i) => {
          const x = (i * 43 + (i % 5) * 7) % 1920;
          const y = 260 + ((i * 53) % 170);
          const palette = ["#fff1a8", "#ffcd76", "#ffb8c4", "#46e5e5", "#fff"];
          const c = palette[i % 5];
          return (
            <rect key={i} x={x} y={y} width="2.4" height="3.6" fill={c}
                  opacity={i % 5 === 0 ? 1 : 0.6} filter="url(#winglow)" />
          );
        })}
      </g>

      {/* === NEAR SKYLINE === darker bottom buildings */}
      <g fill="url(#nearBldg)">
        <path d="M0,780 L0,468 L60,468 L60,448 L140,448 L140,428 L220,428 L220,464 L300,464 L300,432 L380,432 L380,470 L460,470 L460,438 L540,438 L540,478 L620,478 L620,452 L700,452 L700,426 L800,426 L800,466 L880,466 L880,438 L960,438 L960,470 L1040,470 L1040,448 L1120,448 L1120,420 L1200,420 L1200,464 L1280,464 L1280,432 L1360,432 L1360,470 L1440,470 L1440,448 L1520,448 L1520,428 L1600,428 L1600,464 L1680,464 L1680,432 L1760,432 L1760,470 L1840,470 L1840,448 L1920,448 L1920,780 Z" />
      </g>

      {/* Near-building bright window strip */}
      <g>
        {Array.from({ length: 240 }, (_, i) => {
          const x = (i * 53 + (i % 5) * 4) % 1920;
          const y = 460 + ((i * 37) % 110);
          const palette = ["#ffd09a", "#46e5e5", "#ff7ac8", "#fff6c2"];
          const c = palette[i % 4];
          return (
            <rect key={"n"+i} x={x} y={y} width="2.6" height="4" fill={c}
                  opacity={i % 6 === 0 ? 1 : 0.5} filter="url(#winglow)" />
          );
        })}
      </g>

      {/* OCEAN BAND — sunset water w/ specular streaks (in front of near skyline base) */}
      <rect x="0" y="540" width="1920" height="180" fill="url(#ocean)" opacity="0.78" />
      {/* light streaks */}
      <g opacity="0.7" stroke="#fff" strokeWidth="0.8" fill="none">
        <line x1="700"  y1="558" x2="1220" y2="558" opacity="0.4" />
        <line x1="640"  y1="572" x2="1280" y2="572" opacity="0.55" />
        <line x1="780"  y1="586" x2="1140" y2="586" opacity="0.7" />
        <line x1="720"  y1="600" x2="1200" y2="600" opacity="0.5" />
        <line x1="820"  y1="614" x2="1100" y2="614" opacity="0.4" />
        <line x1="500"  y1="630" x2="1420" y2="630" opacity="0.3" stroke="#ffe6c2" />
        <line x1="380"  y1="650" x2="1540" y2="650" opacity="0.25" stroke="#ffd5b0" />
      </g>

      {/* Sun column on water (specular reflection) */}
      <ellipse cx="960" cy="610" rx="220" ry="50" fill="#fff1c2" opacity="0.45" />
      <ellipse cx="960" cy="600" rx="120" ry="20" fill="#ffffff" opacity="0.5" />

      {/* === PALM TREES === big, sharp silhouettes, GTA-style */}
      <g fill="url(#palm)">
        {/* LEFT tall */}
        <PalmTree x={70} y={210} scale={1.05} />
        {/* RIGHT tall, mirrored */}
        <g transform="translate(1700, 200) scale(-1, 1)">
          <PalmTree x={0} y={0} scale={1.1} />
        </g>
        {/* mid-left smaller */}
        <PalmTree x={250} y={350} scale={0.7} />
        {/* mid-right smaller */}
        <g transform="translate(1530, 360) scale(-1, 1)">
          <PalmTree x={0} y={0} scale={0.72} />
        </g>
        {/* very small palms scattered */}
        <PalmTree x={140} y={420} scale={0.45} />
        <PalmTree x={1380} y={430} scale={0.5} />
        <PalmTree x={500} y={440} scale={0.32} />
        <PalmTree x={1100} y={440} scale={0.35} />
      </g>

      {/* Beach/boardwalk thin band */}
      <g>
        <rect x="0" y="700" width="1920" height="20" fill="#08030f" />
        <rect x="0" y="694" width="1920" height="6"  fill="#1a0a3a" opacity="0.8" />
      </g>

      {/* Pink reflection of palms on water (very subtle) */}
      <g opacity="0.12" fill="#ff7ac8">
        <rect x="100"  y="640" width="14" height="60" />
        <rect x="1700" y="640" width="14" height="60" />
      </g>
    </svg>
  );
}

/* Palm tree as a reusable subcomponent — render at given offset+scale.
   Dense fronds for cover-art quality silhouette. */
function PalmTree({ x, y, scale = 1 }) {
  return (
    <g transform={`translate(${x}, ${y}) scale(${scale})`}>
      {/* trunk with subtle taper segments */}
      <rect x="36" y="160" width="10" height="380" rx="2" />
      <rect x="34" y="200" width="14" height="6" rx="1" />
      <rect x="34" y="260" width="14" height="6" rx="1" />
      <rect x="34" y="320" width="14" height="6" rx="1" />
      <rect x="34" y="380" width="14" height="6" rx="1" />
      {/* base bulge */}
      <ellipse cx="41" cy="160" rx="16" ry="10" />
      {/* primary fronds — sweeping outward */}
      <path d="M41,156 C-20,140 -70,100 -120,50 C-60,108 -10,150 32,154 Z" />
      <path d="M41,156 C-40,164 -100,196 -150,242 C-80,210 -20,182 36,162 Z" />
      <path d="M41,156 C-10,90 -32,38 -52,-22 C-22,42 24,128 41,156 Z" />
      <path d="M41,156 C102,140 152,100 202,50 C142,108 92,150 50,154 Z" />
      <path d="M41,156 C122,164 182,196 232,242 C162,210 102,182 46,162 Z" />
      <path d="M41,156 C70,90 100,38 122,-22 C108,42 70,128 41,156 Z" />
      {/* secondary fronds — fill the silhouette */}
      <path d="M41,156 C12,144 -16,128 -42,116 C-12,140 16,154 38,158 Z" />
      <path d="M41,156 C70,144 98,128 124,116 C94,140 66,154 44,158 Z" />
      <path d="M41,156 C24,124 18,84 14,42 C24,84 34,128 41,156 Z" />
      <path d="M41,156 C58,124 64,84 68,42 C58,84 48,128 41,156 Z" />
      {/* coconuts */}
      <circle cx="35" cy="160" r="4" />
      <circle cx="47" cy="158" r="3.5" />
      <circle cx="40" cy="166" r="3" />
    </g>
  );
}

window.CinematicScene = CinematicScene;
window.PalmTree = PalmTree;
