let model = new CalendarModel({ focusedDate: OPENING_DAY });
let selected = dayKey(OPENING_DAY);

model.addEventListener("change", () => void handle.update());

let weeks = monthGrid(model.visibleMonth);
let days = weeks.flatMap((week) => week.days);
let monthLabel = new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(
	model.visibleMonth,
);
let focusedKey = dayKey(model.focusedDate);
let tabbable = days.find((day) => day.key === focusedKey) ?? days.find((day) => !day.outsideMonth);

<div mix={[vstack({ gap: 2, align: "start" })]}>
	<Calendar aria-label="Pick a check-in date">
		<Calendar.Header>
			<Calendar.PreviousButton
				aria-label="Previous month"
				mix={[on<HTMLButtonElement, "click">("click", () => model.showPreviousMonth())]}
			/>
			<Calendar.Heading>{monthLabel}</Calendar.Heading>
			<Calendar.NextButton
				aria-label="Next month"
				mix={[on<HTMLButtonElement, "click">("click", () => model.showNextMonth())]}
			/>
		</Calendar.Header>

		<Calendar.Grid
			aria-label={monthLabel}
			mix={[
				calendarKeys(model),
				on<HTMLTableElement, "click">("click", (event) => {
					let cell = (event.target as HTMLElement).closest("[data-date]");
					if (!(cell instanceof HTMLElement) || cell.ariaDisabled === "true") return;

					let day = days.find((candidate) => candidate.key === cell.dataset.date);
					if (day === undefined) return;

					selected = day.key;
					void handle.update();
				}),
			]}
		>
			<Calendar.GridHeader>
				<Calendar.Row>
					{WEEKDAYS.map((weekday) => (
						<Calendar.HeaderCell key={weekday}>{weekday}</Calendar.HeaderCell>
					))}
				</Calendar.Row>
			</Calendar.GridHeader>
			<Calendar.GridBody>
				{weeks.map((week) => (
					<Calendar.Row key={week.key}>
						{week.days.map((day) => (
							<Calendar.Cell
								key={day.key}
								data-date={day.key}
								tabIndex={day.key === tabbable?.key ? 0 : -1}
								aria-selected={day.key === selected ? "true" : undefined}
								aria-disabled={day.date < OPENING_DAY ? "true" : undefined}
								data-unavailable={
									day.date.getDay() === 0 || day.date.getDay() === 6 ? "" : undefined
								}
								data-outside-month={day.outsideMonth ? "" : undefined}
							>
								{day.date.getDate()}
							</Calendar.Cell>
						))}
					</Calendar.Row>
				))}
			</Calendar.GridBody>
		</Calendar.Grid>
	</Calendar>

	<p mix={[text("sm"), fg("neutral")]}>
		Check in {selected} · weekends are unavailable, earlier dates are past
	</p>
</div>