<footer class="relative overflow-hidden bg-navy-950 text-navy-100">
    {{-- Giant watermark wordmark --}}
    <p aria-hidden="true"
       class="pointer-events-none absolute -bottom-10 left-1/2 -translate-x-1/2 select-none whitespace-nowrap font-display text-[16vw] font-extrabold leading-none tracking-tight text-white/[0.03]">
        moneywise
    </p>
    <div class="blob -left-32 -top-32 h-96 w-96 bg-wise-500/15" data-parallax="0.15" aria-hidden="true"></div>

    {{-- CTA strip --}}
    <div class="container-site relative pt-16">
        <div class="relative overflow-hidden rounded-brand bg-gradient-to-br from-navy-800 via-navy-700 to-wise-900 p-8 ring-1 ring-white/10 md:p-10" data-gsap="zoom">
            <div class="blob -right-16 -top-24 h-64 w-64 bg-wise-400/25" aria-hidden="true"></div>
            <div class="relative grid items-center gap-8 lg:grid-cols-[1.3fr,1fr]">
                <div>
                    <p class="eyebrow text-wise-300">One small step</p>
                    <h2 class="mt-3 font-display text-2xl font-bold text-white md:text-3xl">Three minutes from now, you'll know exactly where you stand.</h2>
                    <p class="mt-2 max-w-lg text-sm leading-relaxed text-navy-200">Your Financial Health Check, your strengths map and your next three moves, free, no sign-up, zero judgement.</p>
                    <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-accent mt-5">
                        Take the free check <x-icon name="arrow-right" class="h-4 w-4" />
                    </a>
                </div>
                <div class="hidden grid-cols-3 gap-3 lg:grid">
                    @foreach ([
                        ['icon' => 'users', 'value' => '18k+', 'label' => 'Community'],
                        ['icon' => 'video', 'value' => '400+', 'label' => 'Free lessons'],
                        ['icon' => 'award', 'value' => '18 yrs', 'label' => 'Experience'],
                    ] as $stat)
                        <div class="rounded-2xl bg-white/[0.07] p-4 text-center ring-1 ring-white/10 backdrop-blur-sm">
                            <x-icon :name="$stat['icon']" class="mx-auto h-5 w-5 text-wise-300" />
                            <p class="mt-2 font-display text-xl font-extrabold text-white">{{ $stat['value'] }}</p>
                            <p class="text-[11px] font-semibold text-navy-300">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="container-site section relative">
        <div class="grid gap-12 md:grid-cols-2 lg:grid-cols-[1.6fr,1fr,1fr,1fr]">
            <div>
                <x-logo light />
                <p class="mt-5 max-w-sm text-sm leading-relaxed text-navy-300">
                    Africa's financial confidence ecosystem. Judgement-free tools, learning and coaching
                    to help you take control of your money, and build wealth that lasts.
                </p>

                {{-- Newsletter --}}
                <div class="mt-6" x-data="{ email: '', state: 'idle' }">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-wise-300">Wisdom in your inbox</p>
                    <template x-if="state !== 'done'">
                        <div class="mt-3">
                            <div class="flex overflow-hidden rounded-full bg-white/10 p-1 ring-1 ring-white/15 backdrop-blur transition focus-within:ring-wise-400">
                                <input type="email" x-model="email" placeholder="you@example.com" @keydown.enter="subscribe()"
                                       class="min-w-0 flex-1 border-0 bg-transparent px-4 text-sm text-white placeholder:text-navy-400 focus:ring-0">
                                <button @click="
                                        if (!email.includes('@')) { state = 'error'; return }
                                        state = 'busy';
                                        fetch('{{ route('newsletter.store') }}', {
                                            method: 'POST',
                                            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                                            body: JSON.stringify({ email })
                                        }).then(() => state = 'done').catch(() => state = 'error')
                                    "
                                        class="btn-accent btn-sm shrink-0" :disabled="state === 'busy'">
                                    <span x-show="state !== 'busy'">Subscribe</span>
                                    <span x-cloak x-show="state === 'busy'">…</span>
                                </button>
                            </div>
                            <p x-cloak x-show="state === 'error'" class="mt-2 text-xs font-semibold text-rose-400">That email doesn't look right, mind checking it?</p>
                            <p class="mt-2 text-[11px] text-navy-400">One practical money idea, twice a month. No spam, ever.</p>
                        </div>
                    </template>
                    <template x-if="state === 'done'">
                        <p class="mt-3 flex items-center gap-2 rounded-2xl bg-emerald-500/15 px-4 py-3 text-sm font-semibold text-emerald-300 ring-1 ring-emerald-400/30">
                            <x-icon name="check-circle" class="h-4 w-4" /> Karibu! You're on the list.
                        </p>
                    </template>
                </div>

                <div class="mt-6 flex gap-3">
                    @foreach ([
                        ['icon' => 'youtube', 'href' => 'https://www.youtube.com/@MoneyWiseWithRinaHicks', 'label' => 'YouTube'],
                        ['icon' => 'facebook', 'href' => 'https://linktr.ee/moneywiseke', 'label' => 'Facebook'],
                        ['icon' => 'instagram', 'href' => 'https://linktr.ee/moneywiseke', 'label' => 'Instagram'],
                        ['icon' => 'linkedin', 'href' => 'https://linktr.ee/moneywiseke', 'label' => 'LinkedIn'],
                        ['icon' => 'whatsapp', 'href' => 'https://wa.me/254112440122', 'label' => 'WhatsApp'],
                    ] as $social)
                        <a href="{{ $social['href'] }}" target="_blank" rel="noopener" aria-label="{{ $social['label'] }}"
                           class="grid h-10 w-10 place-items-center rounded-full bg-white/10 text-white ring-1 ring-white/10 transition-all duration-200 hover:-translate-y-1 hover:bg-wise-400 hover:text-navy-950 hover:shadow-wise">
                            <x-icon :name="$social['icon']" class="h-[18px] w-[18px]" />
                        </a>
                    @endforeach
                </div>
            </div>

            @foreach ([
                'Start Here' => [
                    ['label' => 'Individuals', 'href' => route('journey.individuals')],
                    ['label' => 'Corporates', 'href' => route('journey.corporates')],
                    ['label' => 'The Diaspora', 'href' => route('journey.diaspora')],
                    ['label' => 'Financial Health Check', 'href' => route('assessments.show', 'financial-health')],
                    ['label' => 'Money Personality Test', 'href' => route('assessments.show', 'money-personality')],
                ],
                'Learn & Tools' => [
                    ['label' => 'Courses', 'href' => route('learn')],
                    ['label' => 'All Tools & Calculators', 'href' => route('tools.index')],
                    ['label' => 'Guides Library (PDF)', 'href' => route('resources')],
                    ['label' => 'Articles', 'href' => route('blog')],
                    ['label' => 'Books', 'href' => route('books')],
                ],
                'Company' => [
                    ['label' => 'Our Story & Method', 'href' => route('about')],
                    ['label' => 'Coaching', 'href' => route('coaching')],
                    ['label' => 'Book a Speaker', 'href' => route('speaking')],
                    ['label' => 'Book a Consultation', 'href' => route('consultation')],
                    ['label' => 'Training Feedback', 'href' => route('feedback.show')],
                    ['label' => 'Contact Us', 'href' => route('contact')],
                ],
            ] as $heading => $links)
                <div>
                    <h3 class="text-xs font-bold uppercase tracking-[0.18em] text-wise-300">{{ $heading }}</h3>
                    <ul class="mt-4 space-y-2.5 text-sm">
                        @foreach ($links as $link)
                            <li>
                                <a href="{{ $link['href'] }}" class="group inline-flex items-center gap-1.5 text-navy-200 transition hover:text-wise-300">
                                    <span class="h-px w-0 bg-wise-400 transition-all duration-300 group-hover:w-3"></span>
                                    {{ $link['label'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>

        <div class="mt-14 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 text-sm text-navy-400 md:flex-row">
            <p class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
                <span>&copy; {{ date('Y') }} Money-Wise. All rights reserved.</span>
                <a href="{{ route('privacy') }}" class="underline-offset-2 transition hover:text-wise-300 hover:underline">Privacy Policy</a>
            </p>
            <div class="flex items-center gap-6">
                <a href="tel:+254112440122" class="flex items-center gap-2 transition hover:text-wise-300"><x-icon name="phone" class="h-4 w-4" /> +254 112 440 122</a>
                <a href="mailto:sema@moneywise.co.ke" class="flex items-center gap-2 transition hover:text-wise-300"><x-icon name="mail" class="h-4 w-4" /> sema@moneywise.co.ke</a>
            </div>
        </div>
    </div>
</footer>
