@extends('storefront.layout')

@section('title', 'Verify checkout')

@section('content')
<section class="mx-auto max-w-xl px-6 py-16 lg:px-8">
    <div class="rounded-3xl border border-stone-200 bg-white p-8 text-center shadow-sm sm:p-10">
        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Secure checkout</p>
        <h1 class="mt-3 text-3xl font-semibold tracking-[-0.03em] text-stone-950">Verify your email</h1>
        <p class="mt-4 text-sm leading-6 text-stone-600">
            Confirm that you own the email already saved on this customer profile. This one-time action restores only the exact cart that requested verification.
        </p>

        <form method="POST" action="{{ route('storefront.checkout.customer-verification.confirm', ['token' => $token]) }}" class="mt-8">
            @csrf
            <button type="submit" class="inline-flex h-12 items-center justify-center rounded-xl bg-emerald-700 px-6 text-sm font-semibold text-white shadow-lg shadow-emerald-900/15 transition hover:bg-emerald-800">
                Verify and continue checkout
            </button>
        </form>
    </div>
</section>
@endsection