Service Booking Strip

import { ServiceBookingStrip } from '@/components/ui/service-booking-strip'

'use client'

import { useState } from 'react'
import { ServiceBookingStrip } from '@/components/ui/service-booking-strip'

const SERVICES = ['Logbook service', 'Brakes', 'Tyres & alignment', 'Battery & electrics']

export default function ServiceBookingStripDemo() {
  const [selected, setSelected] = useState(SERVICES[0])

  return (
    <div className="mx-auto max-w-5xl px-4 py-10 sm:px-6 sm:py-14">
      <ServiceBookingStrip
        heading="Book your next service"
        services={SERVICES}
        selected={selected}
        onSelect={setSelected}
        earliestSlot="Tue 7:20am"
        phone="4732 8811"
        ctaLabel="Book it in"
        onBook={(service) => {
          // Demo: wire your workshop booking system here
          void service
        }}
      />
    </div>
  )
}