@extends('digitalmenu::layouts.guest')

@section('title', 'Verify Your Email - Digital Menu')

@section('content')
    <main class="min-h-[calc(100vh-160px)] flex items-center justify-center py-16 px-4 relative overflow-hidden">

        <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-primary-fixed opacity-20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-[-10%] left-[-5%] w-80 h-80 bg-secondary-fixed opacity-20 rounded-full blur-3xl"></div>

        <section class="w-full max-w-lg text-center relative z-10">

            <div class="relative inline-block mb-10">
                <div class="absolute -top-6 -right-6 w-24 h-24 bg-surface-container rounded-full opacity-50"></div>
                <div class="relative bg-surface-container-lowest p-8 rounded-full shadow-sm">
                    <span class="material-symbols-outlined text-primary text-7xl block"
                          style="font-variation-settings: 'FILL' 1;">mark_email_unread</span>
                </div>
                <div class="absolute -bottom-2 -left-2 w-8 h-8 bg-secondary-container rounded-lg rotate-12"></div>
            </div>

            <div class="space-y-4 mb-10">
                <h1 class="font-headline text-5xl md:text-6xl font-extrabold text-on-surface tracking-tighter leading-none">
                    Check your <span class="text-primary italic">inbox!</span>
                </h1>
                <p class="text-on-surface-variant text-lg leading-relaxed max-w-md mx-auto">
                    We've sent a verification link to
                    @if(session('verification_email'))
                        <span class="font-semibold text-on-surface">{{ session('verification_email') }}</span>.
                    @else
                        your email address.
                    @endif
                    Click the link to activate your account.
                </p>
            </div>

            @if(session('status'))
                <div class="mb-6 px-4 py-3 rounded-lg bg-surface-container text-on-surface text-sm font-medium">
                    {{ session('status') }}
                </div>
            @endif

            <div class="space-y-6">
                <a href="{{ route('login') }}"
                   class="w-full kinetic-gradient text-on-primary font-bold text-lg py-4 rounded-full shadow-lg hover:scale-[1.02] transition-all duration-300 active:scale-95 flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined text-xl">arrow_back</span>
                    Back to Login
                </a>

                <div class="flex flex-col items-center gap-1">
                    <p class="text-on-surface-variant text-sm">Didn't receive the email?</p>
                    <form method="POST" action="{{ route('digitalmenu.resend-verification') }}">
                        {!! csrf_field() !!}
                        <button type="submit"
                                class="text-primary font-semibold hover:underline transition-colors underline underline-offset-4 decoration-primary/30">
                            Resend verification email
                        </button>
                    </form>
                </div>
            </div>

        </section>
    </main>
@endsection