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

<section class="overflow-hidden rounded-lg border border-booklio-border bg-white shadow-card">
    <div class="relative h-44 bg-slate-200 sm:h-56">
        <img src="{{ $business['cover'] }}" alt="{{ $business['name'] }} cover" class="h-full w-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-slate-950/50 to-transparent"></div>
        <div class="absolute bottom-4 left-4 right-4 flex items-end gap-3">
            <span class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl border-4 border-white bg-booklio-primary text-xl font-extrabold text-white shadow-card">{{ $business['logo'] }}</span>
            <div class="min-w-0 text-white">
                <h1 class="text-2xl font-extrabold tracking-tight sm:text-3xl">{{ $business['name'] }}</h1>
                <p class="mt-1 text-sm font-semibold text-white/90">{{ $business['rating'] }} rating - {{ $business['reviews'] }}</p>
            </div>
        </div>
    </div>
    <div class="space-y-4 p-5">
        <p class="text-sm leading-6 text-booklio-muted">{{ $business['description'] }}</p>
        <div class="grid gap-3 text-sm sm:grid-cols-3">
            <div class="rounded-lg bg-slate-50 p-3">
                <p class="text-xs font-bold text-booklio-muted">Address</p>
                <p class="mt-1 font-bold text-booklio-dark">{{ $business['address'] }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-3">
                <p class="text-xs font-bold text-booklio-muted">Phone</p>
                <p class="mt-1 font-bold text-booklio-dark">{{ $business['phone'] }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-3">
                <p class="text-xs font-bold text-booklio-muted">Working hours</p>
                <p class="mt-1 font-bold text-emerald-600">{{ $business['hours'] }}</p>
            </div>
        </div>
    </div>
</section>