@extends('layouts.customer')

@section('title', __('Verificação de e-mail — Lined'))

@section('content')

    <section class="min-h-screen flex items-center justify-center px-6 py-20">

        <div class="w-full max-w-md">

            <div class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 text-center">

                @if($status === 'success')

                    {{-- Success icon --}}
                    <div class="w-16 h-16 rounded-2xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center mx-auto mb-6">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                    </div>

                    @if(!empty($alreadyVerified))
                        <h1 class="font-heading font-bold text-white text-2xl mb-3">{{ __('Já verificado') }}</h1>
                        <p class="text-gray-400 text-sm leading-relaxed mb-8">
                            {{ __('Este e-mail já foi verificado anteriormente. Você pode fazer login normalmente.') }}
                        </p>
                    @else
                        <h1 class="font-heading font-bold text-white text-2xl mb-3">{{ __('E-mail verificado!') }}</h1>
                        <p class="text-gray-400 text-sm leading-relaxed mb-8">
                            {{ __('Sua conta foi ativada com sucesso. Agora você pode fazer login na plataforma.') }}
                        </p>
                    @endif

                    <a href="{{ route('login') }}"
                       class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-brand-green text-black text-sm font-semibold
                              hover:bg-brand-green/90 transition-colors duration-200 no-underline">
                        {{ __('Ir para o login') }}
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                    </a>

                @else

                    {{-- Error icon --}}
                    <div class="w-16 h-16 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center mx-auto mb-6">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="8" x2="12" y2="12"/>
                            <line x1="12" y1="16" x2="12.01" y2="16"/>
                        </svg>
                    </div>

                    <h1 class="font-heading font-bold text-white text-2xl mb-3">{{ __('Link inválido') }}</h1>
                    <p class="text-gray-400 text-sm leading-relaxed mb-8">
                        {{ $message ?? __('Este link de verificação não é válido ou expirou.') }}
                    </p>

                    <a href="{{ route('register') }}"
                       class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-brand-green text-black text-sm font-semibold
                              hover:bg-brand-green/90 transition-colors duration-200 no-underline">
                        {{ __('Criar nova conta') }}
                    </a>

                @endif

            </div>

            <p class="text-center text-gray-500 text-sm mt-6">
                {{ __('Já tem uma conta?') }}
                <a href="{{ route('login') }}"
                   class="text-brand-green hover:text-brand-green/80 no-underline font-medium transition-colors">
                    {{ __('Entrar') }}
                </a>
            </p>

        </div>

    </section>

@endsection