@extends('layouts.guest')

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

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-6">
    <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md text-center">

        <div class="text-6xl mb-4">📧</div>

        <h1 class="text-2xl font-bold text-gray-800 mb-4">Verify Your Email</h1>

        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        @if (session('message'))
            <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
                {{ session('message') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ $errors->first() }}
            </div>
        @endif

        <p class="text-gray-600 mb-2">
            We've sent a verification link to:
        </p>
        <p class="font-semibold text-indigo-600 mb-6">
            {{ $pendingEmail ?? session('pending_email') ?? 'your email address' }}
        </p>
        <p class="text-gray-500 text-sm mb-6">
            Please check your inbox and click the link to complete your registration.
            The link expires in <strong>24 hours</strong>.
        </p>

        {{-- Resend verification email --}}
        <form method="POST" action="{{ route('register.resend') }}">
            @csrf
            <input type="hidden" name="email" value="{{ $pendingEmail ?? session('pending_email') }}">
            <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">
                Resend Verification Email
            </button>
        </form>

        <a href="{{ route('register') }}" class="block mt-4 text-gray-500 text-sm hover:text-gray-800 underline">
            Use a different email address
        </a>

        <a href="{{ route('login') }}" class="block mt-2 text-gray-500 text-sm hover:text-gray-800 underline">
            Back to login
        </a>

    </div>
</div>
@endsection