@ossy/booking 1.15.6 → 1.15.7

package/src/public-booking.page.jsx

@@ -1,32 +1,7 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useRouter } from '@ossy/router-react'
+import { View, Title, Text, Button, Input, Textarea, Alert } 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',
@@ -34,7 +9,7 @@ const SV_MONTHS = [
 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) {
   const d = new Date(isoString)
   const weekday = SV_WEEKDAYS_LONG[d.getDay()]
   const day = d.getDate()
@@ -44,12 +19,12 @@ function formatDate(isoString) {
   return `${weekday} ${day} ${month} kl. ${hours}:${minutes}`
 }
 
-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) {
+function getTimezoneLabel (isoString) {
   try {
     return new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
       .formatToParts(new Date(isoString))
@@ -59,19 +34,15 @@ function getTimezoneLabel(isoString) {
   }
 }
 
-function formatSlotRange(startIso, durationMinutes) {
+function formatSlotRange (startIso, durationMinutes) {
   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 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,37 +53,16 @@ function groupSlotsByDate(slots) {
   return groups
 }
 
-function getDaysInMonth(year, month) {
+function getDaysInMonth (year, month) {
   return new Date(year, month + 1, 0).getDate()
 }
 
-function getFirstDayOfMonth(year, month) {
-  // 0=Sun…6=Sat; we want Mon-first grid (0=Mon…6=Sun)
+function getFirstDayOfMonth (year, month) {
   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 }) {
   const daysInMonth = getDaysInMonth(year, month)
   const firstDayOffset = getFirstDayOfMonth(year, month)
   const today = new Date()
@@ -123,200 +73,78 @@ function MonthCalendar({ year, month, slotsGrouped, selectedDate, onSelectDate,
   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] */}
+    <View gap="m">
+      <View layout="row" justifyContent="space-between" alignItems="center">
+        <Button variant="neutral" onClick={onPrevMonth}>‹</Button>
+        <Text weight="medium">{SV_MONTHS[month]} {year}</Text>
+        <Button variant="neutral" onClick={onNextMonth}>›</Button>
+      </View>
+
+      <View layout="row" gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
+        {SV_WEEKDAYS_SHORT.map((_, i) => (
+          <Text key={i} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>
             {SV_WEEKDAYS_SHORT[(i + 1) % 7]}
-          </div>
+          </Text>
         ))}
-      </div>
+      </View>
 
-      {/* Day cells */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
+      <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
+            <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,
-              }}
+              variant={isSelected ? 'tab-active' : hasSlots && !isPast ? 'tab' : 'neutral'}
+              disabled={disabled}
+              onClick={() => !disabled && onSelectDate(dateKey)}
+              style={{ padding: '8px 4px', minWidth: 0 }}
             >
               {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>
           )
         })}
-      </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 }) {
+  if (!slots?.length) {
+    return <Text color="secondary">Inga tillgängliga tider för valt datum.</Text>
   }
 
   return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+    <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
       {slots.map(slot => {
         const isSelected = selectedSlot?.startAt === slot.startAt
         return (
-          <button
+          <Button
             key={slot.startAt}
+            variant={isSelected ? 'tab-active' : 'tab'}
             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>
+          </Button>
         )
       })}
-    </div>
+    </View>
   )
 }
 
-function BookingForm({ slot, consultantSlug, onSuccess }) {
+function BookingForm ({ slot, consultantSlug, onSuccess }) {
   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
@@ -354,121 +182,70 @@ function BookingForm({ slot, consultantSlug, onSuccess }) {
 
   return (
     <form onSubmit={handleSubmit}>
-      <label style={labelStyle}>
-        Ditt namn
-        <input
+      <View gap="m">
+      <View gap="xs">
+        <Text weight="medium">Ditt namn</Text>
+        <Input
           type="text"
           required
           value={clientName}
           onChange={e => setClientName(e.target.value)}
           placeholder="Anna Svensson"
-          style={inputStyle}
         />
-      </label>
+      </View>
 
-      <label style={labelStyle}>
-        E-postadress
-        <input
+      <View gap="xs">
+        <Text weight="medium">E-postadress</Text>
+        <Input
           type="email"
           required
           value={clientEmail}
           onChange={e => setClientEmail(e.target.value)}
           placeholder="anna@exempel.se"
-          style={inputStyle}
         />
-      </label>
+      </View>
 
-      <label style={labelStyle}>
-        Meddelande (valfritt)
-        <textarea
+      <View gap="xs">
+        <Text weight="medium">Meddelande (valfritt)</Text>
+        <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',
-        }}
-      >
+      </View>
+
+      {error && <Alert variant="danger">{error}</Alert>}
+
+      <Button type="submit" variant="primary" disabled={submitting}>
         {submitting ? 'Skickar…' : 'Skicka förfrågan'}
-      </button>
+      </Button>
+      </View>
     </form>
   )
 }
 
-function PendingScreen({ slot }) {
+function PendingScreen ({ slot }) {
   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 }}>
+    <View gap="m" alignItems="center" style={{ textAlign: 'center' }}>
+      <Title variant="secondary">Din förfrågan är skickad!</Title>
+      <Text color="secondary">
         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>
+      </Text>
+      <Alert variant="warning" title="Önskad tid">
+        <Text>{formatDate(slot.startAt)}</Text>
+        <Text color="secondary">{slot.duration} minuter</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, ...props }) {
   const router = useRouter()
   const slug = consultantSlug ?? router?.params?.consultantSlug
 
@@ -482,11 +259,8 @@ export default function PublicBookingPage({ consultantSlug, ...props }) {
 
   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
 
@@ -503,6 +277,7 @@ export default function PublicBookingPage({ consultantSlug, ...props }) {
   }, [slug])
 
   const slotsGrouped = groupSlotsByDate(slots)
+  const selectedDateSlots = selectedDate ? (slotsGrouped[selectedDate] ?? []) : []
 
   const handlePrevMonth = () => {
     if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) }
@@ -514,228 +289,96 @@ export default function PublicBookingPage({ consultantSlug, ...props }) {
     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,
+    <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">Boka en tid</Title>
+          <Text color="secondary">Välj ett datum och en tid som passar dig.</Text>
+        </View>
+
+        {step === 'confirmed' && selectedSlot ? (
+          <PendingScreen slot={selectedSlot} />
+        ) : step === 'fill-form' && selectedSlot ? (
+          <View gap="m">
+            <Button variant="link" onClick={() => setStep('pick-slot')}>
+              ← Tillbaka
+            </Button>
+
+            <View surface="secondary" roundness="m" inset="s">
+              <Text weight="medium">Vald tid: {formatDate(selectedSlot.startAt)}</Text>
+              <Text color="secondary">({selectedSlot.duration} min)</Text>
+            </View>
+
+            <BookingForm
+              slot={selectedSlot}
+              consultantSlug={slug}
+              onSuccess={() => setStep('confirmed')}
+            />
+          </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)' }}>
+                  Laddar tider…
+                </Text>
+              ) : slotsError ? (
+                <Alert variant="danger">{slotsError}</Alert>
+              ) : (
+                <MonthCalendar
+                  year={calYear}
+                  month={calMonth}
+                  slotsGrouped={slotsGrouped}
+                  selectedDate={selectedDate}
+                  onSelectDate={(dateKey) => {
+                    setSelectedDate(dateKey)
+                    setSelectedSlot(null)
                   }}
-                >
-                  ← 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}
+                  onPrevMonth={handlePrevMonth}
+                  onNextMonth={handleNextMonth}
                 />
-              </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>
+              )}
+            </View>
+
+            <View gap="m" style={{ flex: 1, minWidth: 260 }}>
+              {selectedDate ? (
+                <>
+                  <Title variant="tertiary">
+                    {(() => {
+                      const [y, m, d] = selectedDate.split('-').map(Number)
+                      return `${d} ${SV_MONTHS[m - 1]} ${y}`
+                    })()}
+                  </Title>
+
+                  <SlotPicker
+                    slots={selectedDateSlots}
+                    selectedSlot={selectedSlot}
+                    onSelectSlot={setSelectedSlot}
+                  />
+
+                  {selectedSlot && (
+                    <Button variant="primary" onClick={() => setStep('fill-form')}>
+                      Fortsätt →
+                    </Button>
                   )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile-responsive override */}
-      <style>{`
-        @media (max-width: 600px) {
-          .booking-grid { grid-template-columns: 1fr !important; }
-        }
-      `}</style>
-    </>
+                </>
+              ) : (
+                <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
+                  <Text color="secondary" style={{ textAlign: 'center' }}>
+                    Välj ett markerat datum i kalendern
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
   )
 }