// Realistic-style map SVG — Amsterdam-ish canals, warm palette
// Used by Map screen + any embedded mini-maps

const MapTile = ({ width = 400, height = 600, dark = false }) => {
  const land = dark ? '#2A221B' : '#F5EDE3';
  const landAlt = dark ? '#332920' : '#EDE1D1';
  const water = dark ? '#3A4A54' : '#B9D1DA';
  const waterDeep = dark ? '#2C3A44' : '#A6C0CA';
  const road = dark ? '#5C4A3C' : '#E4D5C2';
  const roadMain = dark ? '#7A6753' : '#D4BFA3';
  const park = dark ? '#3F4A37' : '#CBDABB';
  const label = dark ? '#8B7763' : '#8B7763';

  return (
    <svg width={width} height={height} viewBox="0 0 400 600" preserveAspectRatio="xMidYMid slice" style={{ display: 'block', width: '100%', height: '100%' }}>
      <rect width="400" height="600" fill={land}/>

      {/* parks */}
      <path d="M-20 40 Q 50 60 70 110 Q 60 170 0 190 L -20 190 Z" fill={park} opacity="0.7"/>
      <ellipse cx="310" cy="480" rx="120" ry="80" fill={park} opacity="0.65"/>
      <path d="M50 420 Q 100 400 140 440 Q 130 480 90 490 Q 50 480 50 420 Z" fill={park} opacity="0.5"/>

      {/* land variation */}
      <path d="M0 250 Q 80 240 150 260 Q 220 290 300 270 Q 380 250 400 260 L 400 360 L 0 360 Z" fill={landAlt} opacity="0.55"/>

      {/* Amsterdam-style concentric canals */}
      <g fill="none" stroke={water} strokeWidth="14" strokeLinecap="round">
        <path d="M-20 330 Q 80 260 200 280 Q 320 300 420 230" opacity="0.9"/>
        <path d="M-20 380 Q 80 310 200 330 Q 320 350 420 280" opacity="0.9"/>
        <path d="M-20 430 Q 80 360 200 380 Q 320 400 420 330" opacity="0.9"/>
      </g>
      <g fill="none" stroke={waterDeep} strokeWidth="2" strokeLinecap="round" opacity="0.35">
        <path d="M-20 330 Q 80 260 200 280 Q 320 300 420 230"/>
        <path d="M-20 380 Q 80 310 200 330 Q 320 350 420 280"/>
        <path d="M-20 430 Q 80 360 200 380 Q 320 400 420 330"/>
      </g>

      {/* radial canals */}
      <g fill="none" stroke={water} strokeWidth="10" strokeLinecap="round" opacity="0.8">
        <path d="M90 20 L 130 600"/>
        <path d="M220 10 L 240 600"/>
        <path d="M340 0 L 310 600"/>
      </g>

      {/* major roads */}
      <g fill="none" stroke={roadMain} strokeWidth="4">
        <path d="M0 160 L 400 170"/>
        <path d="M0 520 L 400 510"/>
        <path d="M180 0 L 200 600"/>
      </g>
      {/* minor roads */}
      <g fill="none" stroke={road} strokeWidth="1.5" opacity="0.8">
        <path d="M0 100 L 400 110"/>
        <path d="M0 200 L 400 210"/>
        <path d="M0 470 L 400 460"/>
        <path d="M0 560 L 400 550"/>
        <path d="M60 0 L 70 600"/>
        <path d="M260 0 L 280 600"/>
        <path d="M360 0 L 370 600"/>
      </g>

      {/* blocks / buildings */}
      <g fill={landAlt} opacity="0.7">
        <rect x="20" y="60" width="34" height="28" rx="3"/>
        <rect x="76" y="50" width="22" height="40" rx="3"/>
        <rect x="150" y="70" width="50" height="22" rx="3"/>
        <rect x="220" y="55" width="26" height="38" rx="3"/>
        <rect x="280" y="70" width="34" height="24" rx="3"/>
        <rect x="16" y="225" width="42" height="18" rx="3"/>
        <rect x="140" y="220" width="30" height="24" rx="3"/>
        <rect x="240" y="225" width="36" height="20" rx="3"/>
        <rect x="320" y="230" width="40" height="18" rx="3"/>
        <rect x="80" y="485" width="34" height="22" rx="3"/>
        <rect x="180" y="480" width="26" height="28" rx="3"/>
        <rect x="240" y="485" width="40" height="20" rx="3"/>
      </g>

      {/* small bridges */}
      <g fill={roadMain}>
        <rect x="88" y="328" width="6" height="6"/>
        <rect x="218" y="278" width="6" height="6"/>
        <rect x="128" y="378" width="6" height="6"/>
      </g>

      {/* labels */}
      <g fontFamily="Geist, system-ui" fontSize="9" fill={label} opacity="0.7" fontWeight="500">
        <text x="46" y="46" letterSpacing="0.5">JORDAAN</text>
        <text x="208" y="44" letterSpacing="0.5">CENTRUM</text>
        <text x="318" y="48" letterSpacing="0.5">PLANTAGE</text>
        <text x="44" y="560" letterSpacing="0.5">DE PIJP</text>
        <text x="270" y="560" letterSpacing="0.5">OOST</text>
        <text x="160" y="300" letterSpacing="0.5" fontStyle="italic" fill={dark ? '#8BA5B0' : '#6B8591'}>Prinsengracht</text>
        <text x="160" y="350" letterSpacing="0.5" fontStyle="italic" fill={dark ? '#8BA5B0' : '#6B8591'}>Keizersgracht</text>
        <text x="160" y="400" letterSpacing="0.5" fontStyle="italic" fill={dark ? '#8BA5B0' : '#6B8591'}>Herengracht</text>
      </g>
    </svg>
  );
};

window.MapTile = MapTile;