/* Map.jsx — stylized Apple Maps-ish base. Cream warm. Subtle streets. */

function MapCanvas({ children, dark = false }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'var(--map-bg)',
      overflow: 'hidden',
    }}>
      <svg
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
      >
        {/* Park (Mission Dolores-ish) */}
        <g>
          <path
            d="M -2 8 L 22 8 L 26 14 L 24 22 L 16 28 L 6 26 L -2 22 Z"
            fill="var(--map-park)"
          />
          <path
            d="M 78 88 L 102 92 L 102 102 L 84 102 L 78 96 Z"
            fill="var(--map-park)"
          />
        </g>

        {/* Water — east edge (Bay) */}
        <path
          d="M 86 0 L 102 0 L 102 102 L 92 102 L 88 80 L 84 60 L 86 40 Z"
          fill="var(--map-water)"
        />
        {/* water ripple subtle */}
        <g stroke="var(--map-bg)" strokeWidth="0.15" fill="none" opacity="0.5">
          <path d="M 90 18 Q 94 20 98 18" />
          <path d="M 92 36 Q 95 38 99 36" />
          <path d="M 90 56 Q 94 58 98 56" />
          <path d="M 92 76 Q 95 78 99 76" />
        </g>

        {/* Big arterials — wider, secondary */}
        <g stroke="var(--map-street)" fill="none" strokeLinecap="round">
          <path d="M -4 70 L 86 64" strokeWidth="3.4" />     {/* Mission */}
          <path d="M -4 42 L 86 38" strokeWidth="3.4" />     {/* Folsom */}
          <path d="M 12 -4 L 18 102" strokeWidth="3.4" />    {/* Valencia */}
          <path d="M 50 -4 L 58 102" strokeWidth="3.4" />    {/* 3rd */}
          <path d="M 30 -4 L 38 102" strokeWidth="3.0" />    {/* 16th */}
        </g>
        {/* arterial centerline hints */}
        <g stroke="var(--map-line)" strokeWidth="0.18" fill="none" strokeDasharray="0.6 0.8">
          <path d="M -4 70 L 86 64" />
          <path d="M -4 42 L 86 38" />
          <path d="M 12 -4 L 18 102" />
          <path d="M 50 -4 L 58 102" />
        </g>

        {/* Tertiary streets — thin grid (Mission grid is rotated ~30° from cardinal) */}
        <g stroke="var(--map-street-2)" fill="none" strokeWidth="1.6" strokeLinecap="round">
          {/* horizontal-ish */}
          <path d="M -4 14 L 86 10" />
          <path d="M -4 26 L 86 22" />
          <path d="M -4 56 L 86 50" />
          <path d="M -4 84 L 86 78" />
          <path d="M -4 96 L 86 90" />
          {/* vertical-ish */}
          <path d="M 0 -4 L 6 102" />
          <path d="M 22 -4 L 28 102" />
          <path d="M 40 -4 L 46 102" />
          <path d="M 60 -4 L 68 102" />
          <path d="M 70 -4 L 78 102" />
          <path d="M 80 -4 L 86 102" />
        </g>

        {/* Block fills around park edges — extremely subtle warmth */}
        <g fill="var(--map-line)" opacity="0.4">
          <rect x="34" y="44" width="10" height="8" rx="0.5" />
          <rect x="46" y="46" width="8"  height="6" rx="0.5" />
          <rect x="62" y="56" width="9"  height="7" rx="0.5" />
        </g>

        {/* Highway sliver at corner */}
        <path d="M 86 92 L 102 86" stroke="#E9D9A8" strokeWidth="2.2" fill="none" opacity="0.7" />

        {/* Tiny labels — neighborhood names, very faint */}
        <g
          fontFamily="DM Sans, system-ui, sans-serif"
          fontSize="2.0"
          fontWeight="500"
          fill="var(--ink-3)"
          opacity="0.45"
          letterSpacing="0.3"
          style={{ textTransform: 'uppercase' }}
        >
          <text x="36" y="36" style={{ textTransform: 'uppercase' }}>MISSION</text>
          <text x="14" y="58" style={{ textTransform: 'uppercase' }}>HAYES</text>
          <text x="68" y="68" style={{ textTransform: 'uppercase' }}>DOGPATCH</text>
          <text x="89" y="48" fill="var(--ink-4)" opacity="0.55">BAY</text>
        </g>

        {/* Dolores Park label */}
        <g
          fontFamily="Instrument Serif, serif"
          fontSize="2.4"
          fontStyle="italic"
          fill="#5A6A3E"
          opacity="0.7"
        >
          <text x="6" y="18">Dolores Park</text>
        </g>
      </svg>
      {children}
    </div>
  );
}

window.MapCanvas = MapCanvas;