@php
    // Real published courses feed the Learn megamenu (Investable is featured separately).
    $navCourses = \App\Models\Course::query()
        ->where('is_published', true)
        ->where('slug', '!=', 'investable')
        ->orderBy('sort')
        ->take(3)
        ->get(['title', 'slug', 'level']);
@endphp
<nav x-data="{ open: false, dropdown: null, hoverTimer: null, scrolled: false, progress: 0 }"
     x-init="
        $watch('open', v => document.body.classList.toggle('overflow-hidden', v));
        const onScroll = () => {
            scrolled = window.scrollY > 24;
            const h = document.documentElement;
            progress = h.scrollHeight > h.clientHeight ? (window.scrollY / (h.scrollHeight - h.clientHeight)) * 100 : 0;
        };
        window.addEventListener('scroll', onScroll, { passive: true }); onScroll();
     "
     class="sticky top-0 z-50 transition-all duration-300"
     :class="scrolled ? 'bg-white/85 shadow-brand backdrop-blur-2xl' : 'bg-white/60 backdrop-blur-xl'"
     @keydown.escape.window="open = false; dropdown = null"
     @resize.window="if (window.innerWidth >= 1024) open = false">

    {{-- Scroll progress hairline --}}
    <div class="absolute inset-x-0 top-0 h-[2.5px] bg-navy-100/50">
        <div class="h-full bg-gradient-to-r from-wise-400 via-wise-500 to-navy-600 transition-[width] duration-150" :style="'width:' + progress + '%'"></div>
    </div>

    <div class="container-site flex items-center justify-between gap-4 transition-all duration-300" :class="scrolled ? 'h-16' : 'h-[4.75rem]'">

        <a href="{{ route('home') }}" class="shrink-0 transition-transform duration-300" :class="scrolled && 'scale-90'" aria-label="Money-Wise home">
            <x-logo />
        </a>

        {{-- ============ Desktop menu ============ --}}
        <div class="hidden items-center gap-0.5 lg:flex" @mouseleave="hoverTimer = setTimeout(() => dropdown = null, 180)" @mouseenter="clearTimeout(hoverTimer)">

            {{-- Start Here --}}
            <div class="relative" @mouseenter="dropdown = 'start'">
                <button @click="dropdown = dropdown === 'start' ? null : 'start'"
                        class="nav-link flex items-center gap-1.5 rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600"
                        :class="dropdown === 'start' && 'text-wise-600'">
                    Start Here
                    <x-icon name="chevron-down" class="h-4 w-4 transition-transform duration-200" x-bind:class="dropdown === 'start' && 'rotate-180'" />
                </button>
                <div x-cloak x-show="dropdown === 'start'"
                     x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2 scale-[.98]" x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-100" x-transition:leave-end="opacity-0 -translate-y-1"
                     class="mega-panel mega-panel-wide">
                    <div class="mega-card grid grid-cols-[1.2fr,1fr] gap-3 p-3" x-data="{ hovered: 'individuals' }">
                        <div class="space-y-1">
                            <p class="px-3.5 pt-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Pick your journey</p>
                            @foreach ([
                                ['key' => 'individuals', 'route' => 'journey.individuals', 'icon' => 'sprout', 'title' => 'Individuals', 'desc' => 'Debt freedom, budgeting and your first investments'],
                                ['key' => 'corporates', 'route' => 'journey.corporates', 'icon' => 'building', 'title' => 'Corporates', 'desc' => 'Staff wellness programmes and training'],
                                ['key' => 'diaspora', 'route' => 'journey.diaspora', 'icon' => 'globe', 'title' => 'The Diaspora', 'desc' => 'Invest back home with trust and full visibility'],
                            ] as $item)
                                <a href="{{ route($item['route']) }}" class="mega-link group"
                                   @mouseenter="hovered = '{{ $item['key'] }}'" @focus="hovered = '{{ $item['key'] }}'"
                                   :class="hovered === '{{ $item['key'] }}' && 'bg-wise-50 ring-1 ring-wise-200'">
                                    <span class="icon-tile"><x-icon :name="$item['icon']" class="h-5 w-5" /></span>
                                    <span>
                                        <span class="block font-display text-sm font-bold text-navy-900">{{ $item['title'] }}</span>
                                        <span class="mt-0.5 block text-[13px] leading-snug text-navy-500">{{ $item['desc'] }}</span>
                                    </span>
                                </a>
                            @endforeach
                        </div>

                        {{-- Right panel: image + message + CTA change with the hovered journey --}}
                        <div class="relative min-h-[15rem]">
                            {{-- Individuals --}}
                            <a href="{{ route('assessments.show', 'financial-health') }}" x-show="hovered === 'individuals'" x-transition.opacity.duration.200ms class="card-photo group absolute inset-0">
                                <img src="{{ asset('images/stock/hero-confidence.jpg') }}" alt="A person planning their finances">
                                <span class="overlay">
                                    <span class="chip w-fit bg-wise-400 text-navy-950">Free · 3 minutes</span>
                                    <span class="mt-2 font-display text-lg font-bold leading-tight text-white">Not sure where to start? Get your Financial Health Check.</span>
                                    <span class="mt-2 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300">Take the assessment <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                                </span>
                            </a>
                            {{-- Corporates --}}
                            <a href="{{ route('journey.corporates') }}" x-show="hovered === 'corporates'" x-cloak x-transition.opacity.duration.200ms class="card-photo group absolute inset-0">
                                <img src="{{ asset('images/stock/corporate.jpg') }}" alt="A staff training session">
                                <span class="overlay">
                                    <span class="chip w-fit bg-wise-400 text-navy-950">For your team</span>
                                    <span class="mt-2 font-display text-lg font-bold leading-tight text-white">Bring Money-Wise to your people: training and financial wellness.</span>
                                    <span class="mt-2 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300">See corporate options <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                                </span>
                            </a>
                            {{-- Diaspora --}}
                            <a href="{{ route('journey.diaspora') }}" x-show="hovered === 'diaspora'" x-cloak x-transition.opacity.duration.200ms class="card-photo group absolute inset-0">
                                <img src="{{ asset('images/stock/diaspora.jpg') }}" alt="Building wealth back home from abroad">
                                <span class="overlay">
                                    <span class="chip w-fit bg-wise-400 text-navy-950">From anywhere</span>
                                    <span class="mt-2 font-display text-lg font-bold leading-tight text-white">Invest confidently back home and build your nest egg.</span>
                                    <span class="mt-2 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300">Explore the Diaspora path <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tools --}}
            <div class="relative" @mouseenter="dropdown = 'tools'">
                <button @click="dropdown = dropdown === 'tools' ? null : 'tools'"
                        class="nav-link flex items-center gap-1.5 rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600"
                        :class="dropdown === 'tools' && 'text-wise-600'">
                    Tools
                    <x-icon name="chevron-down" class="h-4 w-4 transition-transform duration-200" x-bind:class="dropdown === 'tools' && 'rotate-180'" />
                </button>
                <div x-cloak x-show="dropdown === 'tools'"
                     x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2 scale-[.98]" x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-100" x-transition:leave-end="opacity-0 -translate-y-1"
                     class="mega-panel mega-panel-wide">
                    <div class="mega-card p-3">
                        <div class="grid grid-cols-2 gap-2">
                            <a href="{{ route('assessments.show', 'financial-health') }}"
                               class="group flex items-center gap-4 rounded-2xl bg-gradient-to-r from-navy-800 to-navy-600 p-4 transition-all hover:shadow-brand-lg">
                                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-wise-400 text-navy-950 shadow-wise"><x-icon name="heart-pulse" class="h-5 w-5" /></span>
                                <span class="flex-1">
                                    <span class="flex items-center gap-2 font-display text-sm font-bold text-white">Financial Health Check
                                        <span class="rounded-full bg-wise-400 px-2 py-0.5 text-[10px] font-extrabold uppercase text-navy-950">Free</span>
                                    </span>
                                    <span class="block text-[13px] text-wise-200">Your Financial Health Check in 3 minutes</span>
                                </span>
                            </a>
                            <a href="{{ route('assessments.show', 'investment-risk') }}"
                               class="group flex items-center gap-4 rounded-2xl bg-gradient-to-r from-wise-600 to-wise-500 p-4 transition-all hover:shadow-brand-lg">
                                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-white text-wise-600"><x-icon name="scale" class="h-5 w-5" /></span>
                                <span class="flex-1">
                                    <span class="flex items-center gap-2 font-display text-sm font-bold text-white">Investment Risk Assessment
                                        <span class="rounded-full bg-white px-2 py-0.5 text-[10px] font-extrabold uppercase text-wise-600">New</span>
                                    </span>
                                    <span class="block text-[13px] text-wise-100">Find the investments that fit your comfort level</span>
                                </span>
                            </a>
                        </div>
                        <div class="mt-2 grid grid-cols-4 gap-1">
                            @foreach ([
                                ['href' => route('tools.show', 'budget'), 'icon' => 'calculator', 'title' => 'Budget Builder'],
                                ['href' => route('tools.show', 'debt-payoff'), 'icon' => 'unlink', 'title' => 'Debt Payoff'],
                                ['href' => route('tools.show', 'compound-growth'), 'icon' => 'trending-up', 'title' => 'Compound Growth'],
                                ['href' => route('tools.show', 'emergency-fund'), 'icon' => 'life-buoy', 'title' => 'Emergency Fund'],
                                ['href' => route('tools.show', 'wealth-goals'), 'icon' => 'target', 'title' => 'Wealth & Goals'],
                                ['href' => route('tools.show', 'values-clarification'), 'icon' => 'compass', 'title' => 'Values Clarification'],
                                ['href' => route('tools.show', 'loan-cost'), 'icon' => 'receipt', 'title' => 'True Cost of Loans'],
                                ['href' => route('tools.show', 'retirement'), 'icon' => 'landmark', 'title' => 'Retirement'],
                            ] as $item)
                                <a href="{{ $item['href'] }}" class="mega-link group !p-3">
                                    <span class="icon-tile !h-9 !w-9"><x-icon :name="$item['icon']" class="h-4 w-4" /></span>
                                    <span class="self-center font-display text-[13px] font-bold leading-tight text-navy-900">{{ $item['title'] }}</span>
                                </a>
                            @endforeach
                        </div>
                        <div class="mt-2 grid grid-cols-2 gap-2">
                            <a href="{{ route('tools.index') }}" class="flex items-center justify-center gap-1.5 rounded-2xl bg-navy-50 py-2.5 text-sm font-bold text-navy-700 transition hover:bg-wise-50 hover:text-wise-700">
                                Browse the full toolbox <x-icon name="arrow-right" class="h-4 w-4" />
                            </a>
                            <a href="{{ route('investing.partners') }}" class="flex items-center justify-center gap-1.5 rounded-2xl bg-wise-50 py-2.5 text-sm font-bold text-wise-700 ring-1 ring-wise-100 transition hover:bg-wise-100">
                                Open an investment account <x-icon name="arrow-right" class="h-4 w-4" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Learn (e-learning) --}}
            <div class="relative" @mouseenter="dropdown = 'learn'">
                <button @click="dropdown = dropdown === 'learn' ? null : 'learn'"
                        class="nav-link flex items-center gap-1.5 rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600"
                        :class="dropdown === 'learn' && 'text-wise-600'">
                    Learn
                    <x-icon name="chevron-down" class="h-4 w-4 transition-transform duration-200" x-bind:class="dropdown === 'learn' && 'rotate-180'" />
                </button>
                <div x-cloak x-show="dropdown === 'learn'"
                     x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2 scale-[.98]" x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-100" x-transition:leave-end="opacity-0 -translate-y-1"
                     class="mega-panel mega-panel-medium">
                    <div class="mega-card p-3">
                        <div class="grid grid-cols-[1fr,1.2fr] gap-3">
                            <a href="{{ route('learn.show', 'investable') }}" class="card-photo group min-h-[15rem]">
                                <img src="{{ asset('images/card-investable.jpg') }}" alt="The Investable course">
                                <span class="overlay">
                                    <span class="chip w-fit bg-wise-400 text-navy-950">Flagship course</span>
                                    <span class="mt-2 font-display text-lg font-bold leading-tight text-white">Investable, invest with total confidence</span>
                                    <span class="mt-2 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300">See the curriculum <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                                </span>
                            </a>
                            <div class="space-y-1">
                                <p class="px-3.5 pt-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Courses &amp; video</p>
                                <a href="{{ route('learn') }}" class="mega-link group">
                                    <span class="icon-tile"><x-icon name="graduation-cap" class="h-5 w-5" /></span>
                                    <span>
                                        <span class="block font-display text-sm font-bold text-navy-900">All courses</span>
                                        <span class="mt-0.5 block text-[13px] leading-snug text-navy-500">Structured, interactive learning paths</span>
                                    </span>
                                </a>
                                @foreach ($navCourses as $course)
                                    <a href="{{ route('learn.show', $course->slug) }}" class="mega-link group">
                                        <span class="icon-tile"><x-icon name="book-open" class="h-5 w-5" /></span>
                                        <span>
                                            <span class="block font-display text-sm font-bold text-navy-900">{{ $course->title }}</span>
                                            <span class="mt-0.5 block text-[13px] leading-snug text-navy-500">{{ ucfirst($course->level ?? 'All levels') }} · at your own pace</span>
                                        </span>
                                    </a>
                                @endforeach
                                <a href="https://www.youtube.com/@MoneyWiseWithRinaHicks" target="_blank" rel="noopener" class="mega-link group">
                                    <span class="icon-tile"><x-icon name="youtube" class="h-5 w-5" /></span>
                                    <span>
                                        <span class="block font-display text-sm font-bold text-navy-900">Watch free on YouTube</span>
                                        <span class="mt-0.5 block text-[13px] leading-snug text-navy-500">600+ videos, no jargon</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <a href="{{ route('learn') }}" class="mt-2 flex items-center justify-center gap-1.5 rounded-2xl bg-navy-50 py-2.5 text-sm font-bold text-navy-700 transition hover:bg-wise-50 hover:text-wise-700">
                            Browse all courses <x-icon name="arrow-right" class="h-4 w-4" />
                        </a>
                    </div>
                </div>
            </div>

            {{-- Resources (guides, articles, books) --}}
            <div class="relative" @mouseenter="dropdown = 'resources'">
                <button @click="dropdown = dropdown === 'resources' ? null : 'resources'"
                        class="nav-link flex items-center gap-1.5 rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600"
                        :class="dropdown === 'resources' && 'text-wise-600'">
                    Resources
                    <x-icon name="chevron-down" class="h-4 w-4 transition-transform duration-200" x-bind:class="dropdown === 'resources' && 'rotate-180'" />
                </button>
                <div x-cloak x-show="dropdown === 'resources'"
                     x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2 scale-[.98]" x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                     x-transition:leave="transition ease-in duration-100" x-transition:leave-end="opacity-0 -translate-y-1"
                     class="mega-panel mega-panel-medium">
                    <div class="mega-card p-3">
                        <div class="grid grid-cols-[1fr,1.2fr] gap-3">
                            <a href="{{ route('resources') }}" class="card-photo group min-h-[15rem]">
                                <img src="{{ asset('images/stock/learning.jpg') }}" alt="The Money-Wise guides library">
                                <span class="overlay">
                                    <span class="chip w-fit bg-wise-400 text-navy-950">Free to download</span>
                                    <span class="mt-2 font-display text-lg font-bold leading-tight text-white">Flip-through guides &amp; playbooks</span>
                                    <span class="mt-2 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300">Open the library <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                                </span>
                            </a>
                            <div class="space-y-1">
                                <p class="px-3.5 pt-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Read &amp; download</p>
                                @foreach ([
                                    ['href' => route('resources'), 'icon' => 'book-flip', 'title' => 'Guides library', 'desc' => 'Flip-through playbooks, free PDF downloads'],
                                    ['href' => route('blog'), 'icon' => 'file-text', 'title' => 'Articles', 'desc' => 'Practical reads with tools built in'],
                                    ['href' => route('books'), 'icon' => 'book-open', 'title' => 'Books', 'desc' => 'Money-Wise &amp; Marriage Built to Last'],
                                ] as $item)
                                    <a href="{{ $item['href'] }}" class="mega-link group">
                                        <span class="icon-tile"><x-icon :name="$item['icon']" class="h-5 w-5" /></span>
                                        <span>
                                            <span class="block font-display text-sm font-bold text-navy-900">{{ $item['title'] }}</span>
                                            <span class="mt-0.5 block text-[13px] leading-snug text-navy-500">{!! $item['desc'] !!}</span>
                                        </span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                        <a href="{{ route('resources') }}" class="mt-2 flex items-center justify-center gap-1.5 rounded-2xl bg-navy-50 py-2.5 text-sm font-bold text-navy-700 transition hover:bg-wise-50 hover:text-wise-700">
                            Explore the library <x-icon name="arrow-right" class="h-4 w-4" />
                        </a>
                    </div>
                </div>
            </div>

            <a href="{{ route('coaching') }}" class="nav-link rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600">Coaching</a>
            <a href="{{ route('about') }}" class="nav-link rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600">About</a>
            <a href="{{ route('contact') }}" class="nav-link rounded-full px-3.5 py-2.5 text-sm font-semibold text-navy-800 transition hover:text-wise-600">Contact</a>
        </div>

        <div class="hidden items-center gap-3 lg:flex">
            @auth
                <a href="{{ route('dashboard') }}" class="flex items-center gap-1.5 text-sm font-semibold text-navy-700 transition hover:text-wise-600">
                    <x-icon name="user" class="h-4 w-4" /> Dashboard
                </a>
            @else
                <a href="{{ route('login') }}" class="text-sm font-semibold text-navy-700 transition hover:text-wise-600">Log in</a>
            @endauth
            <a href="{{ route('consultation') }}" class="btn-accent btn-sm">
                <x-icon name="calendar" class="h-4 w-4" /> Book a consultation
            </a>
        </div>

        {{-- Mobile hamburger --}}
        <button @click="open = !open" class="grid h-11 w-11 place-items-center rounded-full text-navy-800 transition hover:bg-navy-50 lg:hidden" aria-label="Menu">
            <x-icon name="menu" class="h-6 w-6" x-show="!open" />
            <x-icon name="x" class="h-6 w-6" x-cloak x-show="open" />
        </button>
    </div>

    {{-- ============ Mobile menu (teleported to body so `fixed` is viewport-relative,
         not trapped by the nav's backdrop-filter containing block) ============ --}}
    <template x-teleport="body">
    <div x-cloak x-show="open"
         x-transition:enter="transition ease-out duration-250" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0 -translate-y-2"
         class="fixed inset-x-0 z-[70] overflow-y-auto overscroll-contain bg-white lg:hidden"
         :class="scrolled ? 'top-16' : 'top-[4.75rem]'"
         style="bottom: 0; height: auto; max-height: calc(100dvh - 4rem)"
         @click.outside="open = false">
        <div class="container-site space-y-6 py-6 pb-24">
            <a href="{{ route('assessments.show', 'financial-health') }}" class="card-photo block h-36">
                <img src="{{ asset('images/stock/hero-confidence.jpg') }}" alt="">
                <span class="overlay">
                    <span class="font-display font-bold text-white">Take your free Financial Health Check</span>
                    <span class="text-sm text-wise-300">3 minutes · no sign-up needed</span>
                </span>
            </a>

            <div>
                <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Start here</p>
                <div class="space-y-1">
                    @foreach ([
                        ['route' => route('journey.individuals'), 'icon' => 'sprout', 'title' => 'Individuals'],
                        ['route' => route('journey.corporates'), 'icon' => 'building', 'title' => 'Corporates'],
                        ['route' => route('journey.diaspora'), 'icon' => 'globe', 'title' => 'The Diaspora'],
                    ] as $item)
                        <a href="{{ $item['route'] }}" class="mega-link">
                            <span class="icon-tile"><x-icon :name="$item['icon']" class="h-5 w-5" /></span>
                            <span class="self-center font-display text-sm font-bold text-navy-900">{{ $item['title'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div>
                <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Tools &amp; assessments</p>
                <div class="grid grid-cols-2 gap-1">
                    @foreach ([
                        ['route' => route('assessments.show', 'financial-health'), 'icon' => 'heart-pulse', 'title' => 'Financial Health Check'],
                        ['route' => route('assessments.show', 'investment-risk'), 'icon' => 'scale', 'title' => 'Risk Assessment'],
                        ['route' => route('tools.show', 'budget'), 'icon' => 'calculator', 'title' => 'Budget Builder'],
                        ['route' => route('tools.show', 'debt-payoff'), 'icon' => 'unlink', 'title' => 'Debt Payoff'],
                        ['route' => route('tools.show', 'wealth-goals'), 'icon' => 'target', 'title' => 'Wealth & Goals'],
                        ['route' => route('tools.show', 'values-clarification'), 'icon' => 'compass', 'title' => 'Values Clarification'],
                        ['route' => route('investing.partners'), 'icon' => 'landmark', 'title' => 'Open an account'],
                        ['route' => route('tools.index'), 'icon' => 'sliders', 'title' => 'All tools'],
                    ] as $item)
                        <a href="{{ $item['route'] }}" class="mega-link !p-3">
                            <span class="icon-tile !h-9 !w-9"><x-icon :name="$item['icon']" class="h-4 w-4" /></span>
                            <span class="self-center font-display text-[13px] font-bold text-navy-900">{{ $item['title'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div>
                <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Learn</p>
                <div class="space-y-1">
                    @foreach ([
                        ['route' => route('learn'), 'icon' => 'graduation-cap', 'title' => 'All courses'],
                        ['route' => 'https://www.youtube.com/@MoneyWiseWithRinaHicks', 'icon' => 'youtube', 'title' => 'Watch free on YouTube', 'external' => true],
                    ] as $item)
                        <a href="{{ $item['route'] }}" @if($item['external'] ?? false) target="_blank" rel="noopener" @endif class="mega-link">
                            <span class="icon-tile"><x-icon :name="$item['icon']" class="h-5 w-5" /></span>
                            <span class="self-center font-display text-sm font-bold text-navy-900">{{ $item['title'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div>
                <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Resources</p>
                <div class="space-y-1">
                    @foreach ([
                        ['route' => route('resources'), 'icon' => 'book-flip', 'title' => 'Guides library'],
                        ['route' => route('blog'), 'icon' => 'file-text', 'title' => 'Articles'],
                        ['route' => route('books'), 'icon' => 'book-open', 'title' => 'Books'],
                    ] as $item)
                        <a href="{{ $item['route'] }}" class="mega-link">
                            <span class="icon-tile"><x-icon :name="$item['icon']" class="h-5 w-5" /></span>
                            <span class="self-center font-display text-sm font-bold text-navy-900">{{ $item['title'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div>
                <p class="mb-2 text-[11px] font-bold uppercase tracking-[0.18em] text-navy-400">Company</p>
                <div class="space-y-1">
                    @foreach ([
                        ['route' => route('coaching'), 'icon' => 'compass', 'title' => 'Coaching'],
                        ['route' => route('about'), 'icon' => 'heart', 'title' => 'About Money-Wise'],
                        ['route' => route('contact'), 'icon' => 'message-circle', 'title' => 'Contact'],
                    ] as $item)
                        <a href="{{ $item['route'] }}" class="mega-link">
                            <span class="icon-tile"><x-icon :name="$item['icon']" class="h-5 w-5" /></span>
                            <span class="self-center font-display text-sm font-bold text-navy-900">{{ $item['title'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="flex flex-col gap-2 border-t border-navy-100 pt-5">
                @auth
                    <a href="{{ route('dashboard') }}" class="btn-primary w-full">My Dashboard</a>
                @else
                    <a href="{{ route('register') }}" class="btn-accent w-full">Create free account</a>
                    <a href="{{ route('login') }}" class="btn-ghost w-full">Log in</a>
                @endauth
            </div>
        </div>
    </div>
    </template>
</nav>