// Three map background styles. Each renders a Korean street layout using SVG
// at 390x844 viewBox. Pin positions are in percentage so this scales.

const { useState } = React;

// Shared road network. Curves chosen to feel like Mapo/Seongsu-ish layout:
// a river band across the bottom-mid, two arterials, a grid of side streets.
const ROAD_PATHS = {
  river: 'M -20 540 C 80 520 200 580 280 560 C 360 545 440 565 500 540 L 500 620 C 440 640 360 625 280 640 C 200 655 80 620 -20 640 Z',
  // primary arterials
  arterials: [
    'M -20 220 Q 200 230 410 200',
    'M -20 470 Q 200 460 410 480',
    'M 100 -20 Q 130 380 200 880',
    'M 320 -20 Q 290 380 380 880',
  ],
  // secondary
  secondaries: [
    'M -20 320 Q 200 330 410 305',
    'M -20 380 Q 200 390 410 380',
    'M -20 720 Q 200 710 410 730',
    'M -20 790 Q 200 800 410 790',
    'M 60 -20 Q 80 400 140 880',
    'M 240 -20 Q 250 400 280 880',
  ],
  // small streets — short connectors between arterials
  small: [
    ['M 30 240', 'L 80 320'], ['M 110 250', 'L 150 320'], ['M 170 240', 'L 220 310'],
    ['M 240 250', 'L 290 320'], ['M 320 240', 'L 360 320'],
    ['M 30 410', 'L 80 470'], ['M 130 400', 'L 180 460'],
    ['M 220 410', 'L 280 470'], ['M 310 405', 'L 360 460'],
    ['M 50 690', 'L 100 740'], ['M 150 700', 'L 220 750'],
    ['M 270 690', 'L 340 740'],
  ],
  // park polygons (one big, one small)
  parks: [
    'M 240 60 Q 320 50 360 100 Q 380 160 340 200 Q 290 220 250 190 Q 230 140 240 60 Z',
    'M 30 600 Q 90 590 110 630 Q 100 680 60 685 Q 20 670 30 600 Z',
  ],
};

const MAP_LABELS = [
  { x: 65, y: 175, t: '망원동' },
  { x: 250, y: 165, t: '성수동' },
  { x: 105, y: 600, t: '한강' },
  { x: 290, y: 280, t: '서울숲' },
  { x: 75, y: 775, t: '서빙고' },
  { x: 320, y: 740, t: '용산구' },
];

// ─── Naver-style: warm beige land, white roads with soft stroke, soft greens ───
function NaverMap() {
  return (
    <svg viewBox="0 0 410 880" preserveAspectRatio="xMidYMid slice" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
      <rect width="410" height="880" fill="#F0EDE2" />
      {/* parks */}
      {ROAD_PATHS.parks.map((d,i) => <path key={i} d={d} fill="#D9E3C5" />)}
      {/* river */}
      <path d={ROAD_PATHS.river} fill="#BCD3DA" />
      {/* secondary streets — lighter background, no casing */}
      <g stroke="#FFFFFF" strokeWidth="6" fill="none" strokeLinecap="round">
        {ROAD_PATHS.secondaries.map((d,i) => <path key={i} d={d} />)}
      </g>
      {/* small streets */}
      <g stroke="#FAF7EC" strokeWidth="3" fill="none" strokeLinecap="round">
        {ROAD_PATHS.small.map(([a,b],i) => <path key={i} d={`${a} ${b}`} />)}
      </g>
      {/* primary arterials with cream casing */}
      <g fill="none" strokeLinecap="round">
        {ROAD_PATHS.arterials.map((d,i) => (
          <g key={i}>
            <path d={d} stroke="#E8DFC8" strokeWidth="14" />
            <path d={d} stroke="#FFFFFF" strokeWidth="10" />
          </g>
        ))}
      </g>
      {/* labels — Naver uses slightly bold gray */}
      {MAP_LABELS.map((l,i) => (
        <text key={i} x={l.x} y={l.y} fontFamily="Pretendard, system-ui" fontSize="11" fontWeight="500" fill="#7A7368">{l.t}</text>
      ))}
    </svg>
  );
}

// ─── Apple-style: cool, low-contrast, minty greens, light blue water ───
function AppleMap() {
  return (
    <svg viewBox="0 0 410 880" preserveAspectRatio="xMidYMid slice" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
      <rect width="410" height="880" fill="#F2F1EC" />
      {ROAD_PATHS.parks.map((d,i) => <path key={i} d={d} fill="#D6E6CC" />)}
      <path d={ROAD_PATHS.river} fill="#C9DCE9" />
      <g stroke="#FFFFFF" strokeWidth="5" fill="none" strokeLinecap="round">
        {ROAD_PATHS.secondaries.map((d,i) => <path key={i} d={d} />)}
      </g>
      <g stroke="#F8F6EF" strokeWidth="2.5" fill="none" strokeLinecap="round">
        {ROAD_PATHS.small.map(([a,b],i) => <path key={i} d={`${a} ${b}`} />)}
      </g>
      <g fill="none" strokeLinecap="round">
        {ROAD_PATHS.arterials.map((d,i) => (
          <g key={i}>
            <path d={d} stroke="#E2DFD3" strokeWidth="12" />
            <path d={d} stroke="#FFFFFF" strokeWidth="9" />
          </g>
        ))}
      </g>
      {MAP_LABELS.map((l,i) => (
        <text key={i} x={l.x} y={l.y} fontFamily="Pretendard, system-ui" fontSize="10.5" fontWeight="400" fill="#8E8B82" letterSpacing="0.3">{l.t}</text>
      ))}
    </svg>
  );
}

// ─── Google-style: brighter whites, clean grays, strong road hierarchy ───
function GoogleMap() {
  return (
    <svg viewBox="0 0 410 880" preserveAspectRatio="xMidYMid slice" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
      <rect width="410" height="880" fill="#F5F5F2" />
      {ROAD_PATHS.parks.map((d,i) => <path key={i} d={d} fill="#CFE6C6" />)}
      <path d={ROAD_PATHS.river} fill="#A9D0E5" />
      <g stroke="#FFFFFF" strokeWidth="6" fill="none" strokeLinecap="round">
        {ROAD_PATHS.secondaries.map((d,i) => <path key={i} d={d} />)}
      </g>
      <g stroke="#FFFFFF" strokeWidth="2.5" fill="none" strokeLinecap="round">
        {ROAD_PATHS.small.map(([a,b],i) => <path key={i} d={`${a} ${b}`} />)}
      </g>
      <g fill="none" strokeLinecap="round">
        {ROAD_PATHS.arterials.map((d,i) => (
          <g key={i}>
            <path d={d} stroke="#FBD37C" strokeWidth="13" opacity="0.9" />
            <path d={d} stroke="#FFFFFF" strokeWidth="9.5" />
          </g>
        ))}
      </g>
      {MAP_LABELS.map((l,i) => (
        <text key={i} x={l.x} y={l.y} fontFamily="Pretendard, system-ui" fontSize="11" fontWeight="500" fill="#5F5F5F">{l.t}</text>
      ))}
    </svg>
  );
}

window.DAIL_MAPS = { naver: NaverMap, apple: AppleMap, google: GoogleMap };