// Jai Mahal Audio Tour — Checkpoint screen (fixed, no outer scroll) // Top: brand + chapter counter. // Middle: photo carousel (auto-cycle) or scrollable transcript panel. // Bottom: PlayerBar with Home · Prev · Play/Pause · Next · Read/Listen. const { useState, useEffect, useRef, useMemo } = React; function CheckpointScreen({ chId, onHome, onNext, onPrev, onComplete }) { const T = window.TOUR; const ch = T.chapters.find((c) => c.id === chId); const [mode, setMode] = useState("listen"); // "listen" | "read" const audio = useFakeAudio(ch?.durSec || 180, ch?.id, ch?.audioSrc || null); // Auto-advance: when the final chapter's audio finishes, surface the closing. useEffect(() => { if (!ch) return; if (audio.t >= ch.durSec && !audio.playing) { const isLast = ch.id === T.chapters.length; const delay = setTimeout(() => { if (isLast) onComplete && onComplete(); else onNext && onNext(); }, 1200); return () => clearTimeout(delay); } }, [audio.t, audio.playing, ch]); // Photo carousel images: hero first, then gallery const carouselImages = useMemo(() => { if (!ch) return []; const hero = { src: ch.hero, pos: ch.heroPos || "center", caption: ch.tagline }; return [hero, ...ch.gallery.slice(0, 5)]; }, [ch]); const [imgIdx, setImgIdx] = useState(0); // Reset mode + image idx when chapter changes useEffect(() => { setMode("listen"); setImgIdx(0); }, [chId]); if (!ch) return null; return (
{/* ── TOP BAR ───────────────────────────────────────── */}
{/* Logo + title — clickable, goes home */} {/* End Tour — jumps to closing screen */}
{/* ── CONTENT AREA ─────────────────────────────────── */} {mode === "listen" ? ( ) : ( )} {/* ── PLAYER BAR ──────────────────────────────────── */}
); } // ─── LISTEN MODE: full-bleed auto-cycling photo carousel ───────── function ListenMode({ ch, images, playing, imgIdx, setImgIdx }) { return (
{/* Top gradient — to keep dots legible if needed */}
{/* Bottom gradient — for title legibility */}
{/* Caption (active image) — top-left */} {images[imgIdx]?.caption && imgIdx > 0 && (
{images[imgIdx].caption}
)} {/* Chapter title overlay — bottom-left */}
Chapter {String(ch.id).padStart(2, "0")} of 05

{ch.title}

); } // ─── READ MODE: scrollable transcript (text + heading only) ────── function ReadMode({ ch }) { return (
{/* Title block */}
Chapter {String(ch.id).padStart(2, "0")} of 05

{ch.title}

{/* Transcript */}
{ch.paragraphs.map((p, i) => (

{i === 0 && ( {p.charAt(0)} )} {i === 0 ? p.slice(1) : p}

))}
); } // ─── Side panels (kept from earlier version) ────────────────────── function Timeline({ items }) { return (
A Brief Chronology
    {items.map((m, i) => (
  1. {m.year}
    {m.text}
    2. ))}
); } function FactsGrid({ facts }) { return (
{facts.map((f, i) => (
{f.k}
{f.v}
))}
); } function VenuesList({ venues }) { return (
Within the Walls
); } function Pullquote({ text, attr }) { return (

“{text}”

{attr && (
{attr}
)}
); } window.CheckpointScreen = CheckpointScreen;