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

@section('title', 'Account Activated - Digital Menu')

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

        {{-- Background blobs --}}
        <div class="absolute top-0 right-0 w-96 h-96 bg-primary-fixed opacity-20 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 w-80 h-80 bg-secondary-fixed opacity-20 rounded-full blur-3xl pointer-events-none"></div>

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

            {{-- Badge --}}
            <div class="flex justify-center mb-4">
                <span class="inline-block px-4 py-1 rounded-full text-xs font-bold tracking-widest uppercase text-primary"
                      style="background: rgba(184, 19, 17, 0.1);">
                    Confirmation Successful
                </span>
            </div>

            {{-- Heading --}}
            <h1 class="font-headline text-5xl font-extrabold text-on-surface tracking-tighter leading-tight mb-4">
                Account <span class="text-primary italic">Activated!</span>
            </h1>

            {{-- Sub-text --}}
            <p class="text-lg text-on-surface-variant font-medium leading-relaxed max-w-md mx-auto mb-10">
                Your account is now active. You can sign in and start building your digital menu right away.
            </p>

            {{-- CTA Button --}}
            <a href="{{ route('login') }}"
               class="kinetic-gradient text-on-primary font-bold text-lg py-5 px-8 mt-4 rounded-full shadow-xl hover:opacity-90 hover:scale-[1.02] active:scale-95 transition-all duration-300 inline-flex items-center justify-center gap-2">
                Go to Login
                <span class="material-symbols-outlined"
                      style="font-size: 1.25rem;">arrow_forward</span>
            </a>

        </section>
    </main>
@endsection