otivm/src/screens/Map.jsx

import { WAYPOINTS, ROUTES } from '../constants.js'

// H3 res-5 cell centre coordinates — hardcoded, h3-js not in browser bundle
// Cross-checked against constants.js H3 IDs
const CENTRES = {
  ostia:       { lat: 41.73, lng: 12.23 },
  capua:       { lat: 41.09, lng: 14.21 },
  brundisium:  { lat: 40.63, lng: 17.94 },
  carthago:    { lat: 36.86, lng: 10.32 },
  alexandria:  { lat: 31.20, lng: 29.92 },
}

// Bounding box clipped to relevant Mediterranean — no Atlantic needed
const BBOX = { minLng: 5, maxLng: 38, minLat: 28, maxLat: 48 }
const W = 800
const H = 460

function project(lat, lng) {
  const x = ((lng - BBOX.minLng) / (BBOX.maxLng - BBOX.minLng)) * W
  const y = ((BBOX.maxLat - lat) / (BBOX.maxLat - BBOX.minLat)) * H
  return { x, y }
}

function makePath(pts) {
  return pts.map(([lat, lng], i) => {
    const { x, y } = project(lat, lng)
    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
  }).join(' ') + ' Z'
}

// Europe + Asia Minor mainland polygon
// Traces: French Riviera → Italian peninsula → Adriatic → Greece → Thrace →
//         top edge east → Turkey south coast → top edge west → close
const EUROPE = [
  [48.0,5.0],
  [43.4,5.0],[43.5,5.3],[43.8,7.4],
  [43.0,9.4],[41.9,8.7],[41.2,9.3],[39.8,9.6],[39.0,8.9],[38.4,9.4],
  [37.9,11.7],[37.5,15.0],[38.1,15.7],
  [40.1,18.4],[40.9,15.6],[41.7,13.7],[43.5,13.5],[44.4,12.3],
  [45.5,13.8],[45.8,13.6],[45.2,14.0],[44.5,14.5],[43.5,16.9],
  [42.4,18.5],[41.3,19.4],
  [40.5,23.0],[40.0,23.5],[38.2,23.6],[37.5,22.4],[36.7,21.9],
  [37.5,21.1],[38.5,22.0],[39.4,22.5],[40.0,22.6],[40.6,22.9],
  [41.0,23.5],[41.5,24.5],[41.7,26.4],[41.5,28.0],[41.2,29.0],
  [48.0,29.0],[48.0,38.0],
  [36.8,36.6],[36.5,36.2],[36.8,35.1],[36.5,34.6],[36.2,33.3],
  [36.2,32.0],[36.5,31.0],[37.0,30.0],[37.3,28.9],[37.5,27.5],
  [37.0,27.2],[38.3,26.9],[38.6,26.8],[39.1,26.4],[39.6,26.2],
  [40.3,26.4],[40.8,26.0],
  [48.0,5.0],
]

// North Africa mainland polygon
// Traces: Morocco → Algeria → Tunisia (with Cape Bon) → Libya → Egypt →
//         Levant coast → east clip edge → south clip → close
const AFRICA = [
  [28.0,5.0],
  [35.8,5.0],[35.2,5.7],[36.9,6.8],[37.2,8.5],[37.1,9.2],
  [36.8,10.3],[37.1,10.8],[37.1,11.0],
  [36.8,11.1],[35.5,11.1],[33.9,11.0],[33.6,11.6],
  [33.0,12.0],[32.8,13.3],[32.1,15.0],
  [30.8,18.5],[30.5,20.0],[30.9,20.1],
  [31.2,25.0],[31.5,25.2],[31.5,28.0],[31.5,32.4],
  [31.0,32.5],[31.2,33.8],[31.5,34.8],[32.0,34.7],[33.1,35.2],[35.5,36.2],
  [35.0,38.0],[28.0,38.0],
  [28.0,5.0],
]

const ROUTE_ORDER = ['olive', 'wine', 'grain', 'linen']
const WAYPOINT_IDS = ['ostia', 'capua', 'brundisium', 'carthago', 'alexandria']

export default function Map({ state }) {
  const chapter = state?.chapter ?? 1

  const pts = {}
  Object.entries(CENTRES).forEach(([id, { lat, lng }]) => {
    pts[id] = project(lat, lng)
  })

  const currentId = WAYPOINT_IDS[Math.min(chapter - 1, 4)]

  const europePath = makePath(EUROPE)
  const africaPath = makePath(AFRICA)

  return (
    <div className="map-screen">
      <svg
        viewBox={`0 0 ${W} ${H}`}
        style={{ width: '100%', maxWidth: W, display: 'block', margin: '0 auto' }}
        aria-label="Mediterranean trade map"
      >
        {/* Sea */}
        <rect width={W} height={H} fill="#1a2a3a" />

        {/* Land — two polygons, no cross-sea lines */}
        <path d={europePath} fill="#2d3b2a" stroke="#4a5a3a" strokeWidth="1" />
        <path d={africaPath} fill="#2d3b2a" stroke="#4a5a3a" strokeWidth="1" />

        {/* Routes */}
        {ROUTE_ORDER.map((routeId) => {
          const route = ROUTES.find((r) => r.id === routeId)
          if (!route) return null
          const a = pts[route.from]
          const b = pts[route.to]
          const unlocked = chapter > route.chapter
          return (
            <line
              key={routeId}
              x1={a.x} y1={a.y}
              x2={b.x} y2={b.y}
              stroke={unlocked ? '#c8a96e' : '#4a5a6a'}
              strokeWidth={unlocked ? 1.5 : 1}
              strokeDasharray={unlocked ? undefined : '4 4'}
              opacity={unlocked ? 0.8 : 0.35}
            />
          )
        })}

        {/* Waypoints */}
        {WAYPOINT_IDS.map((id) => {
          const wp = WAYPOINTS[id]
          const { x, y } = pts[id]
          const isCurrent = id === currentId
          const isReached = WAYPOINT_IDS.indexOf(id) < chapter - 1
          return (
            <g key={id}>
              {isCurrent && (
                <circle cx={x} cy={y} r={11} fill="none" stroke="#e8c87e" strokeWidth="1" opacity="0.35" />
              )}
              <circle
                cx={x} cy={y}
                r={isCurrent ? 5 : 4}
                fill={isCurrent ? '#e8c87e' : isReached ? '#7aab6a' : '#3a4a5a'}
                stroke={isCurrent ? '#c8a050' : isReached ? '#5a8a4a' : '#2a3a4a'}
                strokeWidth="1"
              />
              <text
                x={x}
                y={y - 11}
                textAnchor="middle"
                fontSize="10"
                fill={isCurrent ? '#e8c87e' : isReached ? '#7aab6a' : '#5a7a8a'}
                fontFamily="Georgia, serif"
              >
                {wp.latin}
              </text>
            </g>
          )
        })}
      </svg>
    </div>
  )
}