@extends('layouts.public-booking', ['title' => 'Glow Beauty Salon - Booklio'])

@include('public.booking.partials.data')

@section('content')
    <div class="space-y-5">
        @include('public.booking.partials.business-header')

        <section class="grid min-w-0 gap-5 lg:grid-cols-[minmax(0,1fr)_340px]">
            <div class="min-w-0 space-y-5">
                <x-ui.card title="Book your appointment" description="Choose a service, staff member, date, and time in a few quick steps.">
                    <div class="grid gap-3 sm:grid-cols-3">
                        @foreach ([['Services', $servicesCount ?? count($services)], ['Available today', 'Live slots'], ['Confirmation', 'Instant']] as $item)
                            <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                                <p class="text-xs font-bold text-booklio-muted">{{ $item[0] }}</p>
                                <p class="mt-2 text-xl font-extrabold text-booklio-dark">{{ $item[1] }}</p>
                            </div>
                        @endforeach
                    </div>
                    <x-ui.button class="mt-5 w-full sm:w-auto" href="{{ route('public.booking.services', $businessSlug) }}">Start booking</x-ui.button>
                </x-ui.card>

                <x-ui.card title="Popular services" description="A quick look at customer favorites.">
                    <div class="grid gap-4 sm:grid-cols-3">
                        @foreach ($services as $service)
                            <div class="overflow-hidden rounded-lg border border-booklio-border bg-white">
                                <img src="{{ $service['image'] }}" alt="{{ $service['name'] }}" class="h-28 w-full object-cover">
                                <div class="p-4">
                                    <h3 class="text-sm font-extrabold text-booklio-dark">{{ $service['name'] }}</h3>
                                    <p class="mt-1 text-xs font-semibold text-booklio-muted">{{ $service['duration'] }} - {{ $service['price'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </x-ui.card>
            </div>

            @include('public.booking.partials.summary-card')
        </section>
    </div>
@endsection