/* Live Dubai skyline — photographic-feel illustration of Downtown Dubai with Burj Khalifa.
   Layered atmospheric perspective: far haze → distant towers → mid towers → Burj Khalifa
   center → foreground silhouette. Time-of-day phases shift sky/light/window glow.
   Weather overlays: rain/fog/sandstorm/cloudy. */

const Skyline = ({ overrideHour, overrideWeather, dubaiTime, weather }) => {
  const hour = overrideHour != null ? overrideHour : dubaiTime.getHours();
  const minute = dubaiTime.getMinutes();
  const t = hour + minute / 60;

  const phase = (() => {
    if (t < 5 || t >= 20) return "night";
    if (t < 7) return "dawn";
    if (t < 17) return "day";
    if (t < 19) return "dusk";
    return "duskNight";
  })();

  // Photographic palettes — sky gradient + atmospheric haze + tower fill ramps
  const palettes = {
    night: {
      skyTop: "#070b18", skyMid: "#0e1830", skyHaze: "#1b2a4a",
      hazeTint: "#1b2a4a",
      farTower: "#0a1224", midTower: "#0e1828", nearTower: "#0d1422", burj: "#0f1626",
      windowOn: 0.95, windowColor: "#ffd17a",
      sunFill: "#f5ecd6", sunY: 130,
      water: "#0a1018", waterShine: "#3a557a",
    },
    dawn: {
      skyTop: "#3a2a4a", skyMid: "#e89a72", skyHaze: "#f4cfa0",
      hazeTint: "#f4cfa0",
      farTower: "#5e4a52", midTower: "#3e2e36", nearTower: "#2c1f26", burj: "#241820",
      windowOn: 0.55, windowColor: "#ffd58a",
      sunFill: "#fff1c8", sunY: 110,
      water: "#7a5a48", waterShine: "#ffb98a",
    },
    day: {
      skyTop: "#a3c6dd", skyMid: "#d8e6ee", skyHaze: "#eef3f6",
      hazeTint: "#eef3f6",
      farTower: "#a8b4be", midTower: "#7a8590", nearTower: "#5c6772", burj: "#4f5963",
      windowOn: 0.05, windowColor: "#fffbe6",
      sunFill: "#fffceb", sunY: 70,
      water: "#7a96a8", waterShine: "#ffffff",
    },
    dusk: {
      skyTop: "#2e2150", skyMid: "#d9583a", skyHaze: "#ffa56a",
      hazeTint: "#ffa56a",
      farTower: "#5a3a44", midTower: "#3a2630", nearTower: "#241620", burj: "#1a0f1c",
      windowOn: 0.7, windowColor: "#ffc068",
      sunFill: "#ffba6a", sunY: 110,
      water: "#7a3a30", waterShine: "#ff8a4a",
    },
    duskNight: {
      skyTop: "#0a0f24", skyMid: "#3a2658", skyHaze: "#5a3a78",
      hazeTint: "#5a3a78",
      farTower: "#1a1828", midTower: "#161028", nearTower: "#100b1c", burj: "#0c0818",
      windowOn: 0.85, windowColor: "#ffce7a",
      sunFill: "#a070c0", sunY: 130,
      water: "#1a1430", waterShine: "#7a5aa0",
    },
  };
  const p = palettes[phase];

  const dayProgress = Math.max(0, Math.min(1, (t - 5) / 14));
  const sunX = 100 + dayProgress * 1000;
  const showSun = t >= 5 && t < 19;
  const showMoon = !showSun;
  const moonX = 200 + ((t < 5 ? t + 5 : t - 19) / 10) * 900;

  const w = overrideWeather || weather?.condition || "clear";

  return (
    <div className="skyline-wrap" aria-hidden="true">
      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice" className="skyline-svg">
        <defs>
          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={p.skyTop} />
            <stop offset="55%" stopColor={p.skyMid} />
            <stop offset="100%" stopColor={p.skyHaze} />
          </linearGradient>

          <radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={p.sunFill} stopOpacity="0.85" />
            <stop offset="35%" stopColor={p.sunFill} stopOpacity="0.35" />
            <stop offset="100%" stopColor={p.sunFill} stopOpacity="0" />
          </radialGradient>

          {/* Atmospheric haze gradient layers */}
          <linearGradient id="atmosphere" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={p.hazeTint} stopOpacity="0" />
            <stop offset="100%" stopColor={p.hazeTint} stopOpacity="0.55" />
          </linearGradient>

          <linearGradient id="atmosphereDeep" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={p.hazeTint} stopOpacity="0" />
            <stop offset="100%" stopColor={p.hazeTint} stopOpacity="0.85" />
          </linearGradient>

          {/* Window pattern — subtle, varies by phase */}
          <pattern id="winFar" width="4" height="6" patternUnits="userSpaceOnUse">
            <rect width="4" height="6" fill="transparent" />
            <rect x="1" y="1" width="1" height="1.5" fill={p.windowColor} opacity={p.windowOn * 0.6} />
            <rect x="2.5" y="3.5" width="1" height="1.5" fill={p.windowColor} opacity={p.windowOn * 0.5} />
          </pattern>

          <pattern id="winMid" width="6" height="9" patternUnits="userSpaceOnUse">
            <rect width="6" height="9" fill="transparent" />
            <rect x="1" y="1.5" width="1.4" height="2" fill={p.windowColor} opacity={p.windowOn * 0.85} />
            <rect x="3.6" y="5" width="1.4" height="2" fill={p.windowColor} opacity={p.windowOn * 0.7} />
          </pattern>

          <pattern id="winNear" width="8" height="14" patternUnits="userSpaceOnUse">
            <rect width="8" height="14" fill="transparent" />
            <rect x="1" y="2" width="2" height="3" fill={p.windowColor} opacity={p.windowOn} />
            <rect x="5" y="2" width="2" height="3" fill={p.windowColor} opacity={p.windowOn * 0.55} />
            <rect x="1" y="8" width="2" height="3" fill={p.windowColor} opacity={p.windowOn * 0.7} />
            <rect x="5" y="8" width="2" height="3" fill={p.windowColor} opacity={p.windowOn} />
          </pattern>

          {/* Burj Khalifa subtle vertical fluting */}
          <linearGradient id="burjShade" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor={p.burj} stopOpacity="1" />
            <stop offset="50%" stopColor={p.burj} stopOpacity="0.6" />
            <stop offset="100%" stopColor={p.burj} stopOpacity="1" />
          </linearGradient>
          <pattern id="burjWindows" width="3" height="6" patternUnits="userSpaceOnUse">
            <rect width="3" height="6" fill="transparent" />
            <rect x="0.5" y="1" width="0.6" height="1" fill={p.windowColor} opacity={p.windowOn * 0.9} />
            <rect x="1.8" y="3" width="0.6" height="1" fill={p.windowColor} opacity={p.windowOn * 0.7} />
          </pattern>

          {/* Soft vignette */}
          <radialGradient id="vignette" cx="50%" cy="50%" r="75%">
            <stop offset="60%" stopColor="#000" stopOpacity="0" />
            <stop offset="100%" stopColor="#000" stopOpacity="0.35" />
          </radialGradient>
        </defs>

        {/* SKY */}
        <rect width="1600" height="900" fill="url(#sky)" />

        {/* Stars (night only) */}
        {phase === "night" && (
          <g opacity="0.9">
            {[...Array(80)].map((_, i) => {
              const x = (i * 97) % 1600;
              const y = (i * 53) % 320;
              const r = 0.4 + (i % 3) * 0.4;
              return <circle key={i} cx={x} cy={y} r={r} fill="#fff">
                <animate attributeName="opacity" values={`${0.2 + (i%5)*0.1};${0.7 + (i%4)*0.08};${0.2 + (i%5)*0.1}`} dur={`${3 + (i % 4)}s`} repeatCount="indefinite" />
              </circle>;
            })}
          </g>
        )}

        {/* Sun / Moon */}
        {showSun && (
          <g>
            <circle cx={sunX} cy={p.sunY} r="220" fill="url(#sunGlow)" />
            <circle cx={sunX} cy={p.sunY} r="42" fill={p.sunFill} opacity="0.95" />
          </g>
        )}
        {showMoon && (
          <g>
            <circle cx={moonX} cy="120" r="80" fill="#ffffff" opacity="0.05" />
            <circle cx={moonX} cy="120" r="32" fill="#f4f1ec" opacity="0.92" />
            <circle cx={moonX - 10} cy="113" r="30" fill={p.skyTop} opacity={phase === "night" ? 0.85 : 0} />
          </g>
        )}

        {/* High thin clouds */}
        <g opacity={w === "fog" ? 0.85 : 0.45}>
          <ellipse cx="280" cy="200" rx="160" ry="10" fill={phase === "night" ? "#1f2a45" : "#fff"} opacity="0.55">
            <animate attributeName="cx" values="-200;1800" dur="200s" repeatCount="indefinite" />
          </ellipse>
          <ellipse cx="900" cy="160" rx="220" ry="14" fill={phase === "night" ? "#1f2a45" : "#fff"} opacity="0.45">
            <animate attributeName="cx" values="-300;1900" dur="240s" repeatCount="indefinite" />
          </ellipse>
          <ellipse cx="1400" cy="240" rx="180" ry="11" fill={phase === "night" ? "#1f2a45" : "#fff"} opacity="0.4">
            <animate attributeName="cx" values="-400;2000" dur="280s" repeatCount="indefinite" />
          </ellipse>
        </g>

        {/* FAR LAYER — distant Marina/Business Bay haze of towers */}
        <g opacity="0.85">
          {farTowers.map((b, i) => (
            <g key={i}>
              <rect x={b.x} y={b.y} width={b.w} height={900 - b.y} fill={p.farTower} />
              <rect x={b.x + 1} y={b.y + 4} width={b.w - 2} height={900 - b.y - 8} fill="url(#winFar)" />
            </g>
          ))}
          {/* atmospheric far haze */}
          <rect x="0" y="500" width="1600" height="200" fill="url(#atmosphere)" opacity="0.85" />
        </g>

        {/* MID LAYER — Business Bay clusters left + DIFC right */}
        <g>
          {midTowers.map((b, i) => (
            <g key={i}>
              {b.spire && <polygon points={`${b.x + b.w/2 - 2},${b.y} ${b.x + b.w/2},${b.y - b.spire} ${b.x + b.w/2 + 2},${b.y}`} fill={p.midTower} />}
              {b.taper ? (
                <polygon points={`${b.x},${b.y + 30} ${b.x + b.taper},${b.y} ${b.x + b.w - b.taper},${b.y} ${b.x + b.w},${b.y + 30} ${b.x + b.w},900 ${b.x},900`} fill={p.midTower} />
              ) : (
                <rect x={b.x} y={b.y} width={b.w} height={900 - b.y} fill={p.midTower} />
              )}
              <rect x={b.x + 2} y={b.y + 8} width={b.w - 4} height={900 - b.y - 16} fill="url(#winMid)" opacity="0.9" />
              {/* Subtle aircraft warning light on tall ones */}
              {b.warn && (
                <circle cx={b.x + b.w/2} cy={b.y - (b.spire || 0)} r="1.5" fill="#ff3d18">
                  <animate attributeName="opacity" values="1;0.2;1" dur="2s" repeatCount="indefinite" />
                </circle>
              )}
            </g>
          ))}
          {/* Mid haze */}
          <rect x="0" y="600" width="1600" height="200" fill="url(#atmosphere)" opacity="0.4" />
        </g>

        {/* BURJ KHALIFA — center, dominant */}
        <g transform="translate(800, 0)">
          <BurjKhalifa palette={p} />
        </g>

        {/* NEAR LAYER — Address Downtown, Burj Park, Opera District towers */}
        <g>
          {nearTowers.map((b, i) => (
            <g key={i}>
              {b.spire && <polygon points={`${b.x + b.w/2 - 3},${b.y} ${b.x + b.w/2},${b.y - b.spire} ${b.x + b.w/2 + 3},${b.y}`} fill={p.nearTower} />}
              <rect x={b.x} y={b.y} width={b.w} height={900 - b.y} fill={p.nearTower} />
              <rect x={b.x + 3} y={b.y + 10} width={b.w - 6} height={900 - b.y - 20} fill="url(#winNear)" opacity="0.95" />
              {/* Crown */}
              {b.crown && <rect x={b.x - 4} y={b.y - 6} width={b.w + 8} height={6} fill={p.nearTower} />}
              {b.warn && (
                <circle cx={b.x + b.w/2} cy={b.y - (b.spire || 0) - 2} r="2" fill="#ff3d18">
                  <animate attributeName="opacity" values="1;0.2;1" dur="1.8s" repeatCount="indefinite" />
                </circle>
              )}
            </g>
          ))}
        </g>

        {/* Foreground low buildings + Burj Park trees silhouette */}
        <g fill={phase === "day" ? "#3a4550" : "#0a0d18"}>
          <rect x="0" y="780" width="1600" height="120" />
          {/* low downtown buildings */}
          {[120, 220, 340, 460, 1080, 1200, 1320, 1440].map((x, i) => (
            <rect key={i} x={x} y={730 + (i % 3) * 10} width={60 + (i % 4) * 12} height={170 - (i % 3) * 10} />
          ))}
          {/* Tree silhouettes */}
          {[80, 280, 540, 720, 980, 1180, 1380, 1520].map((x, i) => (
            <g key={`t${i}`} transform={`translate(${x}, 780)`}>
              <rect x="-1" y="0" width="2" height="20" />
              <ellipse cx="0" cy="-2" rx="10" ry="14" />
            </g>
          ))}
        </g>

        {/* DUBAI FOUNTAIN reflection lake in front */}
        <rect x="0" y="800" width="1600" height="100" fill={p.water} />
        {/* Burj reflection — vertical streak under center */}
        <rect x="780" y="800" width="40" height="100" fill={p.burj} opacity="0.55" />
        {/* Water ripples */}
        <g opacity="0.5">
          {[...Array(40)].map((_, i) => (
            <line key={i} x1={i * 40} y1={820 + (i % 4) * 6} x2={i * 40 + 24} y2={820 + (i % 4) * 6} stroke={p.waterShine} strokeWidth="1" opacity={0.3 + (i % 3) * 0.2}>
              <animate attributeName="x1" values={`${i*40};${i*40+12};${i*40}`} dur={`${3 + i%4}s`} repeatCount="indefinite" />
              <animate attributeName="x2" values={`${i*40+24};${i*40+36};${i*40+24}`} dur={`${3 + i%4}s`} repeatCount="indefinite" />
            </line>
          ))}
        </g>
        {/* Fountain plumes (decorative) */}
        {(phase === "night" || phase === "dusk" || phase === "duskNight") && (
          <g opacity="0.55">
            {[600, 700, 760, 820, 880, 940, 1000].map((x, i) => (
              <path
                key={i}
                d={`M${x},830 Q${x + (i % 2 === 0 ? -8 : 8)},${810 - (i * 6) % 28} ${x + (i % 2 === 0 ? -3 : 3)},${790 - (i * 5) % 30}`}
                stroke={p.waterShine}
                strokeWidth="1.5"
                fill="none"
                opacity="0.5"
              >
                <animate attributeName="opacity" values="0.2;0.75;0.2" dur={`${3 + i%2}s`} repeatCount="indefinite" />
              </path>
            ))}
          </g>
        )}

        {/* Weather overlays */}
        {w === "rain" && <Rain />}
        {w === "fog" && <Fog phase={phase} />}
        {w === "sandstorm" && <Sandstorm />}
        {w === "cloudy" && <CloudyHeavy phase={phase} />}

        {/* Vignette polish */}
        <rect width="1600" height="900" fill="url(#vignette)" />
      </svg>
    </div>
  );
};

const BurjKhalifa = ({ palette: p }) => {
  // Scaled, accurate-ish proportions:
  // - 3 wing tapered base (Y-shape silhouetted)
  // - stepped setbacks every ~80m
  // - long spire (top quarter)
  // Ground at y=900, top ~y=80 (820 tall)
  return (
    <g>
      {/* Antenna pinnacle */}
      <line x1="0" y1="60" x2="0" y2="20" stroke={p.burj} strokeWidth="1" />
      <circle cx="0" cy="22" r="2" fill="#ff3d18">
        <animate attributeName="opacity" values="1;0.25;1" dur="1.6s" repeatCount="indefinite" />
      </circle>

      {/* Spire (60 → 200) */}
      <polygon points="-1,200 0,60 1,200" fill={p.burj} />
      <polygon points="-3,260 -1,200 1,200 3,260" fill={p.burj} />

      {/* Top observation cap */}
      <polygon points="-6,290 -3,260 3,260 6,290" fill={p.burj} />
      <rect x="-6" y="290" width="12" height="20" fill={p.burj} />

      {/* Setback step 1 */}
      <polygon points="-10,330 -6,310 6,310 10,330" fill={p.burj} />
      <rect x="-10" y="330" width="20" height="40" fill="url(#burjShade)" />
      <rect x="-9" y="332" width="18" height="36" fill="url(#burjWindows)" opacity="0.9" />

      {/* Step 2 */}
      <polygon points="-16,390 -10,370 10,370 16,390" fill={p.burj} />
      <rect x="-16" y="390" width="32" height="50" fill="url(#burjShade)" />
      <rect x="-15" y="392" width="30" height="46" fill="url(#burjWindows)" opacity="0.9" />

      {/* Step 3 */}
      <polygon points="-24,460 -16,440 16,440 24,460" fill={p.burj} />
      <rect x="-24" y="460" width="48" height="60" fill="url(#burjShade)" />
      <rect x="-23" y="462" width="46" height="56" fill="url(#burjWindows)" opacity="0.9" />

      {/* Step 4 */}
      <polygon points="-34,540 -24,520 24,520 34,540" fill={p.burj} />
      <rect x="-34" y="540" width="68" height="70" fill="url(#burjShade)" />
      <rect x="-33" y="542" width="66" height="66" fill="url(#burjWindows)" opacity="0.9" />

      {/* Step 5 */}
      <polygon points="-46,630 -34,610 34,610 46,630" fill={p.burj} />
      <rect x="-46" y="630" width="92" height="80" fill="url(#burjShade)" />
      <rect x="-45" y="632" width="90" height="76" fill="url(#burjWindows)" opacity="0.9" />

      {/* Step 6 — Y wing flare base */}
      <polygon points="-60,730 -46,710 46,710 60,730" fill={p.burj} />
      <rect x="-60" y="730" width="120" height="80" fill="url(#burjShade)" />
      <rect x="-58" y="732" width="116" height="76" fill="url(#burjWindows)" opacity="0.9" />

      {/* Base wings — three buttresses suggested in silhouette */}
      <polygon points="-90,820 -60,810 60,810 90,820 90,900 -90,900" fill={p.burj} />
      {/* base entrance highlight */}
      <rect x="-12" y="870" width="24" height="30" fill={p.burj} stroke={p.windowColor} strokeOpacity={p.windowOn * 0.6} strokeWidth="0.5" />

      {/* Soft tower glow at night */}
      <ellipse cx="0" cy="500" rx="80" ry="320" fill="#ffd17a" opacity={p.windowOn * 0.04} />
    </g>
  );
};

// FAR layer towers — many small distant ones
const farTowers = [
  { x: 30, y: 400, w: 18 }, { x: 60, y: 380, w: 14 }, { x: 84, y: 410, w: 16 },
  { x: 110, y: 360, w: 22 }, { x: 140, y: 390, w: 18 }, { x: 168, y: 370, w: 20 },
  { x: 200, y: 400, w: 14 }, { x: 224, y: 380, w: 18 }, { x: 250, y: 350, w: 24 },
  { x: 282, y: 390, w: 16 }, { x: 308, y: 410, w: 14 }, { x: 330, y: 370, w: 22 },
  { x: 360, y: 400, w: 16 }, { x: 386, y: 380, w: 20 }, { x: 414, y: 360, w: 18 },
  { x: 440, y: 390, w: 22 }, { x: 470, y: 410, w: 14 }, { x: 492, y: 380, w: 18 },
  { x: 1100, y: 410, w: 16 }, { x: 1124, y: 380, w: 20 }, { x: 1150, y: 400, w: 14 },
  { x: 1172, y: 360, w: 22 }, { x: 1200, y: 390, w: 18 }, { x: 1228, y: 380, w: 16 },
  { x: 1250, y: 410, w: 14 }, { x: 1272, y: 370, w: 22 }, { x: 1300, y: 400, w: 18 },
  { x: 1326, y: 360, w: 20 }, { x: 1352, y: 390, w: 16 }, { x: 1376, y: 410, w: 14 },
  { x: 1398, y: 380, w: 22 }, { x: 1428, y: 360, w: 18 }, { x: 1454, y: 400, w: 16 },
  { x: 1478, y: 390, w: 20 }, { x: 1504, y: 410, w: 14 }, { x: 1526, y: 370, w: 18 },
  { x: 1552, y: 400, w: 22 }, { x: 1582, y: 390, w: 14 },
];

// MID layer — Business Bay-ish, both sides of Burj
const midTowers = [
  { x: 80, y: 320, w: 30, taper: 4 },
  { x: 130, y: 280, w: 36, taper: 5, spire: 18, warn: true },
  { x: 180, y: 340, w: 28 },
  { x: 220, y: 300, w: 40, spire: 25, warn: true },
  { x: 280, y: 350, w: 26 },
  { x: 320, y: 270, w: 44, spire: 30, warn: true },
  { x: 380, y: 320, w: 32, taper: 4 },
  { x: 430, y: 290, w: 38, spire: 22, warn: true },
  { x: 490, y: 340, w: 30 },
  { x: 540, y: 310, w: 36, taper: 5 },
  { x: 600, y: 350, w: 28 },
  { x: 645, y: 320, w: 34, taper: 4 },

  { x: 990, y: 320, w: 32 },
  { x: 1040, y: 280, w: 38, spire: 24, warn: true },
  { x: 1095, y: 340, w: 28 },
  { x: 1135, y: 300, w: 42, taper: 5, spire: 26, warn: true },
  { x: 1195, y: 320, w: 30 },
  { x: 1235, y: 270, w: 40, spire: 28, warn: true },
  { x: 1290, y: 340, w: 28 },
  { x: 1330, y: 290, w: 40, taper: 4, spire: 22 },
  { x: 1390, y: 320, w: 32 },
  { x: 1440, y: 350, w: 26 },
  { x: 1480, y: 310, w: 36, taper: 5 },
  { x: 1530, y: 340, w: 30 },
];

// NEAR layer — closest, biggest non-Burj towers (Address Downtown, Sky View, Opera Grand)
const nearTowers = [
  { x: 510, y: 390, w: 50, spire: 14, warn: true, crown: true },   // Address Downtown
  { x: 580, y: 430, w: 42, crown: true },                            // Sky View
  { x: 640, y: 470, w: 38 },                                         // Opera Grand
  { x: 700, y: 500, w: 48 },                                         // Burj Vista
  { x: 870, y: 480, w: 46, crown: true },                            // The Address
  { x: 940, y: 440, w: 44, spire: 16, warn: true, crown: true },     // Vida
  { x: 1010, y: 410, w: 50, spire: 12, warn: true },                 // Boulevard Plaza
  { x: 1080, y: 460, w: 40 },                                        // Burj Royale
];

const Rain = () => (
  <g opacity="0.65">
    {[...Array(120)].map((_, i) => {
      const x = (i * 23) % 1600;
      const delay = (i % 12) * 0.08;
      return (
        <line key={i} x1={x} y1="0" x2={x - 10} y2="22" stroke="#a8c4d8" strokeWidth="1" opacity="0.5">
          <animate attributeName="y1" values="-30;920" dur="0.65s" begin={`${delay}s`} repeatCount="indefinite" />
          <animate attributeName="y2" values="-8;942" dur="0.65s" begin={`${delay}s`} repeatCount="indefinite" />
        </line>
      );
    })}
  </g>
);

const Fog = ({ phase }) => (
  <g opacity={phase === "night" ? 0.5 : 0.7}>
    <rect x="0" y="0" width="1600" height="900" fill="#d8dde2" opacity="0.35" />
    <ellipse cx="200" cy="500" rx="500" ry="100" fill="#fff" opacity="0.55">
      <animate attributeName="cx" values="-300;1900" dur="60s" repeatCount="indefinite" />
    </ellipse>
    <ellipse cx="900" cy="480" rx="600" ry="80" fill="#fff" opacity="0.45">
      <animate attributeName="cx" values="-500;2100" dur="80s" repeatCount="indefinite" />
    </ellipse>
    <ellipse cx="1300" cy="520" rx="450" ry="90" fill="#fff" opacity="0.4">
      <animate attributeName="cx" values="-400;2000" dur="70s" repeatCount="indefinite" />
    </ellipse>
  </g>
);

const Sandstorm = () => (
  <g opacity="0.75">
    <rect x="0" y="0" width="1600" height="900" fill="#c89060" opacity="0.45" />
    {[...Array(60)].map((_, i) => (
      <ellipse key={i} cx={(i * 41) % 1600} cy={300 + (i * 17) % 500} rx={50 + (i % 5) * 18} ry={10} fill="#d4a070" opacity="0.32">
        <animate attributeName="cx" values={`${(i*41)%1600};${((i*41)%1600) + 240};${(i*41)%1600}`} dur={`${10 + i%4}s`} repeatCount="indefinite" />
      </ellipse>
    ))}
  </g>
);

const CloudyHeavy = ({ phase }) => (
  <g opacity={phase === "night" ? 0.55 : 0.7}>
    <ellipse cx="400" cy="180" rx="240" ry="36" fill={phase === "night" ? "#2a3550" : "#f4f4ee"}>
      <animate attributeName="cx" values="0;1800" dur="160s" repeatCount="indefinite" />
    </ellipse>
    <ellipse cx="900" cy="140" rx="280" ry="34" fill={phase === "night" ? "#2a3550" : "#f4f4ee"}>
      <animate attributeName="cx" values="-300;2000" dur="180s" repeatCount="indefinite" />
    </ellipse>
    <ellipse cx="1300" cy="220" rx="240" ry="30" fill={phase === "night" ? "#2a3550" : "#f4f4ee"}>
      <animate attributeName="cx" values="-500;2100" dur="140s" repeatCount="indefinite" />
    </ellipse>
  </g>
);

window.Skyline = Skyline;