@ossy/booking 1.15.6 → 1.16.0

package/src/public-booking.page.jsx

@@ -1,77 +1,38 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useRouter } from '@ossy/router-react'
+import { View, Title, Text, Button, Input, Textarea, Alert, useLocale } from '@ossy/design-system'
 
-// ---------------------------------------------------------------------------
-// Inline design tokens
-// ---------------------------------------------------------------------------
-const COLOR = {
-  bg: '#f5f5f5',
-  surface: '#ffffff',
-  surfaceHover: '#f8f8f8',
-  border: '#e2e2e2',
-  primary: '#111111',
-  primaryText: '#ffffff',
-  secondary: '#555555',
-  muted: '#999999',
-  success: '#16a34a',
-  successBg: '#f0fdf4',
-  slotAvailable: '#111111',
-  slotAvailableBg: '#f0fdf4',
-  slotSelected: '#111111',
-  slotSelectedBg: '#dcfce7',
-  error: '#dc2626',
-}
-
-const FONT = 'system-ui, -apple-system, sans-serif'
-
-// ---------------------------------------------------------------------------
-// Swedish locale helpers
-// ---------------------------------------------------------------------------
-const SV_MONTHS = [
-  'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
-  'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December',
+const MONTH_KEYS = [
+  'publicBooking.month.january', 'publicBooking.month.february', 'publicBooking.month.march',
+  'publicBooking.month.april', 'publicBooking.month.may', 'publicBooking.month.june',
+  'publicBooking.month.july', 'publicBooking.month.august', 'publicBooking.month.september',
+  'publicBooking.month.october', 'publicBooking.month.november', 'publicBooking.month.december',
+]
+const WEEKDAY_SHORT_KEYS = [
+  'publicBooking.weekday.sun', 'publicBooking.weekday.mon', 'publicBooking.weekday.tue',
+  'publicBooking.weekday.wed', 'publicBooking.weekday.thu', 'publicBooking.weekday.fri', 'publicBooking.weekday.sat',
 ]
-const SV_WEEKDAYS_SHORT = ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
-const SV_WEEKDAYS_LONG = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
 
-function formatDate(isoString) {
+function formatDate (isoString, t, language) {
   const d = new Date(isoString)
-  const weekday = SV_WEEKDAYS_LONG[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const hours = String(d.getHours()).padStart(2, '0')
-  const minutes = String(d.getMinutes()).padStart(2, '0')
-  return `${weekday} ${day} ${month} kl. ${hours}:${minutes}`
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+  return new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' }).format(d)
 }
 
-function formatTime(isoString) {
+function formatTime (isoString) {
   const d = new Date(isoString)
   return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
 }
 
-function getTimezoneLabel(isoString) {
-  try {
-    return new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(new Date(isoString))
-      .find(p => p.type === 'timeZoneName')?.value ?? ''
-  } catch {
-    return ''
-  }
-}
-
-function formatSlotRange(startIso, durationMinutes) {
+function formatSlotRange (startIso, durationMinutes, language) {
   const start = new Date(startIso)
   const end = new Date(start.getTime() + durationMinutes * 60 * 1000)
-  const startStr = formatTime(startIso)
-  const endStr = formatTime(end.toISOString())
-  const tz = getTimezoneLabel(startIso)
-  return tz ? `${startStr}–${endStr} (${tz})` : `${startStr}–${endStr}`
+  const tz = new Intl.DateTimeFormat(language === 'sv' ? 'sv-SE' : 'en-GB', { timeZoneName: 'short', hour: 'numeric' }).formatToParts(start).find(p => p.type === 'timeZoneName')?.value ?? ''
+  const range = `${formatTime(startIso)}–${formatTime(end.toISOString())}`
+  return tz ? `${range} (${tz})` : range
 }
 
-// ---------------------------------------------------------------------------
-// Group slots by local date key "YYYY-MM-DD"
-// ---------------------------------------------------------------------------
-function groupSlotsByDate(slots) {
+function groupSlotsByDate (slots) {
   const groups = {}
   for (const slot of slots) {
     const d = new Date(slot.startAt)
@@ -82,660 +43,201 @@ function groupSlotsByDate(slots) {
   return groups
 }
 
-function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate()
-}
+function getDaysInMonth (year, month) { return new Date(year, month + 1, 0).getDate() }
+function getFirstDayOfMonth (year, month) { return (new Date(year, month, 1).getDay() + 6) % 7 }
 
-function getFirstDayOfMonth(year, month) {
-  // 0=Sun…6=Sat; we want Mon-first grid (0=Mon…6=Sun)
-  const raw = new Date(year, month, 1).getDay()
-  return (raw + 6) % 7
-}
-
-// ---------------------------------------------------------------------------
-// Components
-// ---------------------------------------------------------------------------
-
-function Spinner() {
-  return (
-    <div
-      style={{
-        width: 24,
-        height: 24,
-        border: '3px solid #e2e2e2',
-        borderTopColor: '#111111',
-        borderRadius: '50%',
-        animation: 'spin 0.7s linear infinite',
-        margin: '0 auto',
-      }}
-    />
-  )
-}
-
-function MonthCalendar({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth }) {
+function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth, t }) {
   const daysInMonth = getDaysInMonth(year, month)
   const firstDayOffset = getFirstDayOfMonth(year, month)
   const today = new Date()
   const todayKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
-
   const cells = []
   for (let i = 0; i < firstDayOffset; i++) cells.push(null)
   for (let d = 1; d <= daysInMonth; d++) cells.push(d)
 
   return (
-    <div>
-      {/* Month nav */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-        <button
-          onClick={onPrevMonth}
-          style={{
-            background: 'none',
-            border: `1px solid ${COLOR.border}`,
-            borderRadius: 8,
-            padding: '6px 12px',
-            cursor: 'pointer',
-            fontFamily: FONT,
-            fontSize: 14,
-            color: COLOR.primary,
-          }}
-        >
-          ‹
-        </button>
-        <span style={{ fontWeight: 600, fontSize: 15, color: COLOR.primary }}>
-          {SV_MONTHS[month]} {year}
-        </span>
-        <button
-          onClick={onNextMonth}
-          style={{
-            background: 'none',
-            border: `1px solid ${COLOR.border}`,
-            borderRadius: 8,
-            padding: '6px 12px',
-            cursor: 'pointer',
-            fontFamily: FONT,
-            fontSize: 14,
-            color: COLOR.primary,
-          }}
-        >
-          ›
-        </button>
-      </div>
-
-      {/* Weekday headers */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 4 }}>
-        {SV_WEEKDAYS_SHORT.map((d, i) => (
-          <div
-            key={i}
-            style={{
-              textAlign: 'center',
-              fontSize: 11,
-              fontWeight: 600,
-              color: COLOR.muted,
-              padding: '4px 0',
-            }}
-          >
-            {/* Shift: Mon=index 0 → SV_WEEKDAYS_SHORT[1] */}
-            {SV_WEEKDAYS_SHORT[(i + 1) % 7]}
-          </div>
+    <View gap="m">
+      <View layout="row" justifyContent="space-between" alignItems="center">
+        <Button variant="neutral" onClick={onPrevMonth}>‹</Button>
+        <Text weight="medium">{t(MONTH_KEYS[month])} {year}</Text>
+        <Button variant="neutral" onClick={onNextMonth}>›</Button>
+      </View>
+      <View layout="row" gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
+        {WEEKDAY_SHORT_KEYS.map((key, i) => (
+          <Text key={key} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>{t(key)}</Text>
         ))}
-      </div>
-
-      {/* Day cells */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
+      </View>
+      <View gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
         {cells.map((day, idx) => {
-          if (!day) return <div key={`empty-${idx}`} />
-
+          if (!day) return <View key={`empty-${idx}`} />
           const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
           const hasSlots = !!slotsGrouped[dateKey]
           const isSelected = selectedDate === dateKey
-          const isToday = dateKey === todayKey
           const isPast = dateKey < todayKey
-
+          const disabled = !hasSlots || isPast
           return (
-            <button
-              key={dateKey}
-              disabled={!hasSlots || isPast}
-              onClick={() => hasSlots && !isPast && onSelectDate(dateKey)}
-              style={{
-                border: isSelected
-                  ? `2px solid ${COLOR.primary}`
-                  : isToday
-                    ? `2px solid #d1d5db`
-                    : `1px solid transparent`,
-                borderRadius: 8,
-                padding: '8px 4px',
-                cursor: hasSlots && !isPast ? 'pointer' : 'default',
-                background: isSelected
-                  ? COLOR.primary
-                  : hasSlots && !isPast
-                    ? COLOR.slotAvailableBg
-                    : 'transparent',
-                color: isSelected
-                  ? '#ffffff'
-                  : isPast
-                    ? COLOR.muted
-                    : COLOR.primary,
-                fontFamily: FONT,
-                fontSize: 13,
-                fontWeight: isToday ? 700 : 400,
-                textAlign: 'center',
-                transition: 'background 0.1s',
-                position: 'relative',
-                lineHeight: 1.4,
-              }}
-            >
-              {day}
-              {hasSlots && !isPast && !isSelected && (
-                <div
-                  style={{
-                    position: 'absolute',
-                    bottom: 3,
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    width: 4,
-                    height: 4,
-                    borderRadius: '50%',
-                    background: COLOR.success,
-                  }}
-                />
-              )}
-            </button>
+            <Button key={dateKey} variant={isSelected ? 'tab-active' : hasSlots && !isPast ? 'tab' : 'neutral'} disabled={disabled}
+              onClick={() => !disabled && onSelectDate(dateKey)} style={{ padding: '8px 4px', minWidth: 0 }}>{day}</Button>
           )
         })}
-      </div>
-    </div>
+      </View>
+    </View>
   )
 }
 
-function SlotPicker({ slots, selectedSlot, onSelectSlot }) {
-  if (!slots || slots.length === 0) {
-    return (
-      <p style={{ color: COLOR.secondary, fontSize: 14, margin: 0 }}>
-        Inga tillgängliga tider för valt datum.
-      </p>
-    )
-  }
-
+function SlotPicker ({ slots, selectedSlot, onSelectSlot, t, language }) {
+  if (!slots?.length) return <Text color="secondary">{t('publicBooking.noSlots')}</Text>
   return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-      {slots.map(slot => {
-        const isSelected = selectedSlot?.startAt === slot.startAt
-        return (
-          <button
-            key={slot.startAt}
-            onClick={() => onSelectSlot(slot)}
-            style={{
-              border: isSelected
-                ? `2px solid ${COLOR.primary}`
-                : `1px solid ${COLOR.border}`,
-              borderRadius: 8,
-              padding: '8px 14px',
-              cursor: 'pointer',
-              background: isSelected ? COLOR.primary : COLOR.surface,
-              color: isSelected ? '#ffffff' : COLOR.primary,
-              fontFamily: FONT,
-              fontSize: 14,
-              fontWeight: 500,
-              transition: 'background 0.1s, border-color 0.1s',
-            }}
-          >
-            {formatSlotRange(slot.startAt, slot.duration)}
-          </button>
-        )
-      })}
-    </div>
+    <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
+      {slots.map(slot => (
+        <Button key={slot.startAt} variant={selectedSlot?.startAt === slot.startAt ? 'tab-active' : 'tab'} onClick={() => onSelectSlot(slot)}>
+          {formatSlotRange(slot.startAt, slot.duration, language)}
+        </Button>
+      ))}
+    </View>
   )
 }
 
-function BookingForm({ slot, consultantSlug, onSuccess }) {
+function BookingForm ({ slot, consultantSlug, onSuccess, t }) {
   const [clientName, setClientName] = useState('')
   const [clientEmail, setClientEmail] = useState('')
   const [clientMessage, setClientMessage] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState(null)
 
-  const inputStyle = {
-    width: '100%',
-    padding: '10px 12px',
-    border: `1px solid ${COLOR.border}`,
-    borderRadius: 8,
-    fontFamily: FONT,
-    fontSize: 14,
-    color: COLOR.primary,
-    background: COLOR.surface,
-    boxSizing: 'border-box',
-    outline: 'none',
-    marginTop: 4,
-    display: 'block',
-  }
-
-  const labelStyle = {
-    display: 'block',
-    fontSize: 13,
-    fontWeight: 600,
-    color: COLOR.primary,
-    marginBottom: 12,
-  }
-
   const handleSubmit = async (e) => {
     e.preventDefault()
     if (!clientName.trim() || !clientEmail.trim()) return
-
-    setSubmitting(true)
-    setError(null)
-
+    setSubmitting(true); setError(null)
     try {
       const res = await fetch('/actions/booking/create', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          consultantId: consultantSlug,
-          startAt: slot.startAt,
-          duration: slot.duration,
-          clientName: clientName.trim(),
-          clientEmail: clientEmail.trim(),
-          clientMessage: clientMessage.trim(),
-        }),
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ consultantId: consultantSlug, startAt: slot.startAt, duration: slot.duration, clientName: clientName.trim(), clientEmail: clientEmail.trim(), clientMessage: clientMessage.trim() }),
       })
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Bokning misslyckades (${res.status})`)
-      }
-
-      const booking = await res.json()
-      onSuccess(booking)
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setSubmitting(false)
-    }
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('publicBooking.form.error', { status: res.status })) }
+      await res.json(); onSuccess()
+    } catch (err) { setError(err.message) } finally { setSubmitting(false) }
   }
 
   return (
     <form onSubmit={handleSubmit}>
-      <label style={labelStyle}>
-        Ditt namn
-        <input
-          type="text"
-          required
-          value={clientName}
-          onChange={e => setClientName(e.target.value)}
-          placeholder="Anna Svensson"
-          style={inputStyle}
-        />
-      </label>
-
-      <label style={labelStyle}>
-        E-postadress
-        <input
-          type="email"
-          required
-          value={clientEmail}
-          onChange={e => setClientEmail(e.target.value)}
-          placeholder="anna@exempel.se"
-          style={inputStyle}
-        />
-      </label>
-
-      <label style={labelStyle}>
-        Meddelande (valfritt)
-        <textarea
-          value={clientMessage}
-          onChange={e => setClientMessage(e.target.value)}
-          placeholder="Berätta gärna vad du vill prata om..."
-          rows={3}
-          style={{ ...inputStyle, resize: 'vertical' }}
-        />
-      </label>
-
-      {error && (
-        <p style={{ color: COLOR.error, fontSize: 13, margin: '0 0 12px' }}>{error}</p>
-      )}
-
-      <button
-        type="submit"
-        disabled={submitting}
-        style={{
-          width: '100%',
-          padding: '12px 20px',
-          background: submitting ? COLOR.muted : COLOR.primary,
-          color: '#ffffff',
-          border: 'none',
-          borderRadius: 8,
-          fontFamily: FONT,
-          fontSize: 15,
-          fontWeight: 600,
-          cursor: submitting ? 'not-allowed' : 'pointer',
-          transition: 'background 0.1s',
-        }}
-      >
-        {submitting ? 'Skickar…' : 'Skicka förfrågan'}
-      </button>
+      <View gap="m">
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.name')}</Text>
+          <Input type="text" required value={clientName} onChange={e => setClientName(e.target.value)} placeholder={t('publicBooking.form.namePlaceholder')} />
+        </View>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.email')}</Text>
+          <Input type="email" required value={clientEmail} onChange={e => setClientEmail(e.target.value)} placeholder={t('publicBooking.form.emailPlaceholder')} />
+        </View>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.message')}</Text>
+          <Textarea value={clientMessage} onChange={e => setClientMessage(e.target.value)} placeholder={t('publicBooking.form.messagePlaceholder')} rows={3} />
+        </View>
+        {error && <Alert variant="danger">{error}</Alert>}
+        <Button type="submit" variant="primary" disabled={submitting}>{submitting ? t('publicBooking.form.submitting') : t('publicBooking.form.submit')}</Button>
+      </View>
     </form>
   )
 }
 
-function PendingScreen({ slot }) {
+function PendingScreen ({ slot, t, language }) {
   return (
-    <div style={{ textAlign: 'center', padding: '16px 0' }}>
-      <div
-        style={{
-          width: 56,
-          height: 56,
-          borderRadius: '50%',
-          background: '#fef9c3',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          margin: '0 auto 20px',
-          fontSize: 28,
-        }}
-      >
-        ⏳
-      </div>
-      <h2 style={{ margin: '0 0 8px', fontSize: 20, fontWeight: 700, color: COLOR.primary }}>
-        Din förfrågan är skickad!
-      </h2>
-      <p style={{ margin: '0 0 24px', color: COLOR.secondary, fontSize: 14 }}>
-        Konsulten bekräftar inom kort. Du får ett mejl med kalenderinbjudan när bokningen är bekräftad.
-      </p>
-      <div
-        style={{
-          background: '#fefce8',
-          border: '1px solid #fde68a',
-          borderRadius: 12,
-          padding: '16px 20px',
-          textAlign: 'left',
-          fontSize: 14,
-          color: COLOR.primary,
-        }}
-      >
-        <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Önskad tid</p>
-        <p style={{ margin: 0 }}>{formatDate(slot.startAt)}</p>
-        <p style={{ margin: '4px 0 0', color: COLOR.secondary }}>{slot.duration} minuter</p>
-      </div>
-    </div>
+    <View gap="m" alignItems="center" style={{ textAlign: 'center' }}>
+      <Title variant="secondary">{t('publicBooking.pending.title')}</Title>
+      <Text color="secondary">{t('publicBooking.pending.body')}</Text>
+      <Alert variant="warning" title={t('publicBooking.pending.requestedTime')}>
+        <Text>{formatDate(slot.startAt, t, language)}</Text>
+        <Text color="secondary">{t('publicBooking.pending.duration', { minutes: slot.duration })}</Text>
+      </Alert>
+    </View>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Page
-// ---------------------------------------------------------------------------
-
 export const metadata = {
   id: 'public-booking',
   path: { sv: '/boka/:consultantSlug', en: '/book/:consultantSlug' },
 }
 
-export default function PublicBookingPage({ consultantSlug, ...props }) {
+export default function PublicBookingPage ({ consultantSlug }) {
+  const { t, language } = useLocale()
   const router = useRouter()
   const slug = consultantSlug ?? router?.params?.consultantSlug
-
   const today = new Date()
   const [calYear, setCalYear] = useState(today.getFullYear())
   const [calMonth, setCalMonth] = useState(today.getMonth())
-
   const [slots, setSlots] = useState([])
   const [loadingSlots, setLoadingSlots] = useState(true)
   const [slotsError, setSlotsError] = useState(null)
-
   const [selectedDate, setSelectedDate] = useState(null)
   const [selectedSlot, setSelectedSlot] = useState(null)
+  const [step, setStep] = useState('pick-slot')
 
-  const [step, setStep] = useState('pick-slot') // 'pick-slot' | 'fill-form' | 'confirmed'
-  const [confirmedBooking, setConfirmedBooking] = useState(null)
-
-  // Load slots for next 60 days
   useEffect(() => {
     if (!slug) return
-
-    setLoadingSlots(true)
-    setSlotsError(null)
-
+    setLoadingSlots(true); setSlotsError(null)
     const from = new Date().toISOString()
     const to = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString()
-
     fetch(`/actions/booking/get-available-slots?consultantId=${encodeURIComponent(slug)}&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`)
       .then(r => r.ok ? r.json() : Promise.reject(r))
       .then(data => { setSlots(data); setLoadingSlots(false) })
-      .catch(() => { setSlotsError('Kunde inte ladda tillgängliga tider.'); setLoadingSlots(false) })
-  }, [slug])
+      .catch(() => { setSlotsError(t('publicBooking.slotsError')); setLoadingSlots(false) })
+  }, [slug, t])
 
   const slotsGrouped = groupSlotsByDate(slots)
-
-  const handlePrevMonth = () => {
-    if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) }
-    else setCalMonth(m => m - 1)
-  }
-
-  const handleNextMonth = () => {
-    if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) }
-    else setCalMonth(m => m + 1)
-  }
-
-  const handleSelectDate = (dateKey) => {
-    setSelectedDate(dateKey)
-    setSelectedSlot(null)
-  }
-
-  const handleSelectSlot = (slot) => {
-    setSelectedSlot(slot)
-  }
-
-  const handleConfirmSlot = () => {
-    if (selectedSlot) setStep('fill-form')
-  }
-
-  const handleBookingSuccess = (booking) => {
-    setConfirmedBooking(booking)
-    setStep('confirmed')
-  }
-
   const selectedDateSlots = selectedDate ? (slotsGrouped[selectedDate] ?? []) : []
 
   return (
-    <>
-      {/* Keyframe for spinner — injected once via style tag */}
-      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
-
-      <div
-        style={{
-          minHeight: '100dvh',
-          background: COLOR.bg,
-          fontFamily: FONT,
-          display: 'flex',
-          alignItems: 'flex-start',
-          justifyContent: 'center',
-          padding: '24px 16px',
-          boxSizing: 'border-box',
-        }}
-      >
-        <div
-          style={{
-            width: '100%',
-            maxWidth: 720,
-            background: COLOR.surface,
-            borderRadius: 16,
-            boxShadow: '0 1px 4px rgba(0,0,0,0.08)',
-            overflow: 'hidden',
-          }}
-        >
-          {/* Header */}
-          <div
-            style={{
-              padding: '24px 28px 20px',
-              borderBottom: `1px solid ${COLOR.border}`,
-            }}
-          >
-            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: COLOR.primary }}>
-              Boka en tid
-            </h1>
-            <p style={{ margin: '4px 0 0', fontSize: 14, color: COLOR.secondary }}>
-              Välj ett datum och en tid som passar dig.
-            </p>
-          </div>
-
-          {/* Body */}
-          <div style={{ padding: '24px 28px' }}>
-            {step === 'confirmed' && selectedSlot ? (
-              <PendingScreen slot={selectedSlot} />
-            ) : step === 'fill-form' && selectedSlot ? (
-              <div>
-                <button
-                  onClick={() => setStep('pick-slot')}
-                  style={{
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    color: COLOR.secondary,
-                    fontFamily: FONT,
-                    fontSize: 14,
-                    padding: 0,
-                    marginBottom: 20,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 4,
-                  }}
-                >
-                  ← Tillbaka
-                </button>
-
-                {/* Selected slot summary */}
-                <div
-                  style={{
-                    background: '#f9f9f9',
-                    border: `1px solid ${COLOR.border}`,
-                    borderRadius: 10,
-                    padding: '12px 16px',
-                    marginBottom: 24,
-                    fontSize: 14,
-                    color: COLOR.primary,
-                  }}
-                >
-                  <span style={{ fontWeight: 600 }}>Vald tid: </span>
-                  {formatDate(selectedSlot.startAt)}
-                  <span style={{ color: COLOR.secondary }}>
-                    {' '}({selectedSlot.duration} min)
-                  </span>
-                </div>
-
-                <BookingForm
-                  slot={selectedSlot}
-                  consultantSlug={slug}
-                  onSuccess={handleBookingSuccess}
-                />
-              </div>
-            ) : (
-              // Step: pick-slot
-              <div
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
-                  gap: 32,
-                }}
-              >
-                {/* Left: Calendar */}
-                <div>
-                  {loadingSlots ? (
-                    <div style={{ padding: '40px 0' }}>
-                      <Spinner />
-                      <p style={{ textAlign: 'center', color: COLOR.secondary, fontSize: 14, marginTop: 12 }}>
-                        Laddar tider…
-                      </p>
-                    </div>
-                  ) : slotsError ? (
-                    <p style={{ color: COLOR.error, fontSize: 14 }}>{slotsError}</p>
-                  ) : (
-                    <MonthCalendar
-                      year={calYear}
-                      month={calMonth}
-                      slotsGrouped={slotsGrouped}
-                      selectedDate={selectedDate}
-                      onSelectDate={handleSelectDate}
-                      onPrevMonth={handlePrevMonth}
-                      onNextMonth={handleNextMonth}
-                    />
-                  )}
-                </div>
-
-                {/* Right: Time slots */}
-                <div>
-                  {selectedDate ? (
-                    <>
-                      <h3
-                        style={{
-                          margin: '0 0 16px',
-                          fontSize: 14,
-                          fontWeight: 600,
-                          color: COLOR.primary,
-                        }}
-                      >
-                        {(() => {
-                          const [y, m, d] = selectedDate.split('-').map(Number)
-                          return `${d} ${SV_MONTHS[m - 1]} ${y}`
-                        })()}
-                      </h3>
-
-                      <SlotPicker
-                        slots={selectedDateSlots}
-                        selectedSlot={selectedSlot}
-                        onSelectSlot={handleSelectSlot}
-                      />
-
-                      {selectedSlot && (
-                        <button
-                          onClick={handleConfirmSlot}
-                          style={{
-                            marginTop: 20,
-                            width: '100%',
-                            padding: '11px 20px',
-                            background: COLOR.primary,
-                            color: '#ffffff',
-                            border: 'none',
-                            borderRadius: 8,
-                            fontFamily: FONT,
-                            fontSize: 14,
-                            fontWeight: 600,
-                            cursor: 'pointer',
-                          }}
-                        >
-                          Fortsätt →
-                        </button>
-                      )}
-                    </>
-                  ) : (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '100%',
-                        minHeight: 180,
-                        color: COLOR.muted,
-                        fontSize: 14,
-                        textAlign: 'center',
-                        gap: 8,
-                      }}
-                    >
-                      <span style={{ fontSize: 28 }}>📅</span>
-                      Välj ett markerat datum i kalendern
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile-responsive override */}
-      <style>{`
-        @media (max-width: 600px) {
-          .booking-grid { grid-template-columns: 1fr !important; }
-        }
-      `}</style>
-    </>
+    <View surface="base" layout="off-center-s" inset="s" style={{ minHeight: '100dvh' }}>
+      <View inset="m" roundness="l" surface="primary" slot="content" gap="l" style={{ maxWidth: 720, width: '100%' }}>
+        <View gap="xs" style={{ borderBottom: '1px solid var(--separator)', paddingBottom: 'var(--space-m)' }}>
+          <Title variant="secondary">{t('publicBooking.title')}</Title>
+          <Text color="secondary">{t('publicBooking.description')}</Text>
+        </View>
+        {step === 'confirmed' && selectedSlot ? (
+          <PendingScreen slot={selectedSlot} t={t} language={language} />
+        ) : step === 'fill-form' && selectedSlot ? (
+          <View gap="m">
+            <Button variant="link" onClick={() => setStep('pick-slot')}>{t('publicBooking.back')}</Button>
+            <View surface="secondary" roundness="m" inset="s">
+              <Text weight="medium">{t('publicBooking.selectedTime', { datetime: formatDate(selectedSlot.startAt, t, language) })}</Text>
+              <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedSlot.duration })}</Text>
+            </View>
+            <BookingForm slot={selectedSlot} consultantSlug={slug} onSuccess={() => setStep('confirmed')} t={t} />
+          </View>
+        ) : (
+          <View gap="l" layout="row" style={{ flexWrap: 'wrap' }}>
+            <View style={{ flex: 1, minWidth: 260 }}>
+              {loadingSlots ? (
+                <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('publicBooking.loadingSlots')}</Text>
+              ) : slotsError ? (
+                <Alert variant="danger">{slotsError}</Alert>
+              ) : (
+                <MonthCalendar year={calYear} month={calMonth} slotsGrouped={slotsGrouped} selectedDate={selectedDate}
+                  onSelectDate={(dateKey) => { setSelectedDate(dateKey); setSelectedSlot(null) }}
+                  onPrevMonth={() => { if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) } else setCalMonth(m => m - 1) }}
+                  onNextMonth={() => { if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) } else setCalMonth(m => m + 1) }}
+                  t={t} />
+              )}
+            </View>
+            <View gap="m" style={{ flex: 1, minWidth: 260 }}>
+              {selectedDate ? (
+                <>
+                  <Title variant="tertiary">
+                    {(() => { const [y, m, d] = selectedDate.split('-').map(Number); return `${d} ${t(MONTH_KEYS[m - 1])} ${y}` })()}
+                  </Title>
+                  <SlotPicker slots={selectedDateSlots} selectedSlot={selectedSlot} onSelectSlot={setSelectedSlot} t={t} language={language} />
+                  {selectedSlot && <Button variant="primary" onClick={() => setStep('fill-form')}>{t('publicBooking.continue')}</Button>}
+                </>
+              ) : (
+                <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
+                  <Text color="secondary" style={{ textAlign: 'center' }}>{t('publicBooking.pickDate')}</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
   )
 }