@extends('layouts.auth', ['title' => 'Email Verification - 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-blue-50 text-booklio-primary">
                <x-ui.icon name="mail" class="h-6 w-6" />
            </span>
            <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark">Verify your email</h1>
            <p class="mt-2 text-sm leading-6 text-booklio-muted">We sent a verification link to <span class="font-bold text-booklio-dark">owner@booklio.test</span>. Verify before managing bookings and invoices.</p>
        </div>

        <div class="rounded-lg border border-blue-100 bg-blue-50 p-4">
            <p class="text-sm font-extrabold text-booklio-primary">Check your inbox</p>
            <p class="mt-1 text-sm leading-6 text-slate-600">The message includes a secure verification link. Backend mail delivery will be connected later.</p>
        </div>

        <div class="mt-5 grid gap-3 sm:grid-cols-2">
            <x-ui.button href="{{ route('auth.welcome') }}">I verified my email</x-ui.button>
            <x-ui.button variant="secondary" data-booklio-placeholder="Email verification resend will be connected when production mail delivery is enabled.">Resend email</x-ui.button>
        </div>

        <a href="{{ route('login') }}" class="mt-6 inline-flex text-sm font-bold text-booklio-primary hover:text-blue-700">Use a different account</a>
    </x-ui.card>
@endsection