// An editorial-style illustrated landscape — original, abstract, not branded.
// Meant as a placeholder for a real commissioned illustration.
// Uses thin ink lines + muted washes, in the warm paper palette.

const CityIllustration = ({ onHotspotClick, activeId, hoveredId, setHoveredId }) => {
  return (
    <svg
      viewBox="0 0 1400 620"
      className="city-illo"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet"
      style={{ width: "100%", height: "auto", display: "block" }}
    >
      <defs>
        <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--paper)" stopOpacity="0" />
          <stop offset="100%" stopColor="var(--paper-deep)" stopOpacity="0.5" />
        </linearGradient>
        <linearGradient id="mtn" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="#8a9878" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#596940" stopOpacity="0.75" />
        </linearGradient>
        <linearGradient id="mtnFar" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="#a8b49a" stopOpacity="0.35" />
          <stop offset="100%" stopColor="#7d8c6c" stopOpacity="0.55" />
        </linearGradient>
        <pattern id="hatch" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(40)">
          <line x1="0" y1="0" x2="0" y2="4" stroke="#2a241b" strokeWidth="0.4" opacity="0.35" />
        </pattern>
        <pattern id="hatch2" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-25)">
          <line x1="0" y1="0" x2="0" y2="5" stroke="#2a241b" strokeWidth="0.3" opacity="0.25" />
        </pattern>
        <filter id="rough">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="3" />
          <feDisplacementMap in="SourceGraphic" scale="0.6" />
        </filter>
      </defs>

      {/* Sky wash */}
      <rect x="0" y="0" width="1400" height="380" fill="url(#sky)" />

      {/* Far mountain range */}
      <path
        d="M 0 280 L 60 250 L 140 230 L 240 220 L 340 200 L 460 215 L 580 190 L 720 210 L 860 195 L 980 220 L 1120 210 L 1260 235 L 1400 220 L 1400 380 L 0 380 Z"
        fill="url(#mtnFar)"
        opacity="0.6"
      />
      {/* Far mountain ink outline */}
      <path
        d="M 0 280 L 60 250 L 140 230 L 240 220 L 340 200 L 460 215 L 580 190 L 720 210 L 860 195 L 980 220 L 1120 210 L 1260 235 L 1400 220"
        fill="none" stroke="var(--ink)" strokeWidth="0.8" opacity="0.4"
      />

      {/* Near mountain range */}
      <path
        d="M 0 330 L 80 300 L 180 280 L 280 260 L 380 240 L 480 250 L 600 225 L 740 245 L 880 230 L 1020 255 L 1160 245 L 1300 270 L 1400 260 L 1400 420 L 0 420 Z"
        fill="url(#mtn)"
      />
      <path
        d="M 0 330 L 80 300 L 180 280 L 280 260 L 380 240 L 480 250 L 600 225 L 740 245 L 880 230 L 1020 255 L 1160 245 L 1300 270 L 1400 260"
        fill="none" stroke="var(--ink)" strokeWidth="1" opacity="0.55"
      />

      {/* Mountain hatching for texture */}
      <path
        d="M 280 260 L 380 240 L 480 250 L 480 420 L 280 420 Z"
        fill="url(#hatch2)" opacity="0.5"
      />
      <path
        d="M 880 230 L 1020 255 L 1160 245 L 1160 420 L 880 420 Z"
        fill="url(#hatch)" opacity="0.35"
      />

      {/* ——— City skyline ——— */}

      {/* Left cluster: cathedral + old colonial */}
      <g stroke="var(--ink)" strokeWidth="1.2" fill="none">
        {/* Cathedral body */}
        <rect x="150" y="340" width="140" height="80" fill="var(--paper)" opacity="0.95" />
        <rect x="150" y="340" width="140" height="80" />
        {/* Twin domes */}
        <path d="M 175 340 Q 185 310 195 340" fill="var(--paper-deep)" />
        <path d="M 175 340 Q 185 310 195 340" />
        <path d="M 245 340 Q 255 310 265 340" fill="var(--paper-deep)" />
        <path d="M 245 340 Q 255 310 265 340" />
        {/* Cross */}
        <line x1="185" y1="310" x2="185" y2="300" />
        <line x1="180" y1="304" x2="190" y2="304" />
        <line x1="255" y1="310" x2="255" y2="300" />
        <line x1="250" y1="304" x2="260" y2="304" />
        {/* Windows */}
        <line x1="170" y1="360" x2="170" y2="400" />
        <line x1="190" y1="360" x2="190" y2="400" />
        <line x1="210" y1="360" x2="210" y2="400" />
        <line x1="230" y1="360" x2="230" y2="400" />
        <line x1="250" y1="360" x2="250" y2="400" />
        <line x1="270" y1="360" x2="270" y2="400" />
      </g>

      {/* Savoy-era billboard / low-rise */}
      <g stroke="var(--ink)" strokeWidth="1" fill="none">
        <rect x="80" y="200" width="70" height="220" fill="var(--paper)" opacity="0.95" />
        <rect x="80" y="200" width="70" height="220" />
        {/* Window grid */}
        {[0,1,2,3,4,5,6,7,8,9].map((r) => (
          <g key={`wl-${r}`}>
            <line x1="90" y1={215+r*20} x2="140" y2={215+r*20} opacity="0.5" />
          </g>
        ))}
        {[0,1,2].map((c) => (
          <line key={`wv-${c}`} x1={95+c*20} y1="210" x2={95+c*20} y2="415" opacity="0.5" />
        ))}
        {/* Rooftop sign */}
        <rect x="92" y="180" width="46" height="20" fill="var(--accent)" stroke="var(--ink)" />
        <text x="115" y="195" textAnchor="middle" fontFamily="var(--font-display)"
              fontStyle="italic" fontSize="14" fill="#f5e8d0" stroke="none">Sabor</text>
      </g>

      {/* Center: brutalist civic building (Teatro-esque, generic) */}
      <g stroke="var(--ink)" strokeWidth="1.2" fill="none">
        <polygon points="380,420 380,300 440,270 500,300 500,420" fill="var(--paper-deep)" />
        <polygon points="380,420 380,300 440,270 500,300 500,420" />
        <line x1="400" y1="310" x2="400" y2="420" opacity="0.5"/>
        <line x1="440" y1="285" x2="440" y2="420" opacity="0.5"/>
        <line x1="480" y1="310" x2="480" y2="420" opacity="0.5"/>
        {/* Base plinth */}
        <rect x="360" y="420" width="160" height="14" fill="var(--paper)" />
        <rect x="360" y="420" width="160" height="14" />
      </g>

      {/* Mid cluster: modernist slabs (University-campus-feel) */}
      <g stroke="var(--ink)" strokeWidth="1" fill="none">
        {/* Twin towers with mural panels */}
        <rect x="560" y="190" width="48" height="230" fill="var(--paper)" />
        <rect x="560" y="190" width="48" height="230" />
        <rect x="620" y="210" width="48" height="210" fill="var(--paper)" />
        <rect x="620" y="210" width="48" height="210" />
        {/* Mural panels */}
        <rect x="568" y="220" width="32" height="60" fill="var(--ochre)" opacity="0.7" />
        <rect x="568" y="220" width="32" height="60" />
        <rect x="628" y="240" width="32" height="50" fill="var(--accent)" opacity="0.65" />
        <rect x="628" y="240" width="32" height="50" />
        {/* Horizontal window bands */}
        {[0,1,2,3,4,5,6,7].map((i) => (
          <line key={`tw1-${i}`} x1="560" y1={300+i*15} x2="608" y2={300+i*15} opacity="0.4" />
        ))}
        {[0,1,2,3,4,5,6].map((i) => (
          <line key={`tw2-${i}`} x1="620" y1={310+i*15} x2="668" y2={310+i*15} opacity="0.4" />
        ))}
      </g>

      {/* Park with tree cluster */}
      <g stroke="var(--ink)" strokeWidth="0.8" fill="none">
        {[
          [720,330],[745,325],[770,335],[800,328],[830,338],[860,330],
          [740,355],[785,360],[820,358],[860,365]
        ].map(([cx,cy], i) => (
          <g key={`tr-${i}`}>
            <circle cx={cx} cy={cy} r="14" fill="var(--ivy)" opacity="0.5" />
            <circle cx={cx} cy={cy} r="14" opacity="0.7" />
            <line x1={cx} y1={cy+8} x2={cx} y2={cy+22} />
          </g>
        ))}
        {/* Monument in park */}
        <rect x="790" y="320" width="6" height="40" fill="var(--paper)" />
        <rect x="790" y="320" width="6" height="40" />
        <circle cx="793" cy="315" r="5" fill="var(--ochre)" />
        <circle cx="793" cy="315" r="5" />
      </g>

      {/* Right cluster: modernist high-rises */}
      <g stroke="var(--ink)" strokeWidth="1" fill="none">
        {/* Perforated facade tower */}
        <rect x="1150" y="180" width="120" height="240" fill="var(--paper)" opacity="0.95" />
        <rect x="1150" y="180" width="120" height="240" />
        {/* Perforation dots */}
        {Array.from({length: 12}).map((_, r) =>
          Array.from({length: 10}).map((_, c) => (
            <circle key={`p-${r}-${c}`} cx={1160+c*11} cy={190+r*18} r="1.5" fill="var(--ink)" opacity="0.55"/>
          ))
        )}
        {/* Adjacent slab */}
        <rect x="1280" y="220" width="60" height="200" fill="var(--paper-deep)" />
        <rect x="1280" y="220" width="60" height="200" />
        {[0,1,2,3,4,5,6,7,8,9].map((r) => (
          <line key={`sl-${r}`} x1="1280" y1={235+r*18} x2="1340" y2={235+r*18} opacity="0.4" />
        ))}
      </g>

      {/* Small mid-rise between */}
      <g stroke="var(--ink)" strokeWidth="1" fill="none">
        <rect x="950" y="260" width="70" height="160" fill="var(--paper)" />
        <rect x="950" y="260" width="70" height="160" />
        {Array.from({length: 8}).map((_, r) =>
          Array.from({length: 5}).map((_, c) => (
            <rect key={`mr-${r}-${c}`} x={958+c*12} y={270+r*18} width="6" height="10" opacity="0.35"/>
          ))
        )}
      </g>

      {/* ——— Elevated highway / distribuidor ——— */}
      <g stroke="var(--ink)" strokeWidth="1.2" fill="none">
        {/* Upper deck */}
        <path
          d="M 700 475 Q 900 440 1100 480 T 1400 495"
          stroke="var(--ink)" strokeWidth="2" fill="none" opacity="0.85"
        />
        <path
          d="M 700 490 Q 900 455 1100 495 T 1400 510"
          stroke="var(--ink)" strokeWidth="2" fill="none" opacity="0.85"
        />
        {/* Support pillars */}
        {[760, 820, 880, 950, 1020, 1100, 1180, 1260, 1340].map((x, i) => (
          <line key={`pl-${i}`} x1={x} y1={480+Math.sin(i)*6} x2={x} y2="560" strokeWidth="1.2" />
        ))}
        {/* Lower deck */}
        <path d="M 500 540 Q 800 520 1100 545 T 1400 555" strokeWidth="1.6" />
        <path d="M 500 560 Q 800 540 1100 565 T 1400 575" strokeWidth="1.6" />
        {/* Cars as dashes */}
        {[740, 820, 900, 980, 1060, 1140, 1220, 1300].map((x, i) => (
          <rect key={`car-${i}`} x={x} y={472+Math.sin(i*0.7)*5} width="10" height="5"
                fill="var(--accent)" opacity="0.85" stroke="var(--ink)" strokeWidth="0.4" />
        ))}
        {[540, 640, 740, 840, 940, 1040, 1140, 1240].map((x, i) => (
          <rect key={`car2-${i}`} x={x} y="538" width="9" height="4"
                fill={i%2===0 ? "var(--ochre)" : "var(--ink-soft)"} opacity="0.85" />
        ))}
      </g>

      {/* Cable car line */}
      <g stroke="var(--ink)" strokeWidth="0.8" fill="none" opacity="0.8">
        <line x1="40" y1="160" x2="440" y2="270" strokeDasharray="1 3" />
        {/* Cabin */}
        <rect x="105" y="490" width="24" height="18" fill="var(--accent)" stroke="var(--ink)" strokeWidth="0.8" />
        <line x1="117" y1="490" x2="117" y2="482" />
      </g>

      {/* Foreground road / plaza */}
      <rect x="0" y="560" width="1400" height="60" fill="var(--paper-deep)" opacity="0.8" />
      <line x1="0" y1="560" x2="1400" y2="560" stroke="var(--ink)" strokeWidth="0.8" opacity="0.5" />
      {Array.from({length: 40}).map((_, i) => (
        <rect key={`ln-${i}`} x={i*36+10} y="585" width="18" height="2" fill="var(--ink)" opacity="0.4" />
      ))}

      {/* Street trees */}
      {[40, 180, 360, 520, 680, 920, 1080, 1320].map((x, i) => (
        <g key={`st-${i}`} stroke="var(--ink)" strokeWidth="0.8" fill="none">
          <circle cx={x} cy="555" r="10" fill="var(--ivy)" opacity="0.6" />
          <circle cx={x} cy="555" r="10" />
          <line x1={x} y1="562" x2={x} y2="575" />
        </g>
      ))}

      {/* Hotspots — rendered on top */}
      {HOTSPOTS.map((h) => {
        const cx = (h.x / 100) * 1400;
        const cy = (h.y / 100) * 620;
        const isActive = activeId === h.id;
        const isHovered = hoveredId === h.id;
        return (
          <g
            key={h.id}
            className="hotspot"
            transform={`translate(${cx}, ${cy})`}
            onClick={() => onHotspotClick(h)}
            onMouseEnter={() => setHoveredId(h.id)}
            onMouseLeave={() => setHoveredId(null)}
            style={{ cursor: "pointer" }}
          >
            {/* pulse ring */}
            <circle r="22" fill="var(--accent)" opacity={isHovered ? 0.18 : 0.08}>
              <animate attributeName="r" values="16;26;16" dur="3s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.18;0.04;0.18" dur="3s" repeatCount="indefinite" />
            </circle>
            <circle r="11" fill="var(--paper)" stroke="var(--accent)" strokeWidth="1.2" />
            <circle r="4" fill="var(--accent)" />
            {/* hover halo */}
            {isHovered && (
              <circle r="14" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.5" />
            )}
            {/* number badge */}
            <text y="-16" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10"
                  letterSpacing="2" fill="var(--ink-muted)" stroke="none">
              {String(HOTSPOTS.indexOf(h)+1).padStart(2, "0")}
            </text>
          </g>
        );
      })}
    </svg>
  );
};

window.CityIllustration = CityIllustration;