@extends('layouts.auth')

@section('title', 'Verify Email | ' . config('app.name'))

@section('content')
<div class="auth-card" style="text-align:center;">
    <div style="font-size:48px; margin-bottom:20px;">📧</div>

    <h1 class="auth-title">Check your email</h1>
    <p class="auth-subtitle" style="margin-bottom:24px; line-height:1.6;">
        We sent a verification link to your email address.<br>
        Click it to activate your account.
    </p>

    @if(session('resent'))
        <div class="auth-error" style="background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35);color:#86efac; margin-bottom:20px;">
            <i class="bi bi-check-circle-fill"></i>
            <span>A new verification link has been sent.</span>
        </div>
    @endif

    <form method="POST" action="{{ route('verification.send') }}">
        @csrf
        <button type="submit" class="btn-primary" style="margin-top:0;">
            <i class="bi bi-arrow-repeat"></i> Resend verification email
        </button>
    </form>

    <div style="margin-top:20px; font-size:13px; color:var(--text-secondary);">
        Wrong account?
        <form method="POST" action="{{ route('logout') }}" style="display:inline;">
            @csrf
            <button type="submit" style="background:none;border:none;color:var(--brand-red);cursor:pointer;font-size:13px;padding:0;font-family:inherit;">Sign out</button>
        </form>
    </div>
</div>
@endsection