@fayz-ai/plugin-agenda 0.2.0 → 0.3.0

package/src/public/data.ts

@@ -0,0 +1,99 @@
+// ---------------------------------------------------------------------------
+// PublicBookingDataProvider — the narrow data seam the public booking surface
+// depends on. The admin calendar's 15-method AgendaDataProvider is deliberately
+// NOT used here: a public page needs exactly three capabilities, and the
+// Supabase implementation must be anon-safe (SECURITY DEFINER RPCs + whitelisted
+// views) rather than the authenticated table access the admin provider does.
+// ---------------------------------------------------------------------------
+
+import type { TimeSlot } from '../types'
+import { createMockAgendaProvider, type MockAgendaSeed } from '../data/mock'
+import type { PublicService, ContactInfo } from './types'
+
+export interface PublicSlotQuery {
+  /** Staff person id; null → any active professional for the tenant. */
+  assigneeId: string | null
+  /** 'YYYY-MM-DD' local calendar day. */
+  date: string
+  durationMinutes: number
+  slotInterval: number
+}
+
+export interface PublicCreateBookingInput {
+  serviceId: string
+  /** ISO datetime of the chosen slot start. */
+  startsAt: string
+  /** name required; phone should include the country dial for real backends. */
+  contact: ContactInfo
+}
+
+export interface PublicBookingResult {
+  bookingId: string
+  startsAt: string
+  endsAt: string
+}
+
+export interface PublicBookingDataProvider {
+  /** Bookable catalog. Used when the host doesn't pass static `services`. */
+  getServices(): Promise<PublicService[]>
+  getAvailableSlots(query: PublicSlotQuery): Promise<TimeSlot[]>
+  createBooking(input: PublicCreateBookingInput): Promise<PublicBookingResult>
+}
+
+// ---------------------------------------------------------------------------
+// Mock implementation — adapter over the admin mock provider (reuses its slot
+// algorithm + seed machinery, so mock and live behave identically).
+// ---------------------------------------------------------------------------
+
+export interface MockPublicBookingOptions {
+  seed: MockAgendaSeed
+  services: PublicService[]
+  /** The seed professional bookings are created against. */
+  professionalId: string
+}
+
+export function createMockPublicBookingProvider(options: MockPublicBookingOptions): PublicBookingDataProvider {
+  const inner = createMockAgendaProvider({ seed: options.seed })
+  const { services, professionalId } = options
+
+  return {
+    async getServices() {
+      return services
+    },
+    async getAvailableSlots(query) {
+      return inner.getAvailableSlots({
+        assigneeId: query.assigneeId ?? professionalId,
+        date: query.date,
+        durationMinutes: query.durationMinutes,
+        slotInterval: query.slotInterval,
+      })
+    },
+    async createBooking(input) {
+      const service = services.find((s) => s.id === input.serviceId)
+      if (!service) throw new Error('Serviço inválido')
+      const booking = await inner.createBooking({
+        kind: 'appointment',
+        // Mock: the customer is captured as the booking title; the Supabase
+        // path upserts a person record server-side instead.
+        clientId: 'public-guest',
+        professionalId,
+        startsAt: input.startsAt,
+        title: input.contact.name,
+        notes:
+          [input.contact.phone, input.contact.email, input.contact.notes].filter(Boolean).join(' · ') || undefined,
+        services: [
+          {
+            serviceId: service.id,
+            name: service.name,
+            durationMinutes: service.durationMinutes,
+            price: service.price,
+            assigneeId: professionalId,
+          },
+        ],
+      })
+      const endsAt =
+        booking.endsAt ?? new Date(new Date(input.startsAt).getTime() + service.durationMinutes * 60_000).toISOString()
+      return { bookingId: booking.id, startsAt: booking.startsAt, endsAt }
+    },
+  }
+}

package/src/public/format.ts

@@ -0,0 +1,61 @@
+// ---------------------------------------------------------------------------
+// Date/price formatting + calendar helpers shared by the booking widget and
+// its (host-overridable) subcomponents.
+// ---------------------------------------------------------------------------
+
+import { useMemo } from 'react'
+import type { BookingFormatters } from './types'
+
+export const DAY_NAMES = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado']
+export const WEEK_ORDER = [1, 2, 3, 4, 5, 6, 0] // Monday-first, like the reference
+
+export function useFormatters(locale: string, currency: string): BookingFormatters {
+  return useMemo(
+    () => ({
+      price: new Intl.NumberFormat(locale, { style: 'currency', currency }),
+      time: new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }),
+      weekday: new Intl.DateTimeFormat(locale, { weekday: 'short' }),
+      dayNum: new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit' }),
+      longDay: new Intl.DateTimeFormat(locale, { weekday: 'long', day: '2-digit', month: 'long' }),
+      dateShort: new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }),
+      month: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }),
+    }),
+    [locale, currency],
+  )
+}
+
+/** Local 'YYYY-MM-DD' for a Date. */
+export function toIso(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+/** Read a preselected service id from the URL (?service=…), router-agnostic. */
+export function readServiceParam(): string | null {
+  if (typeof window === 'undefined') return null
+  return new URLSearchParams(window.location.search).get('service')
+}
+
+export interface DayCell {
+  iso: string
+  date: Date
+  isToday: boolean
+}
+
+/** 7 consecutive days starting `weekOffset*7` days from today. */
+export function buildWeek(weekOffset: number): DayCell[] {
+  const base = new Date()
+  base.setHours(0, 0, 0, 0)
+  const cells: DayCell[] = []
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(base.getFullYear(), base.getMonth(), base.getDate() + weekOffset * 7 + i)
+    cells.push({ iso: toIso(d), date: d, isToday: weekOffset === 0 && i === 0 })
+  }
+  return cells
+}
+
+/** "13/07/2026 – 21:30 até 22:00 (30min)" */
+export function formatSlotRange(startIso: string, durationMin: number, fmt: BookingFormatters): string {
+  const start = new Date(startIso)
+  const end = new Date(start.getTime() + durationMin * 60_000)
+  return `${fmt.dateShort.format(start)} – ${fmt.time.format(start)} até ${fmt.time.format(end)} (${durationMin}min)`
+}

package/src/public/hooks.ts

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react'
+import { useBooking } from './context'
+import type { PublicService } from './types'
+import type { PublicCreateBookingInput, PublicBookingResult } from './data'
+import type { TimeSlot } from '../types'
+
+/** The resolved bookable services (static option or fetched from the provider). */
+export function useServices(): PublicService[] {
+  return useBooking().services
+}
+
+export interface UsePublicServicesResult {
+  services: PublicService[]
+  loading: boolean
+}
+
+/** Like useServices, but exposes the fetch state for skeletons. */
+export function usePublicServices(): UsePublicServicesResult {
+  const { services, servicesLoading } = useBooking()
+  return { services, loading: servicesLoading }
+}
+
+export interface UseAvailableSlotsResult {
+  slots: TimeSlot[]
+  loading: boolean
+  error: Error | null
+}
+
+/**
+ * Available time slots for a service on a given date. Delegates to
+ * provider.getAvailableSlots — mock now, Supabase RPC when configured, same call.
+ */
+export function useAvailableSlots(params: { serviceId: string | null; date: string | null }): UseAvailableSlotsResult {
+  const { provider, professionalId, services, window } = useBooking()
+  const [slots, setSlots] = useState<TimeSlot[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const { serviceId, date } = params
+  const service = services.find((s) => s.id === serviceId)
+  const durationMinutes = service?.durationMinutes ?? 0
+
+  useEffect(() => {
+    let active = true
+    if (!serviceId || !date || !durationMinutes) {
+      setSlots([])
+      return
+    }
+    setLoading(true)
+    provider
+      .getAvailableSlots({ assigneeId: professionalId, date, durationMinutes, slotInterval: window.slotInterval })
+      .then((result) => {
+        if (!active) return
+        setSlots(result)
+        setError(null)
+      })
+      .catch((err) => {
+        if (!active) return
+        setError(err instanceof Error ? err : new Error(String(err)))
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [provider, professionalId, serviceId, date, durationMinutes, window.slotInterval])
+
+  return { slots, loading, error }
+}
+
+export type CreatePublicBookingInput = PublicCreateBookingInput
+
+export interface UseCreateBookingResult {
+  submit: (input: CreatePublicBookingInput) => Promise<PublicBookingResult>
+  submitting: boolean
+  error: Error | null
+  done: boolean
+}
+
+/** Create a booking via the provider (mock append / Supabase RPC). */
+export function useCreateBooking(): UseCreateBookingResult {
+  const { provider } = useBooking()
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const [done, setDone] = useState(false)
+
+  async function submit(input: CreatePublicBookingInput): Promise<PublicBookingResult> {
+    setSubmitting(true)
+    setError(null)
+    try {
+      const result = await provider.createBooking(input)
+      setDone(true)
+      return result
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err))
+      setError(e)
+      throw e
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return { submit, submitting, error, done }
+}

package/src/public/index.ts

@@ -0,0 +1,68 @@
+// ---------------------------------------------------------------------------
+// @fayz-ai/plugin-agenda/public — customer-facing booking surface.
+//
+// Separate entry from the admin plugin so a website host imports only the lean
+// booking widget + data seam (no @fayz-ai/saas / calendar admin graph).
+//
+// Customization levers (cheapest first): `labels` → `brand` → `components`
+// (swap subcomponents; defaults exported below for wrapping/composition).
+// Data: PublicBookingDataProvider — mock seed by default, Supabase RPCs when a
+// global client is configured (requires `tenantId`).
+// ---------------------------------------------------------------------------
+
+export { createPublicBookingPlugin } from './createPublicBookingPlugin'
+export type { PublicBookingOptions, PublicBookingPlugin } from './createPublicBookingPlugin'
+export { BookingWidget } from './BookingWidget'
+export { BookingProvider, useBooking } from './context'
+export type { PublicBookingContextValue, OnIdentityVerified } from './context'
+export { useServices, usePublicServices, useAvailableSlots, useCreateBooking } from './hooks'
+export type {
+  UsePublicServicesResult,
+  UseAvailableSlotsResult,
+  UseCreateBookingResult,
+  CreatePublicBookingInput,
+} from './hooks'
+
+// Data seam
+export type {
+  PublicBookingDataProvider,
+  PublicSlotQuery,
+  PublicCreateBookingInput,
+  PublicBookingResult,
+  MockPublicBookingOptions,
+} from './data'
+export { createMockPublicBookingProvider } from './data'
+export { createSupabasePublicBookingProvider } from './data.supabase'
+export type { SupabasePublicBookingOptions } from './data.supabase'
+
+// Customization seam — default components (wrap or replace via `components`)
+export { DEFAULT_BOOKING_COMPONENTS } from './components/defaults'
+export { DefaultBrandHeader } from './components/BrandHeader'
+export { DefaultServiceCard } from './components/ServiceCard'
+export { DefaultSidebarExtras } from './components/SidebarExtras'
+export { DefaultStepRailItem } from './components/StepRailItem'
+export { DefaultSuccessPanel } from './components/SuccessPanel'
+
+// Formatting helpers (useful inside custom components)
+export { useFormatters, formatSlotRange, DAY_NAMES, WEEK_ORDER } from './format'
+
+export type {
+  PublicService,
+  ContactInfo,
+  BookingWindow,
+  PublicBookingLabels,
+  WorkingHours,
+  PaymentConfig,
+  ResolvedPayment,
+  BookingBrand,
+  ResolvedBookingBrand,
+  BookingHighlight,
+  BookingFormatters,
+  BookingComponents,
+  BrandHeaderProps,
+  ServiceCardProps,
+  SidebarExtrasProps,
+  SuccessPanelProps,
+  StepRailItemProps,
+  StepState,
+} from './types'

package/src/public/steps/ContactStep.tsx

@@ -0,0 +1,179 @@
+import { Check, ChevronDown, CreditCard, Loader2, ShieldCheck } from 'lucide-react'
+import { COUNTRIES, maskPhone, unmaskPhone, type CountryDef } from '@fayz-ai/core'
+import type { PublicBookingLabels, ResolvedPayment } from '../types'
+
+export interface ContactDraft {
+  name: string
+  phone: string
+  email: string
+  notes: string
+}
+
+interface ContactStepProps {
+  labels: PublicBookingLabels
+  contact: ContactDraft
+  onContactChange: (contact: ContactDraft) => void
+  contactStep: 'phone' | 'code' | 'details'
+  country: CountryDef
+  onCountryChange: (iso2: string) => void
+  code: string
+  onCodeChange: (code: string) => void
+  codeError: boolean
+  onSendCode: () => void
+  onConfirmCode: () => void
+  onBackToPhone: () => void
+  onSubmitDetails: () => void
+  payment: ResolvedPayment | null
+  submitting: boolean
+  error: Error | null
+}
+
+/** Contact step — phone verification first (Quaddro-style), then details. */
+export function ContactStep({
+  labels, contact, onContactChange, contactStep, country, onCountryChange,
+  code, onCodeChange, codeError, onSendCode, onConfirmCode, onBackToPhone,
+  onSubmitDetails, payment, submitting, error,
+}: ContactStepProps) {
+  return (
+    <div>
+      <h3 className="font-heading text-xl font-bold text-foreground">{labels.contactStep}</h3>
+
+      {/* Sub-step: phone */}
+      {contactStep === 'phone' ? (
+        <form onSubmit={(e) => { e.preventDefault(); onSendCode() }}>
+          <p className="mt-1 text-sm text-muted-foreground">{labels.contactIntro}</p>
+          <div className="mt-5">
+            <label htmlFor="bk-phone" className="mb-1 block text-sm font-medium text-foreground">{labels.phoneLabel}</label>
+            <div className="flex">
+              <div className="relative">
+                <select
+                  aria-label="País"
+                  value={country.iso2}
+                  onChange={(e) => onCountryChange(e.target.value)}
+                  className="h-full appearance-none rounded-l-xl border border-r-0 border-border bg-muted py-3 pl-3 pr-8 text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {COUNTRIES.map((c) => (
+                    <option key={c.iso2} value={c.iso2}>{c.flag} {c.dial}</option>
+                  ))}
+                </select>
+                <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              </div>
+              <input
+                id="bk-phone" type="tel" autoComplete="tel" inputMode="tel" value={contact.phone}
+                onChange={(e) => onContactChange({ ...contact, phone: maskPhone(e.target.value, country.mask) })}
+                className="w-full rounded-r-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
+                placeholder={`Ex.: ${maskPhone('11987654321', country.mask)}`}
+              />
+            </div>
+            <p className="mt-2 text-xs text-muted-foreground">{labels.phoneHint}</p>
+          </div>
+          <button
+            type="submit"
+            disabled={unmaskPhone(contact.phone).length < 8}
+            className="mt-5 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {labels.sendCodeCta}
+          </button>
+        </form>
+      ) : null}
+
+      {/* Sub-step: details (after verification) */}
+      {contactStep === 'details' ? (
+        <form onSubmit={(e) => { e.preventDefault(); onSubmitDetails() }}>
+          <p className="mt-1 text-sm text-muted-foreground">{labels.contactIntro}</p>
+          <div className="mt-4 flex items-center justify-between rounded-xl border border-border bg-muted/40 px-4 py-3">
+            <span className="flex items-center gap-2 text-sm text-foreground">
+              <ShieldCheck className="h-4 w-4 text-primary" /> {labels.phoneVerified} · {country.flag} {country.dial} {contact.phone}
+            </span>
+            <button
+              type="button"
+              onClick={onBackToPhone}
+              className="rounded text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {labels.changePhone}
+            </button>
+          </div>
+          <div className="mt-4 space-y-3">
+            <div>
+              <label htmlFor="bk-name" className="mb-1 block text-sm font-medium text-foreground">{labels.nameLabel}</label>
+              <input
+                id="bk-name" type="text" autoComplete="name" value={contact.name}
+                onChange={(e) => onContactChange({ ...contact, name: e.target.value })}
+                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
+                placeholder={labels.namePlaceholder}
+              />
+            </div>
+            <div>
+              <label htmlFor="bk-email" className="mb-1 block text-sm font-medium text-foreground">{labels.emailLabel}</label>
+              <input
+                id="bk-email" type="email" autoComplete="email" inputMode="email" value={contact.email}
+                onChange={(e) => onContactChange({ ...contact, email: e.target.value })}
+                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
+                placeholder={labels.emailPlaceholder}
+              />
+              <p className="mt-1 text-xs text-muted-foreground">{labels.emailHint}</p>
+            </div>
+            <div>
+              <label htmlFor="bk-notes" className="mb-1 block text-sm font-medium text-foreground">{labels.notesLabel}</label>
+              <textarea
+                id="bk-notes" rows={3} value={contact.notes}
+                onChange={(e) => onContactChange({ ...contact, notes: e.target.value })}
+                className="w-full resize-none rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring"
+                placeholder={labels.notesPlaceholder}
+              />
+            </div>
+          </div>
+          {error ? (
+            <p role="alert" className="mt-3 text-sm text-destructive">{labels.submitError}</p>
+          ) : null}
+          <button
+            type="submit"
+            disabled={!contact.name.trim() || submitting}
+            className="mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
+            {payment ? labels.saveAndContinueCta : labels.confirmCta}
+          </button>
+          {!payment ? (
+            <p className="mt-3 flex items-center justify-center gap-1.5 text-xs text-muted-foreground">
+              <CreditCard className="h-3.5 w-3.5" /> {labels.noChargeNote}
+            </p>
+          ) : null}
+        </form>
+      ) : null}
+
+      {/* Code verification modal */}
+      {contactStep === 'code' ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/40 p-4" role="dialog" aria-modal="true" aria-label={labels.codeTitle}>
+          <div className="w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl">
+            <h4 className="font-heading text-lg font-bold text-foreground">{labels.codeTitle}</h4>
+            <p className="mt-1 text-sm text-muted-foreground">{labels.codeBody}</p>
+            <form onSubmit={(e) => { e.preventDefault(); onConfirmCode() }}>
+              <input
+                type="text" inputMode="numeric" value={code} autoFocus
+                onChange={(e) => onCodeChange(e.target.value)}
+                className="mt-4 w-full rounded-xl border border-border bg-background px-4 py-3 text-center text-lg tracking-[0.4em] text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring placeholder:text-sm placeholder:tracking-normal"
+                placeholder="Digite o código"
+              />
+              {codeError ? (
+                <p role="alert" className="mt-2 text-sm text-destructive">{labels.codeInvalid}</p>
+              ) : null}
+              <button
+                type="submit"
+                className="mt-4 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {labels.codeConfirmCta}
+              </button>
+            </form>
+            <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
+              <span>{labels.codeResendHint}</span>
+              <button type="button" onClick={onBackToPhone} className="font-medium text-primary hover:underline">
+                {labels.back}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/public/steps/DateTimeStep.tsx

@@ -0,0 +1,138 @@
+import { ChevronLeft, ChevronRight, Clock } from 'lucide-react'
+import type { TimeSlot } from '../../types'
+import type { DayCell } from '../format'
+import type { BookingFormatters, PublicBookingLabels, WorkingHours } from '../types'
+
+interface DateTimeStepProps {
+  labels: PublicBookingLabels
+  fmt: BookingFormatters
+  week: DayCell[]
+  weekOffset: number
+  maxWeekOffset: number
+  onWeekOffset: (updater: (w: number) => number) => void
+  businessHours: WorkingHours
+  date: string | null
+  onSelectDate: (iso: string) => void
+  slots: TimeSlot[]
+  slotsLoading: boolean
+  slotStart: string | null
+  onSelectSlot: (startIso: string) => void
+  onContinue: () => void
+}
+
+/** Week strip + available-slot grid. */
+export function DateTimeStep({
+  labels, fmt, week, weekOffset, maxWeekOffset, onWeekOffset, businessHours,
+  date, onSelectDate, slots, slotsLoading, slotStart, onSelectSlot, onContinue,
+}: DateTimeStepProps) {
+  const openDays = new Set(businessHours.daysOfWeek)
+  return (
+    <div>
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h3 className="font-heading text-xl font-bold text-foreground">{labels.dateStep}</h3>
+        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Clock className="h-3.5 w-3.5" /> {labels.timezoneNote}
+        </span>
+      </div>
+
+      <div className="mt-5 flex items-center justify-between">
+        <span className="text-sm font-semibold capitalize text-foreground">{fmt.month.format(week[0].date)}</span>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            disabled={weekOffset === 0}
+            onClick={() => onWeekOffset((w) => Math.max(0, w - 1))}
+            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={labels.prevWeek}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            disabled={weekOffset >= maxWeekOffset}
+            onClick={() => onWeekOffset((w) => Math.min(maxWeekOffset, w + 1))}
+            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={labels.nextWeek}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-3 grid grid-cols-7 gap-1.5">
+        {week.map((d) => {
+          const selected = date === d.iso
+          const closed = !openDays.has(d.date.getDay())
+          return (
+            <button
+              key={d.iso}
+              type="button"
+              disabled={closed}
+              onClick={() => onSelectDate(d.iso)}
+              className={[
+                'flex flex-col items-center gap-0.5 rounded-xl border py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                closed
+                  ? 'cursor-not-allowed border-transparent text-muted-foreground/40'
+                  : selected
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : 'border-border text-foreground hover:border-primary/60 hover:bg-accent/40',
+              ].join(' ')}
+            >
+              <span className="text-[11px] font-medium capitalize opacity-80">
+                {fmt.weekday.format(d.date).replace('.', '')}
+              </span>
+              <span className="text-sm font-bold tabular-nums">{fmt.dayNum.format(d.date)}</span>
+            </button>
+          )
+        })}
+      </div>
+
+      {date ? (
+        <div className="mt-6">
+          <p className="mb-2 text-sm font-semibold text-foreground">{labels.slotsHeading}</p>
+          {slotsLoading ? (
+            <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="h-10 animate-pulse rounded-lg bg-muted" />
+              ))}
+            </div>
+          ) : slots.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+              {labels.noSlots}
+            </div>
+          ) : (
+            <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+              {slots.map((s) => {
+                const selected = slotStart === s.start
+                return (
+                  <button
+                    key={s.start}
+                    type="button"
+                    onClick={() => onSelectSlot(s.start)}
+                    className={[
+                      'rounded-lg border py-2.5 text-sm font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                      selected
+                        ? 'border-primary bg-primary text-primary-foreground'
+                        : 'border-border text-foreground hover:border-primary/60 hover:bg-accent/40',
+                    ].join(' ')}
+                  >
+                    {fmt.time.format(new Date(s.start))}
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      <button
+        type="button"
+        disabled={!slotStart}
+        onClick={onContinue}
+        className="mt-6 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {labels.continueCta}
+      </button>
+    </div>
+  )
+}