@extends('layouts.auth')

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

@section('content')
    <div class="auth-card">
        <div style="text-align:center; margin-bottom:1.5rem;">
            <div style="width:64px; height:64px; border-radius:50%; background:rgba(16, 191, 255, 0.12); display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem;">
                <i class="fas fa-envelope" style="font-size:1.5rem; color:var(--accent);"></i>
            </div>
            <h1 style="font-size:1.5rem;">Verify your email</h1>
        </div>

        <p class="auth-subtitle" style="text-align:center;">
            We've sent a verification link to <strong>{{ Auth::user()->email }}</strong>. Please check your inbox and click the link to activate your account.
        </p>

        @if (session('status'))
            <div class="auth-alert auth-alert-success" style="margin: 1rem 0;">
                {{ session('status') }}
            </div>
        @endif

        <div style="background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; margin:1.5rem 0; font-size:0.85rem; color:var(--text-secondary);">
            <p style="margin-bottom:0.5rem;"><i class="fas fa-info-circle" style="color:var(--accent); margin-right:0.375rem;"></i> <strong>Didn't receive the email?</strong></p>
            <ul style="margin-left:1.25rem; line-height:1.8;">
                <li>Check your spam or junk folder</li>
                <li>Make sure you entered the correct email</li>
                <li>Click the button below to resend</li>
            </ul>
        </div>

        <form method="POST" action="{{ route('verification.send') }}">
            @csrf
            <button type="submit" class="btn-auth">
                <span class="btn-spinner"></span>
                <span class="btn-text"><i class="fas fa-paper-plane" style="margin-right:0.375rem;"></i> Resend Verification Email</span>
                <span class="btn-loading-text">Sending...</span>
            </button>
        </form>
    </div>

    <div class="auth-footer">
        <form method="POST" action="{{ route('logout') }}" style="display:inline;">
            @csrf
            <button type="submit" style="background:none; border:none; color:var(--accent); cursor:pointer; font-family:inherit; font-size:inherit;">Log out</button>
        </form>
        and sign in with a different account
    </div>
@endsection