<x-layouts.site>
    <x-slot:title>Free Tools &amp; Assessments</x-slot:title>
    <x-slot:description>Seven interactive money tools built for African money life, health check, personality test, debt payoff, compound growth, emergency fund, values compass and wealth planner. Works in KES, NGN, GHS, ZAR, TZS, UGX and USD.</x-slot:description>

    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -right-32 -top-20 h-96 w-96 bg-wise-300/40" data-parallax="0.2" aria-hidden="true"></div>
        <div class="container-site relative py-16 text-center md:py-20" data-hero>
            <p class="eyebrow justify-center" data-hero-item>The toolbox</p>
            <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                Tools that do the maths <span class="text-gradient">while you drag the sliders</span>
            </h1>
            <p class="mx-auto mt-4 max-w-2xl text-lg text-navy-600" data-hero-item>
                Eight free, interactive tools. No forms, no jargon, no judgement, move a slider, watch your future change, save your plan.
            </p>
        </div>
    </section>

    <section class="section bg-white pt-0">
        <div class="container-site">
            {{-- Two flagship assessments --}}
            <div class="grid gap-6 lg:grid-cols-2" data-gsap-stagger>
                <a href="{{ route('assessments.show', 'financial-health') }}"
                   class="card-glow group relative block overflow-hidden bg-navy-900 p-0 ring-0">
                    <img src="{{ asset('images/stock/debt-free.jpg') }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-20 transition-transform duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-r from-navy-950 via-navy-900/85 to-navy-900/50"></div>
                    <div class="relative p-8 md:p-9">
                        <span class="grid h-16 w-16 place-items-center rounded-3xl bg-wise-400 text-navy-950 shadow-wise">
                            <x-icon name="heart-pulse" class="h-7 w-7" />
                        </span>
                        <span class="chip mt-4 bg-wise-400 text-navy-950"><x-icon name="star" class="h-3.5 w-3.5" /> Start here · free · 3 min</span>
                        <h2 class="mt-3 font-display text-2xl font-bold text-white">Financial Health Check</h2>
                        <p class="mt-2 leading-relaxed text-navy-100">20 honest questions → your Financial Health Check, your strengths map, and your next three moves.</p>
                        <span class="mt-4 inline-flex items-center gap-1.5 font-bold text-wise-300">Take it now <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                    </div>
                </a>

                <a href="{{ route('assessments.show', 'money-personality') }}"
                   class="card-glow group relative block overflow-hidden bg-wise-700 p-0 ring-0">
                    <img src="{{ asset('images/stock/hero-confidence.jpg') }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-20 transition-transform duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 bg-gradient-to-r from-wise-900 via-wise-800/85 to-wise-700/50"></div>
                    <div class="relative p-8 md:p-9">
                        <span class="grid h-16 w-16 place-items-center rounded-3xl bg-white text-wise-600 shadow-brand-lg">
                            <x-icon name="users" class="h-7 w-7" />
                        </span>
                        <span class="chip mt-4 bg-white text-wise-700"><x-icon name="sparkles" class="h-3.5 w-3.5" /> New · free · 2 min</span>
                        <h2 class="mt-3 font-display text-2xl font-bold text-white">Money Personality Test</h2>
                        <p class="mt-2 leading-relaxed text-wise-100">Guardian, Dreamer, Hustler or Giver? 12 choices reveal your money DNA, superpower and blind spot included.</p>
                        <span class="mt-4 inline-flex items-center gap-1.5 font-bold text-white">Discover my type <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                    </div>
                </a>
            </div>

            {{-- The tools grid --}}
            <div class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['href' => route('tools.show', 'budget'), 'img' => 'stock/budget-table.jpg', 'icon' => 'calculator', 'title' => 'Budget Builder', 'desc' => 'Give every shilling a job across essentials, future-you and lifestyle.', 'meta' => '3 min · live balance'],
                    ['href' => route('tools.show', 'debt-payoff'), 'img' => 'stock/mobile-money.jpg', 'icon' => 'unlink', 'title' => 'Debt Payoff Planner', 'desc' => 'Every debt listed, your exact debt-free date revealed.', 'meta' => '2 min · interactive'],
                    ['href' => route('tools.show', 'compound-growth'), 'img' => 'stock/phone-chart.jpg', 'icon' => 'trending-up', 'title' => 'Compound Growth Visualiser', 'desc' => 'Watch what KES 5,000/month quietly becomes.', 'meta' => '1 min · live chart'],
                    ['href' => route('tools.show', 'emergency-fund'), 'img' => 'stock/piggy-bank.jpg', 'icon' => 'life-buoy', 'title' => 'Emergency Fund Calculator', 'desc' => 'Your safety cushion, sized to your real life.', 'meta' => '90 sec · progress ring'],
                    ['href' => route('tools.show', 'wealth-goals'), 'img' => 'stock/home-keys.jpg', 'icon' => 'target', 'title' => 'Wealth & Goals Planner', 'desc' => 'Every dream gets a number, a date and a monthly amount.', 'meta' => '3 min · multi-goal'],
                    ['href' => route('tools.show', 'values-clarification'), 'img' => 'stock/woman-smile.jpg', 'icon' => 'compass', 'title' => 'Values Compass', 'desc' => 'From 16 values to your top 5, your money compass.', 'meta' => '4 min · card sort'],
                    ['href' => route('assessments.show', 'chama-health'), 'img' => 'stock/community.jpg', 'icon' => 'handshake', 'title' => 'Chama Health Check', 'desc' => 'Score your group before the famous drama finds it.', 'meta' => '2 min · group score'],
                    ['href' => route('tools.show', 'loan-cost'), 'img' => 'stock/mobile-money.jpg', 'icon' => 'receipt', 'title' => 'True Cost of a Loan', 'desc' => 'The lender shows the monthly. We show the truth.', 'meta' => '1 min · verdict included'],
                    ['href' => route('tools.show', 'retirement'), 'img' => 'stock/retired-couple.jpg', 'icon' => 'landmark', 'title' => 'Retirement Readiness', 'desc' => 'Your readiness score, and the exact catch-up plan.', 'meta' => '2 min · readiness gauge'],
                ] as $tool)
                    <a href="{{ $tool['href'] }}" class="card-glow group flex flex-col overflow-hidden p-0" data-tilt="5">
                        <div class="relative h-44 overflow-hidden">
                            <img src="{{ asset('images/'.$tool['img']) }}" alt="" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                            <div class="absolute inset-0 bg-gradient-to-t from-navy-950/60 to-transparent"></div>
                            <span class="absolute bottom-3 left-4 rounded-full bg-white/90 px-3 py-1 text-[11px] font-bold uppercase tracking-wide text-navy-700 backdrop-blur">{{ $tool['meta'] }}</span>
                        </div>
                        <div class="flex flex-1 flex-col p-6">
                            <div class="flex items-center gap-3">
                                <span class="icon-tile -mt-12 relative z-10 !h-11 !w-11 ring-4 ring-white"><x-icon :name="$tool['icon']" class="h-5 w-5" /></span>
                                <h3 class="font-display text-lg font-bold text-navy-900">{{ $tool['title'] }}</h3>
                            </div>
                            <p class="mt-2 flex-1 text-sm leading-relaxed text-navy-600">{{ $tool['desc'] }}</p>
                            <span class="mt-3 inline-flex items-center gap-1 text-sm font-bold text-wise-600">
                                Open <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" />
                            </span>
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Members strip --}}
            <div class="mt-10 flex flex-col items-center justify-between gap-4 rounded-brand bg-navy-50 p-7 md:flex-row" data-gsap="fade-up">
                <div class="flex items-center gap-4">
                    <span class="icon-tile h-12 w-12"><x-icon name="refresh" class="h-5 w-5" /></span>
                    <p class="text-sm leading-relaxed text-navy-700">
                        <strong class="font-display text-navy-900">Members keep every plan.</strong><br>
                        Save results to your dashboard, track your score over time, retake and improve.
                    </p>
                </div>
                @guest
                    <a href="{{ route('register') }}" class="btn-primary shrink-0">Create free account</a>
                @else
                    <a href="{{ route('dashboard') }}" class="btn-primary shrink-0">My dashboard</a>
                @endguest
            </div>
        </div>
    </section>
</x-layouts.site>
