);
}
// Section wrapper: a plain SectionHead + content, or — when `collapsible` (used
// on mobile) — a tappable header with a chevron that collapses the content,
// collapsed by default. Shared by Connect / Living here / Where you are /
// Breakfast so they behave identically.
function CollapsibleSection({ icon, title, sub, collapsible, children }) {
const [open, setOpen] = useStateS(!collapsible);
if (!collapsible) {
return (
);
}
// Videos we've already auto-fullscreened, so it's a one-time thing PER VIDEO
// (keyed by URL, minus the token query). Persisted so reopening the item — or
// reloading the page — won't fullscreen the same video again.
const FS_SEEN_KEY = 'mp_fs_seen';
const fsSeenVideos = (() => {
try { return new Set(JSON.parse(localStorage.getItem(FS_SEEN_KEY) || '[]')); } catch (e) { return new Set(); }
})();
function markVideoFsSeen(key) {
fsSeenVideos.add(key);
try { localStorage.setItem(FS_SEEN_KEY, JSON.stringify(Array.from(fsSeenVideos).slice(-200))); } catch (e) {}
}
// ── Fullscreen detail modal (renders item Q&A, answers are CMS HTML) ──
function DetailModal({ title, eyebrow, icon, qa, video, html, children, onClose }) {
const contentRef = React.useRef(null);
useEffectS(() => {
const onKey = (e) => {if (e.key === 'Escape') onClose();};
window.addEventListener('keydown', onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {window.removeEventListener('keydown', onKey);document.body.style.overflow = prev;};
}, []);
// On mobile, take an answer video fullscreen the first time THAT VIDEO plays —
// once ever, tracked by URL in fsSeenVideos. (Browsers block fullscreen without
// a user gesture, so we hook the play event, which is user-initiated.)
// Marking the video seen BEFORE entering fullscreen also breaks the exit loop:
// iOS re-fires `play` when you tap "Done" and playback resumes inline, but by
// then the video is already seen, so it stays inline instead of snapping back.
useEffectS(() => {
const isMobile = typeof window !== 'undefined' && ((window.matchMedia && window.matchMedia('(max-width: 859px)').matches) || 'ontouchstart' in window);
const root = contentRef.current;
if (!isMobile || !root) return;
const videos = Array.prototype.slice.call(root.querySelectorAll('video'));
const goFs = (e) => {
const v = e.currentTarget;
const key = (v.currentSrc || v.src || '').split('?')[0]; // stable across token refresh
if (!key || fsSeenVideos.has(key)) return; // already auto-fullscreened this video
if (document.fullscreenElement || document.webkitFullscreenElement) return;
markVideoFsSeen(key);
try {
if (v.webkitEnterFullscreen) v.webkitEnterFullscreen(); // iOS Safari
else if (v.requestFullscreen) v.requestFullscreen();
else if (v.webkitRequestFullscreen) v.webkitRequestFullscreen();
} catch (err) {}
};
videos.forEach((v) => { v.setAttribute('playsinline', ''); v.addEventListener('play', goFs); });
return () => videos.forEach((v) => v.removeEventListener('play', goFs));
}, []);
const items = qa && qa.length ? qa : html ? [{ q: '', a: html }] : null;
return (
);
}
// ── Luggage storage — a Need-assistance-style box shown only on the departure
// day, and only when a service is flagged `isLuggageStorage` in admin (its
// description is the CMS body here). No buttons. ─────────────────────
function LuggageBlock({ stay, compact }) {
const t = window.useT();
if (!stay.isCheckoutDay || !stay.luggage || !stay.luggage.html) return null;
return (
} size={32} />
{t('luggageStorage')}
{t('luggageStorageSub')}
);
}
// ── Breakfast — styled like the other sections (SectionHead: icon + serif
// title + "included in your stay" sub). On mobile (`collapsible`) the header
// toggles the body via a chevron. ─────────────────────────────────
function BreakfastBlock({ stay, collapsible }) {
const t = window.useT();
const b = stay.breakfast;
if (!b) return null;
const body = b.html ?
:
{t('breakfastIncluded')}
;
return (
} />} title={b.label || t('breakfast')} sub={t('breakfastIncluded')} collapsible={collapsible}>
{body}
);
}
// Card wrapper used by layouts.
function Panel({ children, style, pad = 28 }) {
return