<aside class="hidden lg:block">
    <div class="rounded-lg border border-booklio-border bg-white p-5 shadow-card">
        <div class="flex items-center justify-between gap-3">
            <div>
                <p class="text-sm font-bold text-booklio-muted">Today at Booklio Salon</p>
                <h2 class="mt-2 text-2xl font-extrabold tracking-tight text-booklio-dark">18 appointments</h2>
            </div>
            <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-booklio-primary">
                <x-ui.icon name="calendar-check" class="h-6 w-6" />
            </span>
        </div>

        <div class="mt-6 space-y-3">
            @foreach ([['9:00 AM', 'Hair Cut & Style', 'Jessica Miller', 'Confirmed'], ['11:00 AM', 'Facial Treatment', 'Sophia Davis', 'Pending'], ['2:30 PM', 'Hair Color', 'Amanda Taylor', 'Paid']] as $appointment)
                <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                    <div class="flex items-center justify-between gap-3">
                        <p class="text-sm font-extrabold text-booklio-dark">{{ $appointment[1] }}</p>
                        <x-ui.badge :variant="$appointment[3] === 'Pending' ? 'warning' : 'success'">{{ $appointment[3] }}</x-ui.badge>
                    </div>
                    <p class="mt-2 text-xs font-semibold text-booklio-muted">{{ $appointment[0] }} - {{ $appointment[2] }}</p>
                </div>
            @endforeach
        </div>

        <div class="mt-5 grid grid-cols-3 gap-3">
            <div class="rounded-lg border border-booklio-border p-3">
                <p class="text-xs font-bold text-booklio-muted">Bookings</p>
                <p class="mt-2 text-xl font-extrabold">128</p>
            </div>
            <div class="rounded-lg border border-booklio-border p-3">
                <p class="text-xs font-bold text-booklio-muted">Revenue</p>
                <p class="mt-2 text-xl font-extrabold">$8.4k</p>
            </div>
            <div class="rounded-lg border border-booklio-border p-3">
                <p class="text-xs font-bold text-booklio-muted">Reminders</p>
                <p class="mt-2 text-xl font-extrabold">96%</p>
            </div>
        </div>

        <div class="mt-5 rounded-lg border border-blue-100 bg-blue-50 p-4">
            <p class="text-sm font-extrabold text-booklio-primary">Built for small service businesses</p>
            <p class="mt-1 text-xs leading-5 text-slate-600">Manage bookings, staff schedules, invoices, customers, and reminders from one clean dashboard.</p>
        </div>
    </div>
</aside>
