// layouts.jsx — top bar, apartment toggle, and three layout variations.
const { useState: useStateL } = React;
// ── Segmented apartment toggle (apartments WITHIN one reservation) ─
// A reservation can hold more than one apartment. Instead of stacking them
// (forcing a long scroll) we show one at a time behind an elegant in-page
// segmented control.
function ApartmentTabs({ stays, active, onChange, code, narrow }) {
const t = window.useT();
return (
{t('yourApartments')}
{stays.map((s, i) => {
const on = active === i;
return (
);
})}
);
}
// Building name set large, light, uppercase (the "LINZERGASSE" lockup).
function BuildingName({ stay, size = 26, color = 'var(--fg)' }) {
return (
{stay.buildingShort}
);
}
// ── Top bar (dark green) ──────────────────────────────────────────
function TopBar({ current, count, narrow }) {
return (
{!narrow ? : }
);
}
// Greeting block. Falls back to a plain "Welcome" headline when the reservation
// carries no guest name, and hides the confirmation chip when there's no code.
function Greeting({ stay, narrow }) {
const t = window.useT();
const first = stay.reservation.guest.first;
return (
{first && {t('welcome')}}
{first || t('welcome')}
{stay.reservation.code &&
{t('confirmation')}
{stay.reservation.code}
}
);
}
// Stay dates strip — time is the headline, date is the support. The weather cell
// only appears once live weather has loaded (it's omitted when the property has
// no coordinates / the weather call failed). Empty check-in/out values fall back
// to an em dash so the strip never shows a blank.
function DatesStrip({ stay, availableNow }) {
const t = window.useT();
const checkIn = availableNow ?
{ value: t('availableNow'), sub: t('walkRightIn'), accent: true } :
{ value: stay.checkIn.time || '—', sub: stay.checkIn.date };
return (
{/* check-in */}
{t('checkIn')}
{checkIn.accent ?
{t('availableNow')}
:
{checkIn.value}
}
{checkIn.sub &&
{checkIn.sub}
}
{/* check-out */}
{t('checkOut')}
{stay.checkOut.time || '—'}
{stay.checkOut.date &&
{stay.checkOut.date}
}
{/* weather replaces the guests cell — it's the live, glanceable thing */}
{stay.weather &&
);
}
// Per-apartment content (the "apartment box"). Shown one at a time.
function ApartmentPane({ apt, showImage, density, narrow }) {
const gap = density === 'compact' ? 32 : 48;
return (
);
}
// ════════════════════════════════════════════════════════════════
// VARIATION A — Editorial column
// ════════════════════════════════════════════════════════════════
function LayoutEditorial({ stay, stays, showImage, density, narrow, availableNow }) {
const t = window.useT();
const gap = density === 'compact' ? 32 : 48;
const multi = stays.length > 1;
const [ai, setAi] = useStateL(0);
const apt = stays[Math.min(ai, stays.length - 1)];
return (