/* global React */

/**
 * Animated cityscape — buildings rise from the ground line in sequence,
 * crane rotates, balloon drifts, birds glide. Loops every ~16s.
 *
 * Aesthetic: same line-art as before, with a faint back-row silhouette
 * to add depth (the "3D" feeling comes from layered parallax + staggered reveal).
 *
 * Props:
 *   tone: 'dark' (white strokes on black) | 'light' (ink on white)
 *   accent: hex for the highlight tower / balloon
 */
function Cityscape({ tone = 'dark', accent = '#d4922a', style = {} }) {
  const stroke = tone === 'dark' ? 'rgba(255,255,255,0.88)' : '#191c1f';
  const faint  = tone === 'dark' ? 'rgba(255,255,255,0.30)' : 'rgba(25,28,31,0.35)';
  const back   = tone === 'dark' ? 'rgba(255,255,255,0.18)' : 'rgba(25,28,31,0.22)';
  const sw = 1.5;
  const base = {
    fill: 'none',
    stroke,
    strokeWidth: sw,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };
  const faintLine = { ...base, stroke: faint };
  const backLine = { ...base, stroke: back, strokeWidth: 1.25 };
  const accentLine = { ...base, stroke: accent, strokeWidth: 1.75 };

  // Window grid helper
  const windows = (x, y, cols, rows, gw, gh, gap = 4, color = stroke) => {
    const els = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        els.push(
          <rect
            key={`${x}-${y}-${r}-${c}`}
            x={x + c * (gw + gap)}
            y={y + r * (gh + gap)}
            width={gw} height={gh}
            fill="none" stroke={color} strokeWidth={1}
          />
        );
      }
    }
    return els;
  };

  // Stagger schedule. Total cycle = 16s.
  // Phase 1 (0–6s):   buildings rise one by one
  // Phase 2 (6–13s):  hold steady; crane, balloon, birds keep moving
  // Phase 3 (13–16s): fade out and reset for the loop
  const CYCLE = 12.8;
  // a building's "rise" lasts 1.2s; we delay each one a bit
  const delay = (i) => i * 0.32; // seconds

  // Inline CSS embedded inside the SVG so it travels with the component
  const css = `
    .arkhe-city .bld {
      transform-box: fill-box;
      transform-origin: bottom;
      animation: arkhe-rise ${CYCLE}s cubic-bezier(.22, .8, .25, 1) infinite both;
      opacity: 0;
    }
    .arkhe-city .ground-line {
      stroke-dasharray: 1600;
      stroke-dashoffset: 1600;
      animation: arkhe-ground ${CYCLE}s ease-out infinite both;
    }
    .arkhe-city .balloon {
      transform-box: fill-box;
      transform-origin: 120px 110px;
      animation: arkhe-balloon ${CYCLE}s ease-in-out infinite both;
    }
    .arkhe-city .bird-1 { animation: arkhe-bird1 ${CYCLE}s linear infinite both; }
    .arkhe-city .bird-2 { animation: arkhe-bird2 ${CYCLE}s linear infinite both; }

    @keyframes arkhe-rise {
      0%   { transform: translateY(40px) scaleY(0.02); opacity: 0; }
      4%   { opacity: 0; }
      14%  { transform: translateY(0) scaleY(1);       opacity: 1; }
      82%  { transform: translateY(0) scaleY(1);       opacity: 1; }
      94%  { transform: translateY(0) scaleY(1);       opacity: 0; }
      100% { transform: translateY(0) scaleY(0.02);    opacity: 0; }
    }
    @keyframes arkhe-ground {
      0%   { stroke-dashoffset: 1600; opacity: 0; }
      6%   { stroke-dashoffset: 0;    opacity: 1; }
      85%  { opacity: 1; }
      96%  { opacity: 0; }
      100% { opacity: 0; }
    }
    @keyframes arkhe-balloon {
      0%   { transform: translate(0, 24px) scale(0.6); opacity: 0; }
      8%   { opacity: 0; }
      22%  { transform: translate(0, 0)    scale(1);   opacity: 1; }
      50%  { transform: translate(8px, -6px) scale(1); opacity: 1; }
      82%  { transform: translate(-4px, 2px) scale(1); opacity: 1; }
      96%  { opacity: 0; }
      100% { transform: translate(0, -8px) scale(1);   opacity: 0; }
    }
    @keyframes arkhe-bird1 {
      0%   { transform: translate(80px, 30px); opacity: 0; }
      40%  { opacity: 0; }
      55%  { opacity: 1; }
      80%  { transform: translate(-1500px, 10px); opacity: 1; }
      100% { transform: translate(-1700px, 0); opacity: 0; }
    }
    @keyframes arkhe-bird2 {
      0%   { transform: translate(120px, 20px); opacity: 0; }
      50%  { opacity: 0; }
      65%  { opacity: 1; }
      88%  { transform: translate(-1400px, 6px); opacity: 1; }
      100% { transform: translate(-1500px, 0);   opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .arkhe-city .bld,
      .arkhe-city .ground-line,
      .arkhe-city .balloon,
      .arkhe-city .bird-1,
      .arkhe-city .bird-2 {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
      }
    }
  `;

  return (
    <svg
      className="arkhe-city"
      viewBox="0 0 1600 360"
      preserveAspectRatio="xMidYEnd meet"
      style={{ display: 'block', width: '100%', height: 'auto', ...style }}
    >
      <style dangerouslySetInnerHTML={{ __html: css }}/>

      {/* --- BACK ROW: faint silhouettes for depth (no animation) --- */}
      <g {...backLine}>
        <rect x="200"  y="252" width="34" height="88"/>
        <rect x="248"  y="270" width="26" height="70"/>
        <rect x="350"  y="240" width="38" height="100"/>
        <rect x="404"  y="260" width="28" height="80"/>
        <rect x="500"  y="232" width="46" height="108"/>
        <rect x="554"  y="248" width="30" height="92"/>
        <rect x="660"  y="218" width="40" height="122"/>
        <rect x="712"  y="240" width="34" height="100"/>
        <rect x="836"  y="232" width="44" height="108"/>
        <rect x="892"  y="252" width="32" height="88"/>
        <rect x="1010" y="240" width="38" height="100"/>
        <rect x="1058" y="258" width="28" height="82"/>
        <rect x="1170" y="234" width="42" height="106"/>
        <rect x="1226" y="252" width="30" height="88"/>
        <rect x="1342" y="228" width="46" height="112"/>
        <rect x="1402" y="248" width="32" height="92"/>
        <rect x="1500" y="240" width="36" height="100"/>
      </g>

      {/* --- GROUND LINE (animated draw-in) --- */}
      <line className="ground-line" x1="0" y1="340" x2="1600" y2="340" {...faintLine} />
      <line x1="0" y1="346" x2="1600" y2="346" {...faintLine} strokeDasharray="2 6" />

      {/* --- BALLOON --- */}
      <g className="balloon" {...accentLine}>
        <ellipse cx="120" cy="68" rx="22" ry="26" />
        <path d="M 102 84 Q 120 102 138 84" />
        <line x1="108" y1="92" x2="116" y2="116" />
        <line x1="132" y1="92" x2="124" y2="116" />
        <rect x="113" y="116" width="14" height="10" rx="1" />
      </g>

      {/* --- BUILDINGS (animated rise, staggered) --- */}

      {/* 1. low-rise houses, far left */}
      <g className="bld" style={{ animationDelay: `${delay(0)}s` }} {...base}>
        <path d="M 30 340 L 30 290 L 60 270 L 90 290 L 90 340 Z" />
        <rect x="48" y="305" width="12" height="14" />
        <rect x="68" y="305" width="14" height="20" />
        <path d="M 100 340 L 100 296 L 130 280 L 160 296 L 160 340 Z" />
        <rect x="112" y="310" width="10" height="14" />
        <rect x="134" y="310" width="14" height="18" />
        <line x1="100" y1="296" x2="160" y2="296" />
      </g>

      {/* 2. mid-rise apartment 1 */}
      <g className="bld" style={{ animationDelay: `${delay(1)}s` }} {...base}>
        <rect x="180" y="220" width="78" height="120" />
        <line x1="180" y1="240" x2="258" y2="240" />
        {windows(190, 250, 4, 6, 12, 10, 4, stroke)}
      </g>

      {/* 3. tree */}
      <g className="bld" style={{ animationDelay: `${delay(2)}s` }} {...base}>
        <line x1="278" y1="340" x2="278" y2="318" />
        <circle cx="278" cy="312" r="10" />
      </g>

      {/* 4. tower 1 — tall */}
      <g className="bld" style={{ animationDelay: `${delay(3)}s` }} {...base}>
        <rect x="296" y="150" width="60" height="190" />
        <line x1="296" y1="170" x2="356" y2="170" />
        <line x1="326" y1="170" x2="326" y2="340" />
        {windows(304, 178, 4, 9, 8, 12, 4, stroke)}
        <line x1="326" y1="150" x2="326" y2="128" />
        <circle cx="326" cy="124" r="2.5" fill={stroke} stroke="none" />
      </g>

      {/* 5. squat residential block */}
      <g className="bld" style={{ animationDelay: `${delay(4)}s` }} {...base}>
        <rect x="372" y="260" width="100" height="80" />
        {windows(382, 270, 6, 4, 10, 10, 4, stroke)}
        <rect x="416" y="318" width="12" height="22" />
      </g>

      {/* 6. trees cluster */}
      <g className="bld" style={{ animationDelay: `${delay(5)}s` }} {...base}>
        <line x1="490" y1="340" x2="490" y2="320" />
        <circle cx="490" cy="314" r="9" />
        <line x1="510" y1="340" x2="510" y2="312" />
        <path d="M 500 318 L 510 304 L 520 318 Z" />
      </g>

      {/* 7. mid-rise 2 */}
      <g className="bld" style={{ animationDelay: `${delay(6)}s` }} {...base}>
        <rect x="538" y="200" width="84" height="140" />
        <line x1="538" y1="218" x2="622" y2="218" />
        {windows(548, 226, 4, 8, 12, 10, 4, stroke)}
        <line x1="538" y1="200" x2="622" y2="200" strokeWidth={1} />
      </g>

      {/* 8. ACCENT tower (ochre) */}
      <g className="bld" style={{ animationDelay: `${delay(7)}s` }} {...accentLine}>
        <rect x="640" y="110" width="58" height="230" />
        <line x1="640" y1="130" x2="698" y2="130" />
        <line x1="669" y1="130" x2="669" y2="340" />
        {Array.from({ length: 10 }).map((_, r) =>
          Array.from({ length: 4 }).map((_, c) => (
            <rect
              key={`a-${r}-${c}`}
              x={646 + c * 13}
              y={140 + r * 18}
              width={9} height={11}
              fill="none" stroke={accent} strokeWidth={1}
            />
          ))
        )}
        <path d="M 640 110 L 669 96 L 698 110" />
      </g>

      {/* 9. tall slim tower */}
      <g className="bld" style={{ animationDelay: `${delay(8)}s` }} {...base}>
        <rect x="716" y="90" width="44" height="250" />
        {windows(722, 100, 3, 14, 10, 12, 4, stroke)}
        <line x1="738" y1="90" x2="738" y2="74" />
      </g>

      {/* 10. dome / curved building */}
      <g className="bld" style={{ animationDelay: `${delay(9)}s` }} {...base}>
        <path d="M 778 340 L 778 210 Q 778 170 818 170 Q 858 170 858 210 L 858 340 Z" />
        <line x1="778" y1="220" x2="858" y2="220" />
        {windows(786, 230, 4, 8, 12, 10, 4, stroke)}
      </g>

      {/* 11. office block 1 */}
      <g className="bld" style={{ animationDelay: `${delay(10)}s` }} {...base}>
        <rect x="880" y="180" width="92" height="160" />
        <line x1="880" y1="200" x2="972" y2="200" />
        {windows(890, 210, 5, 10, 10, 10, 4, stroke)}
      </g>

      {/* 12. small house + tree */}
      <g className="bld" style={{ animationDelay: `${delay(11)}s` }} {...base}>
        <line x1="990" y1="340" x2="990" y2="318" />
        <circle cx="990" cy="312" r="10" />
        <path d="M 1006 340 L 1006 300 L 1030 286 L 1054 300 L 1054 340 Z" />
        <rect x="1020" y="316" width="10" height="14" />
        <rect x="1038" y="316" width="10" height="14" />
      </g>

      {/* 13. mid-rise 3 */}
      <g className="bld" style={{ animationDelay: `${delay(12)}s` }} {...base}>
        <rect x="1074" y="220" width="78" height="120" />
        <line x1="1074" y1="240" x2="1152" y2="240" />
        {windows(1084, 248, 4, 6, 12, 10, 4, stroke)}
      </g>

      {/* 14. stepped / terraced tower */}
      <g className="bld" style={{ animationDelay: `${delay(13)}s` }} {...base}>
        <path d="M 1170 340 L 1170 200 L 1196 200 L 1196 168 L 1224 168 L 1224 200 L 1250 200 L 1250 340 Z" />
        {windows(1178, 210, 2, 9, 10, 10, 4, stroke)}
        {windows(1202, 178, 2, 2, 8, 8, 4, stroke)}
        {windows(1232, 210, 2, 9, 10, 10, 4, stroke)}
      </g>

      {/* 15. tall tower with stepped top (replaces former crane slot) */}
      <g className="bld" style={{ animationDelay: `${delay(14)}s` }} {...base}>
        <rect x="1262" y="148" width="58" height="192" />
        <line x1="1262" y1="170" x2="1320" y2="170" />
        <line x1="1291" y1="170" x2="1291" y2="340" />
        {windows(1268, 178, 4, 8, 8, 12, 4, stroke)}
        {/* stepped top */}
        <path d="M 1262 148 L 1262 132 L 1320 132 L 1320 148" />
        <line x1="1291" y1="132" x2="1291" y2="116" />
        <circle cx="1291" cy="113" r="2" fill={stroke} stroke="none" />
      </g>

      {/* 15b. small office filling the gap to commercial tower */}
      <g className="bld" style={{ animationDelay: `${delay(14) + 0.18}s` }} {...base}>
        <rect x="1330" y="218" width="56" height="122" />
        <line x1="1330" y1="236" x2="1386" y2="236" />
        {windows(1338, 244, 3, 7, 12, 10, 4, stroke)}
      </g>

      {/* 16. commercial tower */}
      <g className="bld" style={{ animationDelay: `${delay(15)}s` }} {...base}>
        <rect x="1392" y="170" width="68" height="170" />
        <line x1="1392" y1="190" x2="1460" y2="190" />
        {windows(1402, 200, 4, 10, 11, 10, 4, stroke)}
      </g>

      {/* 17. houses far right */}
      <g className="bld" style={{ animationDelay: `${delay(16)}s` }} {...base}>
        <path d="M 1478 340 L 1478 296 L 1506 280 L 1534 296 L 1534 340 Z" />
        <rect x="1492" y="312" width="10" height="14" />
        <rect x="1512" y="312" width="14" height="20" />
        <path d="M 1548 340 L 1548 304 L 1572 290 L 1596 304 L 1596 340 Z" />
        <rect x="1560" y="316" width="10" height="14" />
        <rect x="1578" y="316" width="10" height="14" />
      </g>

      {/* --- BIRDS (animated, flying across) --- */}
      <path className="bird-1" d="M 1380 60 q 6 -6 12 0 q 6 -6 12 0" {...faintLine} />
      <path className="bird-2" d="M 1450 90 q 5 -5 10 0 q 5 -5 10 0" {...faintLine} />
    </svg>
  );
}

window.Cityscape = Cityscape;