@extends('layouts.app')

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

@section('content')
<div class="min-h-[60vh] flex items-center justify-center px-4 py-16">
    <div class="mx-auto max-w-md text-center">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-purple-100 mb-6">
            <svg class="h-8 w-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
        </div>

        <h1 class="text-2xl font-bold tracking-tight text-gray-900">Check your email</h1>
        <p class="mt-3 text-base text-gray-600">
            We've sent a verification link to your email address. Please click the link to verify your account.
        </p>

        <div class="mt-8">
            <form method="POST" action="{{ route('verification.send') }}">
                @csrf
                <button type="submit"
                    class="inline-flex items-center gap-2 rounded-md bg-purple-600 px-5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-purple-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">
                    Resend verification email
                </button>
            </form>
        </div>
    </div>
</div>
@endsection