// Jai Mahal Audio Tour — shared utility components // Brand mark (logo), Ornamental rule, Chapter chip, ImageCard const { useEffect, useRef, useState } = React; // ─── Brand mark (logo SVG wrapper) ────────────────────────────────── function BrandMark({ size = 22, mono = false, color }) { // We use the user-supplied PNG logo. mono=true shows just the lockup wordmark glyph. return ( Jai Mahal Palace, Jaipur ); } // Compact logo for header use — shows the full mark (crest + wordmark or crest-only). // We use object-fit:contain to ensure both the elephants AND the arches are visible // without cropping. function BrandCrest({ size = 28, opacity = 1, crestOnly = true }) { // The source PNG is 1149 × 639. The crest occupies roughly the top 57% (380px wide). // For "crestOnly" we crop the bottom wordmark away with a clip-path; for the full // lockup we just show the whole thing. if (!crestOnly) { return ( Jai Mahal Palace, Jaipur ); } // Crest only — show the icon portion (top 57% of the image). // We render at full width then mask off the lower wordmark band. const native = { w: 1149, h: 639 }; const crestH = 360; // crest extends from y=0 to ~y=360 in native px const crestAspect = native.w / crestH; // ≈ 3.19, but the crest itself is narrow & centered // Easiest reliable approach: use background-image with size set so the crest fits. return (
); } // ─── Ornamental hairline ─────────────────────────────────────────── function Rule({ variant = "diamond", color = "var(--gold)", width = 100 }) { if (variant === "plain") { return
; } // diamond: short line — diamond — short line return (
); } // ─── Eyebrow label (small caps, gold) ─────────────────────────────── function Eyebrow({ children, color = "var(--gold-dark)", spacing = 3 }) { return ( {children} ); } // ─── Horizontal swipeable gallery ─────────────────────────────────── function Gallery({ images, aspect = "4/5", showCaption = true }) { const ref = useRef(null); const [idx, setIdx] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; const onScroll = () => { const w = el.clientWidth; setIdx(Math.round(el.scrollLeft / w)); }; el.addEventListener("scroll", onScroll, { passive: true }); return () => el.removeEventListener("scroll", onScroll); }, []); return (
{images.map((img, i) => (
{showCaption && (
{img.caption}
)}
))}
{/* Dots */}
{images.map((_, i) => ( ))}
); } // ─── Section header w/ ornamental rule ────────────────────────────── function SectionHead({ eyebrow, title }) { return (
{eyebrow}

{title}

); } // ─── Primary button ──────────────────────────────────────────────── function PrimaryBtn({ children, onClick, full = true, dark = true }) { return ( ); } // ─── Ghost button ────────────────────────────────────────────────── function GhostBtn({ children, onClick, full = true }) { return ( ); } Object.assign(window, { BrandMark, BrandCrest, Rule, Eyebrow, Gallery, SectionHead, PrimaryBtn, GhostBtn, AutoCarousel }); // ─── Auto-cycling photo carousel ──────────────────────────────────── // Crossfades through `images` every `interval` ms. Pure CSS opacity transitions. // Exposes index via onChange callback for caption sync. function AutoCarousel({ images, interval = 4500, fade = 1000, paused = false, onIndexChange, index = null, fit = "cover" }) { // Controlled mode: when `index` is supplied, the parent drives which image // shows (e.g. synced to an audio timeline). Otherwise auto-advance on a timer. const controlled = index != null; const [autoIdx, setAutoIdx] = useState(0); useEffect(() => { if (controlled || paused || images.length <= 1) return; const t = setInterval(() => { setAutoIdx((i) => (i + 1) % images.length); }, interval); return () => clearInterval(t); }, [controlled, paused, images.length, interval]); const idx = controlled ? Math.max(0, Math.min(images.length - 1, index)) : autoIdx; useEffect(() => { onIndexChange && onIndexChange(idx); }, [idx]); return (
{images.map((img, i) => { const src = typeof img === "string" ? img : img.src; const pos = typeof img === "string" ? "center" : img.pos || "center"; return (
{/* For "contain" fit, a blurred backdrop fills the frame ambiently so low-resolution images don't pixelate by being upscaled. Not needed for "cover" (full-bleed) where the image already fills the frame. */} {fit === "contain" && (
)}
); })}
); } // ─── Language toggle (Globe + dropdown) ───────────────────────────── // variant "dark" for image/overlay backgrounds, "light" for cream headers. function LangToggle({ lang, setLang, variant = "light" }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("pointerdown", onDoc); return () => document.removeEventListener("pointerdown", onDoc); }, [open]); const dark = variant === "dark"; const fg = dark ? "rgba(255,255,255,0.92)" : "var(--ink)"; const border = dark ? "rgba(255,255,255,0.35)" : "var(--gold-dark)"; const label = lang === "hi" ? "हिं" : "EN"; const options = [ { code: "en", label: "English" }, { code: "hi", label: "हिंदी" }, ]; return (
{open && (
{options.map((o) => { const active = o.code === lang; return ( ); })}
)}
); } Object.assign(window, { LangToggle });