@extends('layouts.public-booking', ['title' => 'Slot Unavailable - Booklio'])

@section('content')
    <section class="mx-auto max-w-2xl rounded-lg border border-red-100 bg-white p-6 text-center shadow-card sm:p-8">
        <span class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-red-50 text-red-600">
            <x-ui.icon name="alert-triangle" class="h-8 w-8" />
        </span>
        <h1 class="mt-5 text-3xl font-extrabold tracking-tight text-booklio-dark">Slot Unavailable</h1>
        <p class="mt-2 text-sm leading-6 text-booklio-muted">This time was just taken or is no longer available. Please choose another slot to continue.</p>
        <div class="mt-6 rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4">
            <p class="text-sm font-extrabold text-booklio-dark">Next available suggestion</p>
            <p class="mt-1 text-sm font-semibold text-booklio-primary">{{ $suggestion['label'] ?? 'Please choose another date or time' }}</p>
        </div>
        <div class="mt-6 grid gap-3 sm:grid-cols-2">
            <x-ui.button href="{{ $service && $staffMember ? route('public.booking.date-time', ['business_slug' => $businessSlug, 'service_id' => $service->id, 'staff_profile_id' => $staffMember->id]) : route('public.booking.services', $businessSlug) }}">Choose another time</x-ui.button>
            <x-ui.button variant="secondary" href="{{ route('public.booking.profile', $businessSlug) }}">Back to business page</x-ui.button>
        </div>
    </section>
@endsection