@extends('layouts.auth', ['title' => 'Welcome to Booklio'])

@section('content')
    <x-ui.card padding="p-6 sm:p-7">
        <div class="mb-6">
            <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                <x-ui.icon name="check" class="h-6 w-6" />
            </span>
            <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark">Account Created</h1>
            <p class="mt-2 text-sm leading-6 text-booklio-muted">Welcome to Booklio. Complete the setup checklist to publish your booking page faster.</p>
        </div>

        <div class="space-y-3">
            @foreach (['Add business profile', 'Add services', 'Add staff', 'Set working hours', 'Share booking link'] as $index => $item)
                <div class="flex items-center gap-3 rounded-lg border border-booklio-border bg-slate-50 p-4">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {{ $index === 0 ? 'bg-booklio-primary text-white' : 'bg-white text-booklio-primary' }} text-sm font-extrabold shadow-soft">{{ $index + 1 }}</span>
                    <span class="text-sm font-extrabold text-booklio-dark">{{ $item }}</span>
                </div>
            @endforeach
        </div>

        <div class="mt-6 grid gap-3 sm:grid-cols-2">
            <x-ui.button href="{{ route('admin.settings.business') }}">Start setup</x-ui.button>
            <x-ui.button variant="secondary" href="{{ route('admin.dashboard') }}">Go to dashboard</x-ui.button>
        </div>
    </x-ui.card>
@endsection