// map.jsx — realistic-feel map placeholder for the home screen (Gyeongbokgung / Bukchon area).
(function () {
  const T = window.T;
  const M = {
    land: '#ece3cd', block: '#e3d9c1', blockEdge: '#d8ccae',
    park: '#c2d0b0', parkEdge: '#b2c29c', water: '#aec7cf',
    roadHi: '#fdfaf2', roadCase: '#dccfb2', roadMin: '#f0e8d6',
  };

  // A fixed-coordinate SVG map. Pins are overlaid by the parent via % positions.
  function MapView({ dim }) {
    return (
      <svg viewBox="0 0 412 760" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}>
        <rect x="0" y="0" width="412" height="760" fill={M.land} />

        {/* ── city blocks (subtle) ── */}
        <g fill={M.block} stroke={M.blockEdge} strokeWidth="1">
          <rect x="-10" y="40" width="120" height="120" rx="4" />
          <rect x="-10" y="180" width="120" height="150" rx="4" />
          <rect x="-10" y="350" width="130" height="120" rx="4" />
          <rect x="-10" y="560" width="150" height="120" rx="4" />
          <rect x="300" y="500" width="130" height="120" rx="4" />
          <rect x="320" y="120" width="110" height="90" rx="4" />
        </g>

        {/* ── palace / park green (center) ── */}
        <path d="M150 95 H300 a8 8 0 0 1 8 8 V330 a8 8 0 0 1 -8 8 H150 a8 8 0 0 1 -8 -8 V103 a8 8 0 0 1 8 -8 Z"
          fill={M.park} stroke={M.parkEdge} strokeWidth="1.5" />
        {/* inner courtyards */}
        <g fill="none" stroke={M.parkEdge} strokeWidth="1" opacity=".7">
          <rect x="178" y="150" width="92" height="70" rx="3" />
          <rect x="190" y="240" width="68" height="48" rx="3" />
        </g>
        {/* water — Hyangwonji pond */}
        <circle cx="182" cy="168" r="20" fill={M.water} stroke="#9fb9c1" strokeWidth="1" />

        {/* northern green (Bukchon hill) */}
        <path d="M300 350 q60 -8 110 6 V470 q-70 18 -110 -2 Z" fill={M.park} stroke={M.parkEdge} strokeWidth="1.5" opacity=".85" />

        {/* ── roads ── */}
        <g stroke={M.roadCase} strokeLinecap="round">
          {/* casings (wider) */}
          <path d="M126 -20 V780" strokeWidth="26" fill="none" />
          <path d="M-20 348 H440" strokeWidth="24" fill="none" />
          <path d="M-20 560 H440" strokeWidth="18" fill="none" />
          <path d="M324 -20 V780" strokeWidth="18" fill="none" />
          <path d="M126 540 L300 350" strokeWidth="14" fill="none" />
        </g>
        <g stroke={M.roadHi} strokeLinecap="round">
          <path d="M126 -20 V780" strokeWidth="20" fill="none" />
          <path d="M-20 348 H440" strokeWidth="18" fill="none" />
          <path d="M-20 560 H440" strokeWidth="13" fill="none" />
          <path d="M324 -20 V780" strokeWidth="13" fill="none" />
          <path d="M126 540 L300 350" strokeWidth="10" fill="none" />
        </g>
        {/* minor lanes (Bukchon alleys) */}
        <g stroke={M.roadMin} strokeWidth="6" strokeLinecap="round" fill="none">
          <path d="M300 360 l-40 50 M330 380 l-50 60 M360 400 l-55 65" />
          <path d="M40 200 h70 M40 250 h70" />
        </g>

        {/* dashed center lines on main avenue */}
        <path d="M126 -20 V780" stroke="#e9dcc0" strokeWidth="1.5" strokeDasharray="7 9" fill="none" />

        {/* faint labels */}
        <g fill="#9a917c" fontFamily="'Pretendard', sans-serif" fontWeight="600" opacity=".75">
          <text x="225" y="250" fontSize="13" textAnchor="middle" letterSpacing=".5">경복궁</text>
          <text x="360" y="345" fontSize="11" textAnchor="middle">북촌로</text>
          <text x="138" y="430" fontSize="10.5" transform="rotate(90 138 430)" textAnchor="middle" opacity=".7">세종대로</text>
          <text x="250" y="362" fontSize="10" textAnchor="middle" fill="#8aa07f">율곡로</text>
        </g>

        {dim && <rect x="0" y="0" width="412" height="760" fill="rgba(24,30,26,.34)" />}
      </svg>
    );
  }

  // A single map pin (heritage marker). active = expanded label.
  function MapPin({ site, active, near, onClick }) {
    const col = window.TAG_COLORS[site.c];
    return (
      <button onClick={onClick} style={{
        position: 'absolute', left: site.x + '%', top: site.y + '%',
        transform: 'translate(-50%,-100%)', background: 'none', border: 'none',
        cursor: 'pointer', padding: 0, zIndex: active ? 12 : 6, transition: 'z-index 0s',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6, padding: active ? '5px 11px 5px 6px' : 0,
            background: active ? T.canvas : 'transparent', borderRadius: 99,
            boxShadow: active ? '0 8px 20px -6px rgba(33,30,20,.4)' : 'none',
            border: active ? '1px solid ' + T.hairline : 'none', whiteSpace: 'nowrap',
          }}>
            <div style={{
              width: active ? 30 : 34, height: active ? 30 : 34, borderRadius: 99,
              background: col.bg, border: '2.5px solid ' + T.canvas,
              display: 'grid', placeItems: 'center', flexShrink: 0,
              boxShadow: '0 6px 14px -4px rgba(33,30,20,.5)',
              transform: active ? 'none' : 'scale(1)',
              animation: near && !active ? 'munaPin 2.2s ease-in-out infinite' : 'none',
            }}>
              <Icon name={site.type.includes('정자') ? 'location' : site.type.includes('마을') ? 'home'
                : site.type.includes('박물관') ? 'grid' : site.type.includes('굴뚝') ? 'sparkle'
                : site.type.includes('사당') ? 'flag' : 'pin'} size={active ? 15 : 17} color={col.fg} stroke={2} />
            </div>
            {active && <span style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 700, color: T.ink,
              letterSpacing: -.2 }}>{site.name}</span>}
          </div>
          <div style={{ width: 0, height: 0, borderLeft: '5px solid transparent',
            borderRight: '5px solid transparent', borderTop: '7px solid ' + (active ? T.canvas : col.bg),
            marginTop: -1 }} />
        </div>
      </button>
    );
  }

  window.MapView = MapView;
  window.MapPin = MapPin;
})();