@extends('front.front_layouts')

@section('styles')
    <style>
        /* Success icon animation */
        @keyframes success-checkmark {
            0% {
                stroke-dashoffset: 50;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes success-circle {
            0% {
                stroke-dashoffset: 250;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes success-scale {
            0% {
                transform: scale(0.8);
                opacity: 0;
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .success-icon-wrapper {
            animation: success-scale 0.6s ease-out forwards;
        }

        .success-circle {
            stroke-dasharray: 250;
            stroke-dashoffset: 250;
            animation: success-circle 0.8s ease-out 0.3s forwards;
        }

        .success-checkmark {
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            animation: success-checkmark 0.5s ease-out 0.8s forwards;
        }

        /* Floating particles */
        @keyframes float-particle {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        .success-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: float-particle 3s ease-out infinite;
        }
    </style>
@endsection

@section('content')
    <!-- Breadcrumb Hero -->
    <section class="hero-section">
        <!-- Background Elements -->
        <div class="hero-bg-grid grid-background">
            <div class="hero-orb-primary"></div>
            <div class="hero-orb-secondary"></div>
        </div>

        <div class="hero-content">
            <h1 class="hero-heading animate-on-scroll">
                {{ $frontSetting->register_button_text ?? 'Register' }}
            </h1>

            <div class="hero-divider animate-on-scroll">
                <span class="hero-divider-thin"></span>
                <span class="hero-divider-thick"></span>
                <span class="hero-divider-thin"></span>
            </div>

            <nav class="breadcrumb-pill animate-on-scroll" aria-label="Breadcrumb">
                <svg class="w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
                <a href="{{ route('front.index') }}"
                    class="link-muted">{{ $frontSetting->home_text ?? 'Home' }}</a>
                <svg class="breadcrumb-separator" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
                <span class="text-foreground font-semibold">{{ $frontSetting->register_button_text ?? 'Register' }}</span>
            </nav>
        </div>
    </section>

    <!-- Verification Message Section -->
    <section class="content-section">
        <div class="max-w-lg mx-auto">
            @if ($verificationSuccess)
                <!-- Success Card -->
                <div
                    class="relative bg-card border border-border/50 rounded-3xl p-8 sm:p-12 text-center overflow-hidden animate-on-scroll">
                    <!-- Gradient overlay -->
                    <div
                        class="absolute inset-0 bg-gradient-to-b from-emerald-500/5 via-transparent to-transparent pointer-events-none">
                    </div>

                    <!-- Floating particles container -->
                    <div class="absolute inset-0 pointer-events-none overflow-hidden">
                        <div class="success-particle bg-emerald-400/60" style="left: 20%; animation-delay: 0s;"></div>
                        <div class="success-particle bg-green-400/60" style="left: 40%; animation-delay: 0.5s;"></div>
                        <div class="success-particle bg-teal-400/60" style="left: 60%; animation-delay: 1s;"></div>
                        <div class="success-particle bg-emerald-400/60" style="left: 80%; animation-delay: 1.5s;"></div>
                    </div>

                    <div class="relative z-10">
                        <!-- Animated Success Icon -->
                        <div
                            class="success-icon-wrapper inline-flex items-center justify-center w-24 h-24 sm:w-28 sm:h-28 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-8">
                            <svg class="w-12 h-12 sm:w-14 sm:h-14" viewBox="0 0 52 52" fill="none">
                                <circle class="success-circle" cx="26" cy="26" r="24" stroke="hsl(152, 76%, 51%)"
                                    stroke-width="3" fill="none" />
                                <path class="success-checkmark" d="M15 27l7 7 15-15" stroke="hsl(152, 76%, 51%)"
                                    stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" />
                            </svg>
                        </div>

                        <!-- Success Title -->
                        <h2 class="text-2xl sm:text-3xl font-bold text-foreground mb-4">
                            {{ $frontSetting->register_success_text ?? 'Thank you for registration. Please login to get started' }}
                        </h2>

                        <!-- Account Info Badge -->
                        @if (isset($email))
                            <div
                                class="inline-flex items-center gap-2.5 px-5 py-3 rounded-2xl bg-[hsl(var(--foreground)/0.03)] border border-border/30 mb-8">
                                <div class="w-8 h-8 rounded-full bg-emerald-500/15 flex items-center justify-center">
                                    <svg class="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                                    </svg>
                                </div>
                                <span class="text-[14px] text-foreground/80 font-medium">{{ $email }}</span>
                            </div>
                        @endif

                        <!-- Action Buttons -->
                        <div class="flex flex-col sm:flex-row gap-3 justify-center">
                            <a href="{{ url('/admin/login') }}"
                                class="btn-primary inline-flex items-center justify-center gap-2 px-7 py-3 text-[15px] font-semibold rounded-xl">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                    stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
                                </svg>
                                {{ $frontSetting->login_button_text ?? 'Login' }}
                            </a>
                            <a href="{{ route('front.features') }}"
                                class="btn-secondary inline-flex items-center justify-center gap-2 px-7 py-3 text-[15px] font-semibold rounded-xl">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                    stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z" />
                                </svg>
                                {{ $frontSetting->features_text ?? 'Features' }}
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Additional Info -->
                <p class="text-xs text-muted-foreground text-center mt-6 flex items-center justify-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    Your account is secure and activated
                </p>
            @else
                <!-- Error Card -->
                <div
                    class="relative bg-card border border-border/50 rounded-3xl p-8 sm:p-12 text-center overflow-hidden animate-on-scroll">
                    <!-- Gradient overlay -->
                    <div
                        class="absolute inset-0 bg-gradient-to-b from-red-500/5 via-transparent to-transparent pointer-events-none">
                    </div>

                    <div class="relative z-10">
                        <!-- Error Icon -->
                        <div
                            class="inline-flex items-center justify-center w-24 h-24 sm:w-28 sm:h-28 rounded-full bg-red-500/10 border border-red-500/20 mb-8">
                            <svg class="w-12 h-12 sm:w-14 sm:h-14 text-red-400" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </div>

                        <!-- Error Message -->
                        <h2 class="text-2xl sm:text-3xl font-bold text-foreground mb-4">
                            {{ $frontSetting->error_contact_support ?? 'Invalid or expired verification link. Please contact support.' }}
                        </h2>

                        <!-- Action Buttons -->
                        <div class="flex flex-col sm:flex-row gap-3 justify-center mt-8">
                            <a href="{{ route('front.contact') }}"
                                class="btn-primary inline-flex items-center justify-center gap-2 px-7 py-3 text-[15px] font-semibold rounded-xl">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                    stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                                </svg>
                                {{ $frontSetting->contact_text ?? 'Contact Us' }}
                            </a>
                            <a href="{{ route('front.index') }}"
                                class="btn-secondary inline-flex items-center justify-center gap-2 px-7 py-3 text-[15px] font-semibold rounded-xl">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                    stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                                </svg>
                                {{ $frontSetting->home_text ?? 'Home' }}
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection