@extends('layouts.auth', ['title' => 'Trial Started - Booklio'])

@section('content')
    <x-ui.card padding="p-6 sm:p-7">
        <div class="mb-6 text-center">
            <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                <x-ui.icon name="check" class="h-7 w-7" />
            </span>
            <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark">Trial Started</h1>
            <p class="mt-2 text-sm leading-6 text-booklio-muted">Your 14-day Booklio trial is ready. Start setting up services, staff, invoices, and reminders.</p>
        </div>

        <div class="grid gap-3 sm:grid-cols-3">
            <div class="rounded-lg border border-booklio-border bg-slate-50 p-4 text-center">
                <p class="text-xs font-bold text-booklio-muted">Plan</p>
                <p class="mt-2 text-sm font-extrabold">Professional</p>
            </div>
            <div class="rounded-lg border border-booklio-border bg-slate-50 p-4 text-center">
                <p class="text-xs font-bold text-booklio-muted">Trial ends</p>
                <p class="mt-2 text-sm font-extrabold">May 31, 2026</p>
            </div>
            <div class="rounded-lg border border-booklio-border bg-slate-50 p-4 text-center">
                <p class="text-xs font-bold text-booklio-muted">Status</p>
                <p class="mt-2 text-sm font-extrabold text-booklio-success">Active</p>
            </div>
        </div>

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