@extends('storefront.layout')

@section('title', 'Set up your account')

@section('content')
<section class="mx-auto max-w-lg px-6 py-16 lg:px-8">
    <div class="rounded-3xl border border-stone-200 bg-white p-8 shadow-xl shadow-stone-900/5">
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Secure first access</p>
        <h1 class="mt-2 text-3xl font-semibold text-stone-950">Create your password</h1>
        <p class="mt-3 text-sm leading-6 text-stone-600">
            Order <strong>{{ $order->number }}</strong> is ready in Retail Partner. Continue to create your password, then you will go directly to its dedicated status page.
        </p>

        <div class="mt-5 rounded-2xl border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm leading-6 text-emerald-900">
            Payment, fulfillment, shipment, and tracking updates are available in Retail Partner.
        </div>

        <form method="POST" action="{{ route('storefront.first-access.link.confirm', ['token' => $token]) }}" class="mt-7">
            @csrf
            <button type="submit" class="w-full rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white hover:bg-emerald-800">
                Continue securely
            </button>
        </form>

        <p class="mt-4 text-center text-xs leading-5 text-stone-500">
            This one-time link will be used only after you continue.
        </p>
    </div>
</section>
@endsection