// Jai Mahal Audio Tour — Choose-a-chapter overlay // L-shaped diagram with numbered medallions (1,2,3,4 horizontal · 5 on the cut) // + a clean list of full chapter titles below. const { useState, useEffect } = React; // Coordinates in a 360 × 380 viewBox. const NODES = [ { id: 1, x: 60, y: 120 }, { id: 2, x: 140, y: 120 }, { id: 3, x: 220, y: 120 }, { id: 4, x: 300, y: 120 }, // corner { id: 5, x: 300, y: 300 }, // bottom of the cut ]; // L-shape path — starts at the entrance dot, runs through all four top // medallions, turns the corner, and drops to medallion 5. const PATH_D = "M 20 120 L 300 120 L 300 320"; function LMap({ open, onClose, onPick }) { const [hover, setHover] = useState(null); // Lock body scroll when open useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [open]); if (!open) return null; const T = window.TOUR; return (

{/* Header */}

Choose a chapter

{/* Scrollable body so labels are never clipped on small phones */}

{/* Map */}

{/* Corner diamond ornaments */} {[ { top: 6, left: 6 }, { top: 6, right: 6 }, { bottom: 6, left: 6 }, { bottom: 6, right: 6 }, ].map((p, i) => (

))} {/* Plan label */}

✦ Tour Plan · The L-Shaped Alley ✦

{/* SVG diagram */}

{/* Chapter list */}

); } window.LMap = LMap;