// 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 }) { const [idx, setIdx] = useState(0); useEffect(() => { if (paused || images.length <= 1) return; const t = setInterval(() => { setIdx((i) => (i + 1) % images.length); }, interval); return () => clearInterval(t); }, [paused, images.length, interval]); 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 ( ); })}
); }