@extends('layouts.auth')
@section('title', 'Email Verification')
@section('content')
    <div class="text-center">
        @if($status === 'success')
            <div class="w-16 h-16 bg-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            </div>
            <h2 class="text-xl font-semibold text-white mb-2">Email verified!</h2>
            <p class="text-slate-400 text-sm mb-6">Your account is now active. You can sign in.</p>
            <a href="{{ route('auth.login') }}" class="inline-block px-6 py-3 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl transition">Sign in now</a>
        @elseif($status === 'already_verified')
            <h2 class="text-xl font-semibold text-white mb-2">Already verified</h2>
            <p class="text-slate-400 text-sm mb-6">Your email is already verified.</p>
            <a href="{{ route('auth.login') }}" class="inline-block px-6 py-3 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl transition">Sign in</a>
        @else
            <div class="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </div>
            <h2 class="text-xl font-semibold text-white mb-2">Invalid link</h2>
            <p class="text-slate-400 text-sm mb-6">This verification link is invalid or has expired.</p>
            <a href="{{ route('auth.login') }}" class="text-brand-400 hover:text-brand-300 transition text-sm">← Back to login</a>
        @endif
    </div>
@endsection