<!DOCTYPE html>
<html class="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>{{ config('app.name', 'Invoice Pro') }} - Verify Email</title>
    @php
        $companySettings = \App\Models\CompanySetting::getSettings();
        $faviconUrl = ($companySettings->company_favicon ?? null) && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_favicon)
            ? \Illuminate\Support\Facades\Storage::url($companySettings->company_favicon)
            : asset('favicon.png');
    @endphp
    <link rel="icon" type="image/png" href="{{ $faviconUrl }}">
    <link rel="shortcut icon" type="image/png" href="{{ $faviconUrl }}">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect"/>
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet"/>
    <!-- Material Symbols -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries" onerror="console.error('Failed to load Tailwind CSS CDN')"></script>
    <!-- Tailwind Configuration -->
    <script id="tailwind-config">
        (function() {
            function configureTailwind() {
                if (typeof tailwind !== 'undefined' && tailwind.config) {
                    tailwind.config = {
                        darkMode: "class",
                        theme: {
                            extend: {
                                colors: {
                                    "primary": "#340080",
                                    "background-light": "#f6f7f8",
                                    "background-dark": "#101922",
                                },
                                fontFamily: {
                                    "display": ["Inter", "sans-serif"]
                                },
                                borderRadius: {
                                    "DEFAULT": "0.25rem",
                                    "lg": "0.5rem",
                                    "xl": "0.75rem",
                                    "2xl": "1rem",
                                    "full": "9999px"
                                },
                            },
                        },
                    };
                } else {
                    setTimeout(configureTailwind, 100);
                }
            }
            configureTailwind();
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', configureTailwind);
            } else {
                configureTailwind();
            }
        })();
    </script>
    <style>
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white antialiased" style="background-color: rgba(0, 0, 0, 1) !important;">
<div class="relative flex min-h-screen w-full flex-row overflow-hidden">
    <!-- LEFT COLUMN: Illustration & Visuals -->
    <div class="relative hidden lg:flex w-1/2 flex-col items-center justify-center bg-[#F0F4FA] dark:bg-[#111c2a] p-10 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10"></div>
        <div class="absolute -top-20 -left-20 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
        <div class="relative z-10 flex flex-col items-center gap-10 max-w-lg w-full text-center">
            <div class="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
                <span class="material-symbols-outlined text-5xl">mail</span>
            </div>
            <h2 class="text-2xl font-bold text-[#111418] mb-2">Verify Your Email</h2>
            <p class="text-[#617589] max-w-sm mx-auto">Thanks for signing up! Please verify your email address to continue.</p>
        </div>
    </div>
    <!-- RIGHT COLUMN: Verify Email Form -->
    <div class="flex w-full lg:w-1/2 flex-col justify-center bg-white dark:bg-background-dark overflow-y-auto">
        <div class="w-full max-w-[560px] mx-auto px-6 py-12 md:px-12 flex flex-col h-full lg:h-auto justify-center">
            <!-- Brand Header -->
            <div class="flex flex-col gap-6 mb-8">
                <div class="flex items-center gap-2">
                    @php
                        use Illuminate\Support\Facades\Storage;
                        $logoUrl = null;
                        $companySettings = \App\Models\CompanySetting::getSettings();
                        if (isset($companySettings) && $companySettings->company_logo && Storage::disk('public')->exists($companySettings->company_logo)) {
                            $logoUrl = Storage::url($companySettings->company_logo);
                        }
                    @endphp
                    @if($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $companySettings->company_name ?? config('app.name', 'Invoice Pro') }}" class="h-8 w-auto object-contain">
                    @else
                        <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
                            <span class="material-symbols-outlined">description</span>
                        </div>
                    @endif
                    <span class="text-xl font-bold tracking-tight text-[#111418] dark:text-white">{{ $companySettings->company_name ?? config('app.name', 'Invoice Pro') }}</span>
                </div>
                <div class="flex flex-col gap-2">
                    <h1 class="text-[#111418] dark:text-white text-3xl font-black leading-tight tracking-[-0.033em]">
                        Verify Your Email
                    </h1>
                    <p class="text-[#617589] text-base font-normal leading-normal">
                        Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
                    </p>
                </div>
            </div>

            @if (session('status') == 'verification-link-sent')
                <div class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-lg text-sm">
                    A new verification link has been sent to the email address you provided during registration.
                </div>
            @endif

            <!-- Form Actions -->
            <div class="flex flex-col gap-4">
                <form method="POST" action="{{ route('verification.send') }}">
                    @csrf
                    <button class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-primary hover:bg-primary/90 text-white text-base font-bold leading-normal tracking-[0.015em] transition-colors shadow-md shadow-primary/20" type="submit">
                        <span class="truncate">Resend Verification Email</span>
                    </button>
                </form>

                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 border border-[#dbe0e6] dark:border-slate-700 bg-white dark:bg-slate-800 hover:bg-gray-50 dark:hover:bg-slate-700 text-[#111418] dark:text-white text-base font-semibold leading-normal transition-colors">
                        <span class="truncate">Log Out</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
