// campus-map.jsx — Simplified flat campus, top-down. 1080x1080.

const COLORS = {
  // Hero illustration 팔레트 그대로 — warm cream + 벚꽃 핑크 + cyan + 따뜻한 노랑 + 코랄 + 그린
  grass:        '#DDE8C9',  // soft fresh grass (Hero 지면 톤)
  path:         '#FFF4E5',  // warm cream sidewalk (Hero 보도와 동일)
  pathEdge:     '#E8DCC4',  // beige edge
  plaza:        '#FFFCEF',  // warm dawn cream (Hero 하늘 top)
  // 5개 건물 — Hero 일러스트의 5가지 색감을 한 채씩
  hallA:        '#FFD6E0',  // 벚꽃 블러섬 핑크
  hallADark:    '#FFB7CE',
  hallB:        '#88D2F2',  // cyan accent
  hallBDark:    '#5BC0EB',
  library:      '#E8DFCD',  // warm stone (Hero 도서관 본체)
  libraryDark:  '#C0B399',
  dorm:         '#FFE08A',  // 따뜻한 노랑 (Hero 해/가로등)
  dormDark:     '#E5C46A',
  cafe:         '#FFA07A',  // warm coral (Hero 오른쪽 캐릭터)
  cafeDark:     '#E08060',
  field:        '#A8D38C',  // 멀리 나무 그린 (Hero)
  tree:         '#9BC97D',  // 캠퍼스 그린
  treeDark:     '#7BAF61',
  pond:         '#A8E0F5',  // 맑은 cyan 연못
  pondEdge:     '#5BC0EB',
  flower:       '#FFB7CE',  // 벚꽃 핑크 액센트 (Hero 떨어지는 꽃잎)
  shadow:       'rgba(80, 60, 30, 0.12)',  // warm earthy shadow
};

const WAYPOINTS = {
  gate:        { x: 540, y: 1010 },
  gate_in:     { x: 540, y: 940 },
  plaza_s:     { x: 540, y: 800 },
  plaza_c:     { x: 540, y: 720 },
  plaza_n:     { x: 540, y: 640 },
  plaza_w:     { x: 440, y: 720 },
  plaza_e:     { x: 640, y: 720 },
  lib_door:    { x: 540, y: 360 },
  lib_path:    { x: 540, y: 480 },
  hall_a_door: { x: 230, y: 480 },
  hall_a_path: { x: 320, y: 480 },
  hall_b_door: { x: 850, y: 480 },
  hall_b_path: { x: 760, y: 480 },
  cafe_door:   { x: 850, y: 800 },
  cafe_path:   { x: 760, y: 800 },
  dorm_door:   { x: 230, y: 800 },
  dorm_path:   { x: 320, y: 800 },
  field_c:     { x: 820, y: 240 },
  field_path:  { x: 720, y: 280 },
  jct_nw:      { x: 320, y: 480 },
  jct_ne:      { x: 760, y: 480 },
  jct_sw:      { x: 320, y: 800 },
  jct_se:      { x: 760, y: 800 },
  pond_bench:  { x: 250, y: 280 },
  pond_path:   { x: 320, y: 350 },
};

window.WAYPOINTS = WAYPOINTS;
window.CAMPUS_COLORS = COLORS;

function Building({ x, y, w, h, color, darkColor, label }) {
  return (
    <g>
      <rect x={x + 4} y={y + 6} width={w} height={h} fill={COLORS.shadow} rx="6" />
      <rect x={x} y={y} width={w} height={h} fill={color} rx="6" />
      <rect x={x} y={y} width={w} height={h} fill="none" stroke={darkColor} strokeWidth="2" rx="6" />
      {label && (
        <text
          x={x + w / 2} y={y + h / 2 + 5}
          textAnchor="middle"
          fill={darkColor}
          fontSize="14"
          fontFamily="ui-rounded, system-ui, sans-serif"
          fontWeight="700"
          opacity="0.7"
          style={{ letterSpacing: '0.05em' }}
        >
          {label}
        </text>
      )}
    </g>
  );
}

function Tree({ x, y, r = 22 }) {
  return (
    <g>
      <ellipse cx={x + 2} cy={y + 4} rx={r} ry={r * 0.85} fill={COLORS.shadow} />
      <circle cx={x} cy={y} r={r} fill={COLORS.tree} />
      <circle cx={x} cy={y} r={r} fill="none" stroke={COLORS.treeDark} strokeWidth="1.5" opacity="0.8" />
    </g>
  );
}

function Path({ d, width = 36 }) {
  return (
    <g>
      <path d={d} stroke={COLORS.pathEdge} strokeWidth={width + 4} fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <path d={d} stroke={COLORS.path} strokeWidth={width} fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </g>
  );
}

function CampusMap() {
  return (
    <svg
      width="1080"
      height="1080"
      viewBox="0 0 1080 1080"
      style={{ position: 'absolute', inset: 0, display: 'block' }}
    >
      <rect x="0" y="0" width="1080" height="1080" fill={COLORS.grass} />

      {/* Sports field — flat */}
      <rect x={680} y={120} width={320} height={240} fill={COLORS.field} rx="10" />

      {/* Pond */}
      <ellipse cx={195} cy={210} rx={90} ry={65} fill={COLORS.pondEdge} />
      <ellipse cx={195} cy={210} rx={80} ry={56} fill={COLORS.pond} />

      {/* Path network */}
      <Path d="M 540 1080 L 540 360" />
      <Path d="M 100 720 L 980 720" width={32} />
      <Path d="M 230 480 L 850 480" width={28} />
      <Path d="M 760 480 L 760 800" width={26} />
      <Path d="M 320 480 L 320 800" width={26} />
      <Path d="M 760 480 L 820 360" width={22} />
      <Path d="M 320 480 L 250 320" width={20} />

      {/* Plaza */}
      <circle cx={540} cy={720} r={84} fill={COLORS.plaza} />
      <circle cx={540} cy={720} r={84} fill="none" stroke={COLORS.pathEdge} strokeWidth="2" />

      {/* Gate */}
      <rect x={490} y={998} width={100} height={16} fill={COLORS.buildingDark} rx="3" />
      <rect x={494} y={970} width={10} height={32} fill={COLORS.buildingDark} rx="2" />
      <rect x={576} y={970} width={10} height={32} fill={COLORS.buildingDark} rx="2" />

      {/* Buildings */}
      <Building x={400} y={180} w={280} h={170} color={COLORS.library} darkColor={COLORS.libraryDark} label="LIBRARY" />
      <Building x={70}  y={400} w={160} h={170} color={COLORS.hallA}   darkColor={COLORS.hallADark}   label="HALL A" />
      <Building x={850} y={400} w={160} h={170} color={COLORS.hallB}   darkColor={COLORS.hallBDark}   label="HALL B" />
      <Building x={850} y={730} w={160} h={140} color={COLORS.cafe}    darkColor={COLORS.cafeDark}    label="CAFÉ" />
      <Building x={70}  y={730} w={160} h={170} color={COLORS.dorm}    darkColor={COLORS.dormDark}    label="DORM" />

      {/* Trees — sparser */}
      <Tree x={380} y={620} r={20} />
      <Tree x={700} y={620} r={20} />
      <Tree x={400} y={920} r={22} />
      <Tree x={680} y={920} r={22} />
      <Tree x={420} y={130} r={18} />
      <Tree x={620} y={130} r={18} />
      <Tree x={140} y={350} r={18} />
      <Tree x={930} y={680} r={20} />
      <Tree x={200} y={950} r={20} />
      <Tree x={870} y={970} r={20} />

      {/* Soft flower accents */}
      <circle cx={540} cy={720} r={10} fill={COLORS.flower} opacity="0.7" />
    </svg>
  );
}

window.CampusMap = CampusMap;