{data.imgs.length > 1 ? (
) : null}
e.stopPropagation()} />
{cur.cap ?
{cur.cap}
: null}
);
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "Blue",
"hero": "Centered",
"motion": true,
"band": "Medium",
"serif": "Garamond"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [scrolled, setScrolled] = useStateA(false);
const [roomIdx, setRoomIdx] = useStateA(null);
const [lightbox, setLightbox] = useStateA(null); // { imgs, i }
const [prefill, setPrefill] = useStateA(null); // { name, n }
const [adminOpen, setAdminOpen] = useStateA(false);
const [bookings, setBookings] = useStateA(() => window.RIAD.reservations.slice());
/* apply visual tweaks to */
useEffectA(() => {
const b = document.body;
b.setAttribute("data-accent", String(t.accent).toLowerCase());
b.setAttribute("data-band", String(t.band).toLowerCase());
b.setAttribute("data-serif", String(t.serif).toLowerCase());
}, [t.accent, t.band, t.serif]);
/* header frosted on scroll */
useEffectA(() => {
const onScroll = () => setScrolled(window.scrollY > 60);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const openLightbox = useCallbackA((imgs, i) => setLightbox({ imgs, i }), []);
const navLightbox = useCallbackA((d) => {
setLightbox((lb) => lb ? { ...lb, i: (lb.i + d + lb.imgs.length) % lb.imgs.length } : lb);
}, []);
const reserveRoom = (room) => {
setRoomIdx(null);
setPrefill({ name: room.name, n: Date.now() });
setTimeout(() => window.scrollToId("reservation"), 60);
};
const addBooking = (b) => setBookings((prev) => [b, ...prev]);
const setStatus = (ref, status) => setBookings((prev) => prev.map((b) => b.ref === ref ? { ...b, status } : b));
const rooms = window.RIAD.rooms;
return (