<?php
$neurogenesis_theme_web_routes = neurogenesis_theme_registry_get('neurogenesis_theme.routes.web', []);
$neurogenesis_theme_routes_for_page = $neurogenesis_theme_web_routes[NEUROGENESIS_THEME_PAGE_ID] ?? [];
$neurogenesis_theme_default_route = !empty($neurogenesis_theme_routes_for_page) ? array_key_first($neurogenesis_theme_routes_for_page) : 'welcome';
$neurogenesis_theme_dashboard_url = neurogenesis_theme_generate_page_url($neurogenesis_theme_default_route);
?>


<div class="min-h-screen bg-gray-50">
    <?php self::section('sections/tabs'); ?>
    <main class="flex-1 overflow-y-auto w-full p-8 max-w-6xl mx-auto">
        <div class="relative mb-12 group">
            <div class="absolute inset-0 bg-primary/10 blur-[60px] rounded-full scale-150 group-hover:scale-[1.75] transition-transform"></div>
            <div class="relative w-48 h-48 bg-white border border-slate-100 shadow-2xl flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-primary/20">
                    <circle cx="11" cy="11" r="8" />
                    <path d="m21 21-4.35-4.35" />
                    <path d="m8 8 6 6" />
                    <path d="m14 8-6 6" />
                </svg>
                <div class="absolute top-4 right-4 flex gap-1">
                    <div class="w-2 h-2 rounded-full bg-pink-500"></div>
                    <div class="w-2 h-2 rounded-full bg-rose-400"></div>
                </div>
                <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-slate-900 flex items-center justify-center text-white shadow-xl">
                    <span class="font-black text-3xl">404</span>
                </div>
            </div>
        </div>

        <h2 class="text-5xl font-black text-slate-900 mb-6 tracking-tighter"><?php _e('Lost in the blocks?', 'thinko'); ?></h2>
        <p class="text-slate-500 text-xl max-w-lg mb-12 leading-relaxed">
            <?php _e('The page you\'re looking for doesn\'t exist or has been moved to another section. Let\'s get you back on track.', 'thinko'); ?>
        </p>

        <div class="flex flex-col sm:flex-row gap-4 w-full max-w-md">
            <a
                href="<?php echo esc_url($neurogenesis_theme_dashboard_url); ?>"
                class="flex-1 bg-primary hover:bg-primary-hover text-white py-5 px-8 font-black shadow-2xl shadow-primary/30 transition-all hover:-translate-y-1 active:translate-y-0 text-lg flex items-center justify-center gap-3 no-underline text-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                    <polyline points="9 22 9 12 15 12 15 22" />
                </svg>
                <?php _e('Go to Dashboard', 'thinko'); ?>
            </a>
        </div>
    </main>

</div>