@tribe-nest/forge 3.64.0 → 3.65.0

package/src/ui/styled/CoachingSlotPicker.tsx

@@ -0,0 +1,874 @@
+import { type CSSProperties, useEffect, useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight, ChevronUp, Check, X } from "lucide-react";
+import type { CoachingProduct } from "../../types/models";
+import type { PickedSlot, useCoachingBooking } from "../headless/coaching/useCoachingBooking";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { bookingSessionRange } from "../format/bookingPricing";
+import { buttonStyle } from "./Button";
+import { Loading } from "./Loading";
+import { CallHelpHint } from "../media/CallHelpHint";
+
+type Booking = ReturnType<typeof useCoachingBooking>;
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+/**
+ * The visitor's LOCAL calendar day of an instant, as `YYYY-MM-DD`.
+ *
+ * Times are shown in the visitor's timezone, so they must be GROUPED by it too.
+ * The previous week list grouped by `toISOString()` (the UTC date) while
+ * printing local times, which put a late-evening Lagos slot under the next day.
+ */
+export const localDayKey = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+
+const parseDayKey = (key: string) => {
+  const [y, m, d] = key.split("-").map(Number);
+  return new Date(y!, m! - 1, d!);
+};
+
+const timeLabel = (iso: string) =>
+  new Date(iso).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+const shortDayLabel = (d: Date) => d.toLocaleDateString(undefined, { weekday: "short", day: "numeric", month: "short" });
+const longDayLabel = (d: Date) => d.toLocaleDateString(undefined, { weekday: "long", day: "numeric", month: "long" });
+
+/** True below the phone breakpoint. SSR renders the desktop layout. */
+export function useNarrowViewport(breakpoint = 640) {
+  const [narrow, setNarrow] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const apply = () => setNarrow(query.matches);
+    apply();
+    query.addEventListener?.("change", apply);
+    return () => query.removeEventListener?.("change", apply);
+  }, [breakpoint]);
+  return narrow;
+}
+
+/**
+ * Day first, then time: a month calendar where days with open times are
+ * filled, and the chosen day's times beside it (below it, on its own screen,
+ * on a phone). Multi-session products collect every pick in a basket with the
+ * price following the count; the basket is reserved in one call.
+ */
+export function CoachingSlotPicker({
+  c,
+  product,
+  fmt,
+  narrow,
+}: {
+  c: Booking;
+  product: CoachingProduct;
+  fmt: (n: number) => string;
+  narrow: boolean;
+}) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const range = bookingSessionRange(product);
+  const multi = range.max > 1;
+
+  const byDay = useMemo(() => {
+    const map = new Map<string, PickedSlot[]>();
+    for (const slot of c.availability.data ?? []) {
+      const key = localDayKey(new Date(slot.startTime));
+      const list = map.get(key) ?? [];
+      list.push(slot);
+      map.set(key, list);
+    }
+    for (const list of map.values()) list.sort((x, y) => Date.parse(x.startTime) - Date.parse(y.startTime));
+    return map;
+  }, [c.availability.data]);
+
+  const picksPerDay = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const s of c.selectedSlots) {
+      if (!s.startTime) continue;
+      const key = localDayKey(new Date(s.startTime));
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    return counts;
+  }, [c.selectedSlots]);
+
+  const [activeDay, setActiveDay] = useState<string | null>(null);
+  const [screen, setScreen] = useState<"days" | "times">("days");
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // On a wide screen the first open day is shown straight away; a phone opens
+  // on the month and waits for a tap.
+  const firstOpenDay = useMemo(() => [...byDay.keys()].sort()[0] ?? null, [byDay]);
+  useEffect(() => {
+    if (activeDay && byDay.has(activeDay)) return;
+    if (activeDay && parseDayKey(activeDay).getMonth() === c.monthStart.getMonth() && !c.availability.isLoading) {
+      // Still this month, just emptied (someone booked it): keep it visible.
+      return;
+    }
+    if (!narrow) setActiveDay(firstOpenDay);
+  }, [activeDay, byDay, firstOpenDay, narrow, c.monthStart, c.availability.isLoading]);
+
+  const pick = (slot: PickedSlot) => {
+    setNotice(null);
+    const wasPicked = c.selectedSlots.some((s) => s.id === slot.id);
+    const ok = c.toggleSlot(slot);
+    if (!ok) {
+      setNotice(
+        range.min === range.max
+          ? t("forge.coaching_booking.basket_full_package", { count: range.max })
+          : t("forge.coaching_booking.basket_full_limit", { max: range.max }),
+      );
+      return;
+    }
+    if (multi && !wasPicked && c.selectedSlots.length + 1 === range.max) {
+      setNotice(
+        range.min === range.max
+          ? t("forge.coaching_booking.basket_full_package", { count: range.max })
+          : t("forge.coaching_booking.basket_full_limit", { max: range.max }),
+      );
+    }
+  };
+
+  const tzAbbr = (() => {
+    try {
+      return (
+        new Intl.DateTimeFormat(undefined, { timeZoneName: "short" })
+          .formatToParts(new Date())
+          .find((p) => p.type === "timeZoneName")?.value ?? ""
+      );
+    } catch {
+      return "";
+    }
+  })();
+
+  const count = c.selectedSlots.length;
+  const total = c.quotedTotal;
+  const continueLabel = c.isProcessing
+    ? t("forge.coaching_booking.reserving")
+    : c.canReserve
+      ? total > 0
+        ? t("forge.coaching_booking.continue_with_total", { amount: fmt(total) })
+        : t("forge.coaching_booking.continue")
+      : range.min > 1 && count < range.min
+        ? t("forge.coaching_booking.pick_more", { count: range.min - count })
+        : t("forge.coaching_booking.pick_a_time");
+
+  const calendar = (
+    <MonthCalendar
+      c={c}
+      theme={theme}
+      byDay={byDay}
+      picksPerDay={picksPerDay}
+      activeDay={activeDay}
+      compact={narrow}
+      onPickDay={(key) => {
+        setNotice(null);
+        setActiveDay(key);
+        if (narrow) setScreen("times");
+      }}
+    />
+  );
+
+  const daySlots = activeDay ? (byDay.get(activeDay) ?? []) : [];
+  const full = multi && count >= range.max;
+
+  const times = (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, minWidth: 0 }}>
+      {activeDay ? (
+        <>
+          <h3 data-testid="booking-day-title" style={{ fontSize: 17, fontWeight: 700, margin: 0 }}>
+            {longDayLabel(parseDayKey(activeDay))}
+          </h3>
+          {daySlots.length === 0 ? (
+            <p style={emptyStyle(theme)}>{t("forge.coaching_booking.no_times_day")}</p>
+          ) : (
+            <div
+              data-testid="booking-times"
+              style={
+                narrow
+                  ? { display: "flex", flexDirection: "column", gap: 8 }
+                  : { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(104px, 1fr))", gap: 8 }
+              }
+            >
+              {daySlots.map((slot) => {
+                const picked = c.selectedSlots.some((s) => s.id === slot.id);
+                const disabled = c.isProcessing || (!picked && full);
+                return (
+                  <button
+                    key={slot.id}
+                    type="button"
+                    data-testid="booking-time"
+                    aria-pressed={picked}
+                    disabled={disabled}
+                    onClick={() => pick(slot)}
+                    style={timeButtonStyle(theme, picked, disabled, narrow)}
+                  >
+                    {/* One row, never wrapped: host sites' base CSS makes an svg a
+                        block, which put the check on its own line above the time. */}
+                    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}>
+                      {picked && <Check size={14} style={{ flex: "none", display: "block" }} aria-hidden="true" />}
+                      {timeLabel(slot.startTime)}
+                    </span>
+                    {narrow && (
+                      <span style={{ fontSize: 12, fontWeight: 500, opacity: 0.75 }}>
+                        {t("forge.coaching_booking.duration_short", { minutes: product.durationMinutes })}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </>
+      ) : (
+        <p style={emptyStyle(theme)}>{t("forge.coaching_booking.pick_day")}</p>
+      )}
+      {notice && (
+        <p role="status" style={noticeStyle(theme)}>
+          {notice}
+        </p>
+      )}
+    </div>
+  );
+
+  const basketTitle = !multi
+    ? t("forge.coaching_booking.basket_title_single")
+    : range.min === range.max
+      ? t("forge.coaching_booking.basket_title_package", { count: range.max })
+      : t("forge.coaching_booking.basket_title_many");
+  const basketCount =
+    range.min === range.max
+      ? t("forge.coaching_booking.basket_count_package", { picked: count, count: range.max })
+      : t("forge.coaching_booking.basket_count_range", { picked: count, max: range.max });
+  const priceLine =
+    c.pricingMode === "package"
+      ? t("forge.coaching_booking.package_one_price", { count: range.max })
+      : c.pricingMode === "per_session"
+        ? count > 0
+          ? t("forge.coaching_booking.per_session_calc", { count, price: fmt(Number(product.price)) })
+          : t("forge.coaching_booking.price_per_session", { price: fmt(Number(product.price)) })
+        : null;
+
+  const basketChips = (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }} data-testid="booking-basket">
+      {c.selectedSlots.map((s) => (
+        <span key={s.id} style={chipStyle(theme)} data-testid="booking-basket-item">
+          {s.startTime ? `${shortDayLabel(new Date(s.startTime))}, ${timeLabel(s.startTime)}` : ""}
+          {multi && (
+            <button
+              type="button"
+              aria-label={t("forge.coaching_booking.remove_time", {
+                time: s.startTime ? `${shortDayLabel(new Date(s.startTime))} ${timeLabel(s.startTime)}` : "",
+              })}
+              onClick={() => c.removeSlot(s.id)}
+              style={chipRemoveStyle(theme)}
+            >
+              <X size={12} />
+            </button>
+          )}
+        </span>
+      ))}
+      {count === 0 && <span style={ghostChipStyle(theme)}>{t("forge.coaching_booking.basket_empty")}</span>}
+      {range.min === range.max && multi && count > 0 && count < range.max && (
+        <span style={ghostChipStyle(theme)}>{t("forge.coaching_booking.basket_more", { count: range.max - count })}</span>
+      )}
+    </div>
+  );
+
+  const meter = multi ? (
+    <span aria-hidden="true" style={{ display: "inline-flex", gap: 3 }}>
+      {Array.from({ length: Math.min(range.max, 12) }, (_, i) => (
+        <i
+          key={i}
+          style={{
+            width: 14,
+            height: 5,
+            borderRadius: 3,
+            background: i < count ? theme.colors.primary : a(theme.colors.text, 0.15),
+          }}
+        />
+      ))}
+    </span>
+  ) : null;
+
+  const packageHelp =
+    c.pricingMode === "package" ? (
+      <CallHelpHint label={t("forge.coaching_booking.package_help_label")}>
+        {t("forge.coaching_booking.package_help_body")}
+      </CallHelpHint>
+    ) : null;
+
+  const continueButton = (
+    <button
+      type="button"
+      data-testid="booking-continue"
+      onClick={c.reserveSelected}
+      disabled={!c.canReserve || c.isProcessing}
+      style={{ ...buttonStyle(theme, { variant: "primary" }), opacity: !c.canReserve || c.isProcessing ? 0.55 : 1, whiteSpace: "nowrap" }}
+    >
+      {continueLabel}
+    </button>
+  );
+
+  const errorLine = c.error ? (
+    <p role="alert" style={{ color: "#ef4444", fontSize: 14, margin: 0 }}>
+      {c.error}
+    </p>
+  ) : null;
+
+  const tzLine = (
+    <p style={{ fontSize: 12.5, color: a(theme.colors.text, 0.6), margin: 0 }}>
+      {tzAbbr
+        ? t("forge.coaching_booking.timezone_note_named", { timezone: tzAbbr })
+        : t("forge.coaching_booking.timezone_note")}
+    </p>
+  );
+
+  // ── Phone: one thing per screen, basket pinned to the thumb zone ─────────────
+  if (narrow) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", minHeight: "100%", position: "relative" }}>
+        <div style={{ flex: 1, padding: "4px 0 16px", display: "flex", flexDirection: "column", gap: 12 }}>
+          {screen === "days" ? (
+            <>
+              {calendar}
+              {firstOpenDay && (
+                <button
+                  type="button"
+                  data-testid="booking-next-available"
+                  onClick={() => {
+                    setActiveDay(firstOpenDay);
+                    setScreen("times");
+                  }}
+                  style={nextAvailableStyle(theme)}
+                >
+                  <span style={{ textAlign: "left" }}>
+                    <span style={{ display: "block", fontSize: 12, opacity: 0.65, fontWeight: 600 }}>
+                      {t("forge.coaching_booking.next_available")}
+                    </span>
+                    {shortDayLabel(parseDayKey(firstOpenDay))}
+                  </span>
+                  <ChevronRight size={18} />
+                </button>
+              )}
+              {tzLine}
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                data-testid="booking-back-to-month"
+                onClick={() => setScreen("days")}
+                style={{ ...linkButtonStyle(theme), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 4 }}
+              >
+                <ChevronLeft size={16} style={{ flex: "none", display: "block" }} aria-hidden="true" />
+                {c.monthStart.toLocaleDateString(undefined, { month: "long" })}
+              </button>
+              <DayStrip
+                theme={theme}
+                days={[...byDay.keys()].sort()}
+                activeDay={activeDay}
+                picksPerDay={picksPerDay}
+                onPick={(key) => {
+                  setNotice(null);
+                  setActiveDay(key);
+                }}
+              />
+              {times}
+            </>
+          )}
+          {errorLine}
+        </div>
+        <div style={mobileBarStyle(theme)}>
+          <button
+            type="button"
+            data-testid="booking-basket-toggle"
+            onClick={() => multi && setSheetOpen(true)}
+            style={{ flex: 1, minWidth: 0, textAlign: "left", background: "transparent", border: 0, padding: 0, color: theme.colors.text, cursor: multi ? "pointer" : "default", fontFamily: theme.fontFamily }}
+          >
+            {multi ? (
+              <>
+                <b style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 14 }}>
+                  {basketCount}
+                  {count > 0 && <ChevronUp size={14} style={{ flex: "none", display: "block" }} aria-hidden="true" />}
+                </b>
+                <span style={{ fontSize: 12, opacity: 0.65 }}>{priceLine}</span>
+              </>
+            ) : c.selectedSlots[0]?.startTime ? (
+              <>
+                <b style={{ display: "block", fontSize: 14 }}>{shortDayLabel(new Date(c.selectedSlots[0].startTime))}</b>
+                <span style={{ fontSize: 12, opacity: 0.65 }}>{timeLabel(c.selectedSlots[0].startTime)}</span>
+              </>
+            ) : (
+              <b style={{ fontSize: 14, opacity: 0.7 }}>{t("forge.coaching_booking.basket_empty")}</b>
+            )}
+          </button>
+          {continueButton}
+        </div>
+        {sheetOpen && multi && (
+          <>
+            <div onClick={() => setSheetOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.42)", zIndex: 60 }} />
+            <div role="dialog" aria-label={basketTitle} data-testid="booking-basket-sheet" style={sheetStyle(theme)}>
+              <div style={{ width: 40, height: 5, borderRadius: 3, background: a(theme.colors.text, 0.2), margin: "0 auto 12px" }} />
+              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                <h3 style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{basketTitle}</h3>
+                {packageHelp}
+              </div>
+              <p style={{ fontSize: 13, opacity: 0.65, margin: "4px 0 12px" }}>
+                {c.pricingMode === "package"
+                  ? t("forge.coaching_booking.package_total", { price: fmt(total), count: range.max })
+                  : priceLine}
+              </p>
+              <div style={{ overflowY: "auto", display: "flex", flexDirection: "column" }}>
+                {c.selectedSlots.map((s) => (
+                  <div key={s.id} style={sheetRowStyle(theme)}>
+                    <span>{s.startTime ? `${shortDayLabel(new Date(s.startTime))}, ${timeLabel(s.startTime)}` : ""}</span>
+                    <button type="button" onClick={() => c.removeSlot(s.id)} style={sheetRemoveStyle(theme)}>
+                      {t("forge.coaching_booking.remove")}
+                    </button>
+                  </div>
+                ))}
+                {range.min === range.max &&
+                  Array.from({ length: Math.max(0, range.max - count) }, (_, i) => (
+                    <div key={`empty-${i}`} style={{ ...sheetRowStyle(theme), opacity: 0.45, fontStyle: "italic" }}>
+                      {t("forge.coaching_booking.not_picked_yet")}
+                    </div>
+                  ))}
+              </div>
+              <button
+                type="button"
+                onClick={() => setSheetOpen(false)}
+                style={{ ...buttonStyle(theme, { variant: "primary", fullWidth: true }), marginTop: 14 }}
+              >
+                {t("forge.coaching_booking.done")}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // ── Wide: calendar beside the day's times, basket and total underneath ───────
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)", gap: 24, alignItems: "start" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          {calendar}
+          {tzLine}
+        </div>
+        {c.availability.isLoading ? <Loading label={t("forge.coaching_booking.loading_slots")} /> : times}
+      </div>
+      <div
+        style={{
+          borderTop: `1px solid ${a(theme.colors.text, 0.12)}`,
+          paddingTop: 16,
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          gap: 16,
+        }}
+      >
+        <div style={{ flex: "1 1 260px", minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+            <b style={{ fontSize: 15 }}>{basketTitle}</b>
+            {multi && <span style={{ fontSize: 13, opacity: 0.65 }}>{basketCount}</span>}
+            {meter}
+          </div>
+          {basketChips}
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
+          {priceLine && (
+            <span style={{ fontSize: 13, opacity: 0.7, display: "inline-flex", alignItems: "center", gap: 4 }}>
+              {priceLine}
+              {packageHelp}
+            </span>
+          )}
+          {continueButton}
+        </div>
+      </div>
+      {errorLine}
+    </div>
+  );
+}
+
+// ── Month grid ────────────────────────────────────────────────────────────────
+function MonthCalendar({
+  c,
+  theme,
+  byDay,
+  picksPerDay,
+  activeDay,
+  compact,
+  onPickDay,
+}: {
+  c: Booking;
+  theme: ForgeTheme;
+  byDay: Map<string, PickedSlot[]>;
+  picksPerDay: Map<string, number>;
+  activeDay: string | null;
+  compact: boolean;
+  onPickDay: (key: string) => void;
+}) {
+  const t = useForgeT();
+  const month = c.monthStart;
+  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const lead = new Date(month.getFullYear(), month.getMonth(), 1).getDay();
+  const todayKey = localDayKey(new Date());
+  // Weekday initials in the visitor's locale, Sunday first (matches `lead`).
+  const weekdays = Array.from({ length: 7 }, (_, i) =>
+    new Date(2026, 1, 1 + i).toLocaleDateString(undefined, { weekday: compact ? "narrow" : "short" }),
+  );
+
+  const nav = (disabled: boolean): CSSProperties => ({
+    width: 36,
+    height: 36,
+    borderRadius: 999,
+    border: `1px solid ${a(theme.colors.text, 0.18)}`,
+    background: "transparent",
+    color: theme.colors.text,
+    display: "grid",
+    placeItems: "center",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.35 : 1,
+  });
+
+  return (
+    <div data-testid="booking-calendar">
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
+        <h3 data-testid="booking-month-label" style={{ fontSize: 17, fontWeight: 700, margin: 0 }}>
+          {month.toLocaleDateString(undefined, { month: "long", year: "numeric" })}
+        </h3>
+        <div style={{ display: "flex", gap: 6 }}>
+          <button
+            type="button"
+            aria-label={t("forge.coaching_booking.aria_prev_month")}
+            data-testid="booking-prev-month"
+            disabled={!c.canGoPrevMonth}
+            onClick={c.goPrevMonth}
+            style={nav(!c.canGoPrevMonth)}
+          >
+            <ChevronLeft size={16} />
+          </button>
+          <button
+            type="button"
+            aria-label={t("forge.coaching_booking.aria_next_month")}
+            data-testid="booking-next-month"
+            disabled={!c.canGoNextMonth}
+            onClick={c.goNextMonth}
+            style={nav(!c.canGoNextMonth)}
+          >
+            <ChevronRight size={16} />
+          </button>
+        </div>
+      </div>
+      <div role="grid" style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 4, textAlign: "center" }}>
+        {weekdays.map((w, i) => (
+          <div key={i} style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.05em", opacity: 0.5, padding: "2px 0 6px", textTransform: "uppercase" }}>
+            {w}
+          </div>
+        ))}
+        {Array.from({ length: lead }, (_, i) => (
+          <div key={`lead-${i}`} />
+        ))}
+        {Array.from({ length: daysInMonth }, (_, i) => {
+          const date = new Date(month.getFullYear(), month.getMonth(), i + 1);
+          const key = localDayKey(date);
+          const open = (byDay.get(key)?.length ?? 0) > 0;
+          const active = key === activeDay;
+          const picks = picksPerDay.get(key) ?? 0;
+          const label = t(open ? "forge.coaching_booking.day_has_times" : "forge.coaching_booking.day_no_times", {
+            date: longDayLabel(date),
+          });
+          return (
+            <button
+              key={key}
+              type="button"
+              data-testid="booking-day"
+              data-day={key}
+              data-open={open ? "true" : "false"}
+              aria-label={label}
+              aria-pressed={active}
+              disabled={!open}
+              onClick={() => onPickDay(key)}
+              style={{
+                position: "relative",
+                width: "100%",
+                maxWidth: 44,
+                aspectRatio: "1",
+                margin: "0 auto",
+                borderRadius: 999,
+                border: 0,
+                fontFamily: theme.fontFamily,
+                fontSize: 14,
+                fontVariantNumeric: "tabular-nums",
+                fontWeight: open ? 700 : 400,
+                cursor: open ? "pointer" : "default",
+                background: active ? theme.colors.primary : open ? a(theme.colors.primary, 0.12) : "transparent",
+                color: active ? "#fff" : open ? theme.colors.primary : a(theme.colors.text, 0.35),
+                textDecoration: key === todayKey ? "underline" : "none",
+                textUnderlineOffset: 3,
+              }}
+            >
+              {i + 1}
+              {picks > 0 && (
+                <span
+                  data-testid="booking-day-picks"
+                  style={{
+                    position: "absolute",
+                    top: -3,
+                    right: -3,
+                    minWidth: 17,
+                    height: 17,
+                    padding: "0 4px",
+                    borderRadius: 999,
+                    background: theme.colors.text,
+                    color: theme.colors.background,
+                    fontSize: 10.5,
+                    fontWeight: 700,
+                    display: "grid",
+                    placeItems: "center",
+                    textDecoration: "none",
+                  }}
+                >
+                  {picks}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+      {!c.availability.isLoading && byDay.size === 0 && (
+        <p style={{ ...emptyStyle(theme), marginTop: 12 }}>{t("forge.coaching_booking.no_times_month")}</p>
+      )}
+    </div>
+  );
+}
+
+// ── Phone: swipeable strip of this month's open days ─────────────────────────
+function DayStrip({
+  theme,
+  days,
+  activeDay,
+  picksPerDay,
+  onPick,
+}: {
+  theme: ForgeTheme;
+  days: string[];
+  activeDay: string | null;
+  picksPerDay: Map<string, number>;
+  onPick: (key: string) => void;
+}) {
+  return (
+    <div
+      data-testid="booking-day-strip"
+      style={{ display: "flex", gap: 6, overflowX: "auto", margin: "0 -16px", padding: "7px 16px 6px", scrollbarWidth: "none" }}
+    >
+      {days.map((key) => {
+        const date = parseDayKey(key);
+        const active = key === activeDay;
+        const picks = picksPerDay.get(key) ?? 0;
+        return (
+          <button
+            key={key}
+            type="button"
+            aria-pressed={active}
+            onClick={() => onPick(key)}
+            style={{
+              position: "relative",
+              flex: "none",
+              width: 50,
+              padding: "7px 0",
+              borderRadius: 12,
+              border: `1.5px solid ${active ? theme.colors.primary : a(theme.colors.text, 0.15)}`,
+              background: active ? theme.colors.primary : "transparent",
+              color: active ? "#fff" : theme.colors.text,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              fontFamily: theme.fontFamily,
+              cursor: "pointer",
+            }}
+          >
+            <small style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", opacity: active ? 0.9 : 0.6 }}>
+              {date.toLocaleDateString(undefined, { weekday: "short" })}
+            </small>
+            <b style={{ fontSize: 17 }}>{date.getDate()}</b>
+            {picks > 0 && (
+              <span
+                style={{
+                  position: "absolute",
+                  top: -6,
+                  right: -4,
+                  minWidth: 17,
+                  height: 17,
+                  borderRadius: 999,
+                  background: theme.colors.text,
+                  color: theme.colors.background,
+                  fontSize: 10.5,
+                  fontWeight: 700,
+                  display: "grid",
+                  placeItems: "center",
+                  padding: "0 4px",
+                }}
+              >
+                {picks}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+const timeButtonStyle = (theme: ForgeTheme, picked: boolean, disabled: boolean, narrow: boolean): CSSProperties => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: narrow ? "space-between" : "center",
+  minHeight: narrow ? 52 : 44,
+  padding: narrow ? "0 16px" : "10px 8px",
+  borderRadius: theme.cornerRadius,
+  border: `1.5px ${disabled && !picked ? "dashed" : "solid"} ${picked ? theme.colors.primary : a(theme.colors.text, 0.18)}`,
+  background: picked ? theme.colors.primary : "transparent",
+  color: picked ? "#fff" : theme.colors.text,
+  fontFamily: theme.fontFamily,
+  fontWeight: 700,
+  fontSize: narrow ? 15.5 : 14,
+  fontVariantNumeric: "tabular-nums",
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled && !picked ? 0.4 : 1,
+});
+
+const emptyStyle = (theme: ForgeTheme): CSSProperties => ({
+  margin: 0,
+  padding: 14,
+  borderRadius: theme.cornerRadius,
+  background: a(theme.colors.text, 0.05),
+  fontSize: 14,
+  opacity: 0.8,
+});
+
+const noticeStyle = (theme: ForgeTheme): CSSProperties => ({
+  margin: 0,
+  padding: "9px 12px",
+  borderRadius: theme.cornerRadius,
+  background: a(theme.colors.primary, 0.1),
+  color: theme.colors.text,
+  fontSize: 13,
+  fontWeight: 600,
+});
+
+const chipStyle = (theme: ForgeTheme): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "5px 6px 5px 12px",
+  borderRadius: 999,
+  background: a(theme.colors.text, 0.07),
+  fontSize: 13,
+  fontWeight: 600,
+  fontVariantNumeric: "tabular-nums",
+});
+
+const chipRemoveStyle = (theme: ForgeTheme): CSSProperties => ({
+  width: 22,
+  height: 22,
+  borderRadius: 999,
+  border: 0,
+  display: "grid",
+  placeItems: "center",
+  background: theme.colors.background,
+  color: theme.colors.text,
+  cursor: "pointer",
+});
+
+const ghostChipStyle = (theme: ForgeTheme): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "5px 12px",
+  borderRadius: 999,
+  border: `1.5px dashed ${a(theme.colors.text, 0.2)}`,
+  fontSize: 13,
+  opacity: 0.6,
+});
+
+const linkButtonStyle = (theme: ForgeTheme): CSSProperties => ({
+  border: 0,
+  background: "transparent",
+  padding: 0,
+  color: theme.colors.primary,
+  fontWeight: 700,
+  fontSize: 14,
+  cursor: "pointer",
+  fontFamily: theme.fontFamily,
+});
+
+const nextAvailableStyle = (theme: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "12px 14px",
+  borderRadius: theme.cornerRadius,
+  border: `1.5px solid ${a(theme.colors.text, 0.15)}`,
+  background: "transparent",
+  color: theme.colors.text,
+  fontWeight: 700,
+  fontFamily: theme.fontFamily,
+  cursor: "pointer",
+});
+
+const mobileBarStyle = (theme: ForgeTheme): CSSProperties => ({
+  position: "sticky",
+  bottom: 0,
+  margin: "0 -16px",
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  padding: "10px 16px calc(14px + env(safe-area-inset-bottom, 0px))",
+  borderTop: `1px solid ${a(theme.colors.text, 0.12)}`,
+  background: theme.colors.background,
+  zIndex: 2,
+});
+
+const sheetStyle = (theme: ForgeTheme): CSSProperties => ({
+  position: "fixed",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 61,
+  maxHeight: "78vh",
+  display: "flex",
+  flexDirection: "column",
+  padding: "8px 16px calc(20px + env(safe-area-inset-bottom, 0px))",
+  borderRadius: "20px 20px 0 0",
+  background: theme.colors.background,
+  color: theme.colors.text,
+  fontFamily: theme.fontFamily,
+});
+
+const sheetRowStyle = (theme: ForgeTheme): CSSProperties => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "12px 0",
+  borderBottom: `1px solid ${a(theme.colors.text, 0.1)}`,
+  fontWeight: 600,
+  fontVariantNumeric: "tabular-nums",
+});
+
+const sheetRemoveStyle = (theme: ForgeTheme): CSSProperties => ({
+  border: 0,
+  borderRadius: 999,
+  padding: "6px 12px",
+  background: a(theme.colors.text, 0.07),
+  color: theme.colors.text,
+  fontSize: 12.5,
+  fontWeight: 700,
+  cursor: "pointer",
+  fontFamily: theme.fontFamily,
+});