@extends('layouts.auth')

@section('title', 'Verify Your Email - DigitalStore')

@push('styles')
<style>
    @keyframes laptop-float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-25px); }
    }
    .laptop-float {
        animation: laptop-float 6s ease-in-out infinite;
    }
    .dot-pattern {
        background-image: radial-gradient(circle, #6c63ff 1px, transparent 1px);
        background-size: 30px 30px;
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .email-badge {
        background: linear-gradient(135deg, rgba(108, 99, 255, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
        border: 1px dashed rgba(108, 99, 255, 0.3);
    }
    .btn-glow:hover {
        box-shadow: 0 10px 30px -10px rgba(108, 99, 255, 0.5);
        transform: translateY(-2px);
    }
</style>
@endpush

@section('content')
<div class="min-h-screen flex flex-col lg:flex-row bg-[#f8fafc]">
    {{-- Left Side: Branding (Elite Sidebar) --}}
    <div class="hidden lg:flex lg:w-5/12 bg-[#0b101b] relative overflow-hidden flex flex-col p-12 lg:p-20">
        {{-- High-End Ambient Background --}}
        <div class="absolute inset-0 dot-pattern opacity-[0.07]"></div>
        <div class="absolute top-[-10%] left-[-10%] w-[150%] aspect-square bg-gradient-to-br from-brand-500/20 via-purple-500/10 to-transparent blur-[120px] animate-pulse"></div>

        <div class="relative z-10 flex flex-col h-full">
            {{-- Logo --}}
            <div class="mb-16">
                <a href="/" class="flex items-center gap-4 group">
                    <div class="w-12 h-12 bg-brand-500 rounded-2xl flex items-center justify-center shadow-2xl shadow-brand-500/40 group-hover:scale-110 transition-all">
                        <span class="text-white text-2xl font-black italic">D</span>
                    </div>
                    <span class="text-white text-3xl font-black tracking-tighter">Digital<span class="text-brand-500">Store</span></span>
                </a>
            </div>

            {{-- Illustration with Enhanced Depth --}}
            <div class="flex-1 flex items-center justify-center">
                <div class="relative w-full max-w-md laptop-float">
                    <div class="absolute inset-0 bg-brand-500/20 blur-[80px] rounded-full scale-75"></div>
                    <img src="{{ asset('themes/digital_agence/assets/images/signup_visual.png') }}" alt="Verification" class="relative z-10 w-full h-auto drop-shadow-[0_35px_60px_rgba(0,0,0,0.5)]">
                </div>
            </div>

            {{-- Typography --}}
            <div class="mt-auto">
                <h2 class="text-white text-5xl font-black mb-6 leading-[1.1] tracking-tight">Almost <span class="text-brand-500">There.</span></h2>
                <p class="text-gray-400 text-xl leading-relaxed max-w-sm font-medium opacity-80">One small step to unlock your full creative potential.</p>
            </div>
        </div>
    </div>

    {{-- Right Side: Premium Verification Card --}}
    <div class="w-full lg:w-7/12 flex items-center justify-center p-6 md:p-12 relative overflow-hidden">
        {{-- Background Decorations --}}
        <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/5 rounded-full blur-[100px]"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/5 rounded-full blur-[100px]"></div>

        <div class="w-full max-w-xl relative z-10">
            {{-- Mobile Logo --}}
            <div class="lg:hidden flex justify-center mb-10">
                <a href="/" class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-brand-500 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white text-xl font-bold italic">D</span>
                    </div>
                    <span class="text-gray-900 text-2xl font-black tracking-tight">DigitalStore</span>
                </a>
            </div>

            <div class="glass-card rounded-[48px] p-8 md:p-16 shadow-[0_20px_50px_rgba(0,0,0,0.03)] border border-white/60">
                <div class="text-center">
                    {{-- Animated Icon Container --}}
                    <div class="relative inline-flex items-center justify-center w-24 h-24 mb-10">
                        <div class="absolute inset-0 bg-brand-500/10 rounded-[32px] rotate-6"></div>
                        <div class="absolute inset-0 bg-brand-500/5 rounded-[32px] -rotate-6"></div>
                        <div class="relative w-20 h-20 bg-white rounded-[28px] shadow-sm border border-gray-100 flex items-center justify-center text-brand-500">
                            <i data-lucide="mail" class="w-10 h-10 stroke-[1.5]"></i>
                        </div>
                    </div>

                    <h1 class="text-4xl font-black text-gray-900 mb-4 tracking-tight">Verify your email</h1>
                    <p class="text-gray-500 text-lg mb-10 font-medium leading-relaxed max-w-md mx-auto">
                        We've sent a secure verification link to your inbox. Please click it to confirm your identity.
                    </p>

                    {{-- Email Display Card --}}
                    <div class="email-badge rounded-3xl p-6 mb-10 transition-all hover:bg-white/50">
                        <div class="text-[10px] font-black text-brand-500 uppercase tracking-[0.2em] mb-2">Registration Email</div>
                        <div class="text-xl font-bold text-gray-800 break-all">{{ auth()->user()->email ?? 'your@email.com' }}</div>
                    </div>

                    @if (session('status') == 'verification-link-sent')
                        <div class="mb-10 p-5 bg-emerald-50 border border-emerald-100 text-emerald-600 rounded-2xl text-sm font-bold animate-bounce shadow-sm">
                            <div class="flex items-center justify-center gap-2">
                                <i data-lucide="check-circle-2" class="w-5 h-5"></i>
                                <span>A fresh link has been delivered!</span>
                            </div>
                        </div>
                    @endif

                    <div class="space-y-6">
                        <form method="POST" action="{{ route('verification.send') }}">
                            @csrf
                            <button type="submit" class="w-full py-5 bg-brand-500 hover:bg-brand-600 text-white font-black text-lg rounded-2xl shadow-xl shadow-brand-500/25 transition-all active:scale-[0.98] btn-glow flex items-center justify-center gap-3 group">
                                <span>Resend Link</span>
                                <i data-lucide="send" class="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
                            </button>
                        </form>

                        <div class="flex items-center justify-between pt-6 border-t border-gray-100/50">
                            <a href="{{ route('profile.show') }}" class="inline-flex items-center gap-2 text-sm font-bold text-gray-400 hover:text-brand-500 transition-colors">
                                <i data-lucide="user-cog" class="w-4 h-4"></i>
                                <span>Update Profile</span>
                            </a>
                            
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="inline-flex items-center gap-2 text-sm font-bold text-gray-400 hover:text-red-500 transition-colors">
                                    <i data-lucide="log-out" class="w-4 h-4"></i>
                                    <span>Sign Out</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Premium Help Footer --}}
            <div class="mt-12 text-center">
                <p class="text-sm font-bold text-gray-400">
                    Didn't receive the email? 
                    <span class="text-gray-900">Check your spam folder</span> or 
                    <a href="#" class="text-brand-500 hover:underline">Contact Support</a>
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endpush