@extends('storefront.layout')

@section('title', 'Verify Retail Partner Email')
@section('description', 'Confirm the business email used for a Vida Mansa Retail Partner application.')

@section('content')
<section class="relative overflow-hidden bg-[#f4f2eb] px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
    <div class="pointer-events-none absolute -left-24 top-16 h-72 w-72 rounded-full bg-[#ffd400]/15 blur-3xl"></div>
    <div class="pointer-events-none absolute -right-24 bottom-0 h-80 w-80 rounded-full bg-emerald-700/10 blur-3xl"></div>

    <div class="relative mx-auto max-w-2xl overflow-hidden rounded-[2rem] border border-stone-200 bg-white shadow-[0_30px_90px_rgba(28,25,23,0.13)]">
        <div class="h-2 bg-gradient-to-r from-emerald-800 via-emerald-600 to-[#ffd400]"></div>
        <div class="px-6 py-12 text-center sm:px-12 sm:py-14">
            <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
                <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5A2.25 2.25 0 0119.5 19.5h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
                </svg>
            </div>

            <p class="mt-7 text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">One final step</p>
            <h1 class="mt-3 text-3xl font-semibold tracking-tight text-stone-950 sm:text-4xl">Confirm your business email</h1>
            <p class="mx-auto mt-5 max-w-xl text-base leading-7 text-stone-600">
                Confirming below proves that you control the email used for this application. Only then will the Retail Partner administration receive it for review.
            </p>

            <form method="POST" action="{{ route('storefront.partner-application.verify.store', ['token' => $token]) }}" class="mt-8">
                @csrf
                <button type="submit" class="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-700 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-900/15 transition hover:-translate-y-0.5 hover:bg-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2 sm:w-auto">
                    Verify email and submit for review
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                </button>
            </form>

            <p class="mt-6 text-xs leading-5 text-stone-500">If you did not submit this application, close this page and no action will be taken.</p>
        </div>
    </div>
</section>
@endsection