// Route diagram SVG components — mini variants shown on tour cards

window.MiniDiagram = function MiniDiagram({ tourId }) {
  const diagrams = {
    wic: (
      <svg viewBox="0 0 400 90" preserveAspectRatio="xMidYMid meet">
        {/* Lower Manhattan street grid — irregular below Wall */}
        <rect x="40" y="15" width="320" height="60" fill="none" stroke="#141312" strokeWidth="0.8" opacity="0.3" />
        {/* Broadway (diagonal) */}
        <line x1="40" y1="20" x2="320" y2="75" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        {/* Wall St */}
        <line x1="40" y1="35" x2="360" y2="35" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        {/* Pearl / Water */}
        <line x1="40" y1="60" x2="360" y2="60" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        {/* Broad St */}
        <line x1="170" y1="15" x2="190" y2="75" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        {/* Nassau / William */}
        <line x1="260" y1="15" x2="280" y2="75" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        {/* walk route: WIC fort → Stone St → Federal Hall → NYSE → JPM → FTX */}
        <path d="M 60 65 L 180 60 L 180 35 L 220 35 L 270 35 L 270 20 L 340 25" fill="none" stroke="#C23A1E" strokeWidth="1.8" />
        {[[60,65],[180,60],[220,35],[270,35],[270,20],[340,25]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="3" fill="#141312" />
        ))}
        <text x="40" y="10" fontSize="7" fontFamily="JetBrains Mono" fill="#78736B">WALL STREET · WIC 1621 → FTX 2022</text>
      </svg>
    ),
    newamst: (
      <svg viewBox="0 0 400 90" preserveAspectRatio="xMidYMid meet">
        <rect x="40" y="15" width="320" height="60" fill="none" stroke="#141312" strokeWidth="0.8" opacity="0.3" />
        <line x1="40" y1="45" x2="360" y2="45" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        <line x1="120" y1="15" x2="120" y2="75" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        <line x1="220" y1="15" x2="220" y2="75" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        <line x1="300" y1="15" x2="300" y2="75" stroke="#141312" strokeWidth="0.5" opacity="0.3" strokeDasharray="2 2" />
        <path d="M 60 65 L 120 65 L 120 45 L 220 45 L 220 25 L 300 25 L 340 45" fill="none" stroke="#C23A1E" strokeWidth="1.8" />
        {[[60,65],[120,45],[220,25],[300,25],[340,45]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="3" fill="#141312" />
        ))}
        <text x="40" y="10" fontSize="7" fontFamily="JetBrains Mono" fill="#78736B">CASTELLO PLAN · 1660</text>
      </svg>
    ),
  };
  return diagrams[tourId] || diagrams.wic;
};