<x-layouts.site>
    <x-slot:title>For Individuals</x-slot:title>
    <x-slot:description>Start with your money score, choose a debt plan, understand your money personality, and build a clear path to saving and investing.</x-slot:description>

    <section class="relative overflow-hidden bg-mesh">
        <div class="container-site relative grid items-center gap-12 py-16 md:py-24 lg:grid-cols-2" data-hero>
            <div>
                <p class="eyebrow" data-hero-item>Individuals</p>
                <h1 class="mt-4 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                    Income comes in, income disappears. <span class="text-gradient">Let's end that cycle.</span>
                </h1>
                <p class="mt-4 max-w-xl text-lg leading-relaxed text-navy-600" data-hero-item>
                    No lectures. No shame. Just a clear picture of where you stand and a simple path to financial freedom,
                    real savings, and your first investments.
                </p>
                <div class="mt-7 flex flex-wrap gap-3" data-hero-item>
                    <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-accent btn-lg">
                        Take the assessment <x-icon name="arrow-right" class="h-5 w-5" />
                    </a>
                    <a href="{{ route('debt') }}" class="btn-ghost btn-lg">Explore debt help</a>
                </div>
                <p class="mt-3 flex items-center gap-2 text-sm text-navy-500" data-hero-item>
                    <x-icon name="clock" class="h-4 w-4 text-wise-500" /> 3 minutes to start, no sign-up required.
                </p>
            </div>
            <div class="relative" data-hero-item>
                <div class="card-photo h-[24rem]" data-tilt="4">
                    <img src="{{ asset('images/stock/individuals.jpg') }}" alt="A person reviewing a personal money plan">
                </div>
                <a href="{{ route('debt') }}" class="absolute -bottom-5 -left-5 rounded-2xl bg-white p-4 shadow-brand-lg ring-1 ring-navy-100 transition hover:-translate-y-0.5 hover:ring-wise-300" data-float>
                    <div class="flex items-center gap-3">
                        <span class="icon-tile !h-10 !w-10"><x-icon name="unlink" class="h-5 w-5" /></span>
                        <div>
                            <p class="font-display text-sm font-extrabold text-navy-900">Debt-free plan</p>
                            <p class="text-[11px] font-bold text-wise-600">Clickable guide + tool</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section class="section bg-white">
        <div class="container-site">
            <div class="max-w-3xl" data-gsap="fade-up">
                <p class="eyebrow">Start where it hurts</p>
                <h2 class="section-title mt-3">Tap the money problem that sounds most familiar.</h2>
                <p class="mt-3 text-lg text-navy-600">
                    Each path takes you straight to a tool, lesson, or assessment that gives you a next move.
                </p>
            </div>

            <div class="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-4" data-gsap-stagger>
                @foreach ([
                    ['icon' => 'wind', 'title' => 'Decent salary, nothing to show for it', 'desc' => 'Find the leaks, build a budget, and create a cushion.', 'cta' => 'Build your cushion', 'href' => route('tools.show', 'budget')],
                    ['icon' => 'repeat', 'title' => 'Mobile loans are now a routine', 'desc' => 'Understand debt, choose a payoff strategy, and set a goal.', 'cta' => 'Break free from debt', 'href' => route('debt')],
                    ['icon' => 'alert-circle', 'title' => 'Emergencies keep throwing you off', 'desc' => 'Calculate how much safety net your real life needs.', 'cta' => 'Size my emergency fund', 'href' => route('tools.show', 'emergency-fund')],
                    ['icon' => 'eye-off', 'title' => 'I know what to do, I just do not do it', 'desc' => 'Explore your money personality, habits, and emotions.', 'cta' => 'Know my money personality', 'href' => route('assessments.show', 'money-personality')],
                ] as $pain)
                    <a href="{{ $pain['href'] }}" class="card-glow group flex flex-col p-6">
                        <span class="icon-tile !h-11 !w-11 bg-rose-50 text-rose-500"><x-icon :name="$pain['icon']" class="h-5 w-5" /></span>
                        <h3 class="mt-4 font-display text-base font-bold leading-tight text-navy-900">{{ $pain['title'] }}</h3>
                        <p class="mt-2 flex-1 text-sm leading-relaxed text-navy-600">{{ $pain['desc'] }}</p>
                        <span class="mt-4 inline-flex items-center gap-1 text-sm font-bold text-wise-600">
                            {{ $pain['cta'] }} <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" />
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section bg-navy-50/50">
        <div class="container-site">
            <div class="text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">Three clear paths</p>
                <h2 class="section-title mt-3">Choose the action you need today.</h2>
            </div>

            <div class="mt-12 grid gap-6 lg:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['img' => 'stock/woman-smile.jpg', 'icon' => 'heart-pulse', 'title' => 'Financial Health Check', 'desc' => 'Get your score, see your money map, and receive recommendations for debt, saving, investing, and protection.', 'cta' => 'Take the assessment', 'href' => route('assessments.show', 'financial-health')],
                    ['img' => 'stock/mobile-money.jpg', 'icon' => 'unlink', 'title' => 'Debt Management', 'desc' => 'Learn good debt versus bad debt, Snowball versus Avalanche, then use the payoff calculator to set a realistic goal.', 'cta' => 'Open the debt page', 'href' => route('debt')],
                    ['img' => 'stock/budget-table.jpg', 'icon' => 'users', 'title' => 'Money Personality', 'desc' => 'Understand the emotions, habits, shame, and patterns that shape your money decisions.', 'cta' => 'Start the personality test', 'href' => route('assessments.show', 'money-personality')],
                ] as $path)
                    <a href="{{ $path['href'] }}" class="card-glow group flex flex-col overflow-hidden p-0">
                        <div class="relative h-44 overflow-hidden">
                            <img src="{{ asset('images/'.$path['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>
                        </div>
                        <div class="flex flex-1 flex-col p-6">
                            <span class="icon-tile -mt-12 relative z-10 !h-12 !w-12 ring-4 ring-white"><x-icon :name="$path['icon']" class="h-5 w-5" /></span>
                            <h3 class="mt-4 font-display text-lg font-bold text-navy-900">{{ $path['title'] }}</h3>
                            <p class="mt-2 flex-1 leading-relaxed text-navy-600">{{ $path['desc'] }}</p>
                            <span class="mt-5 inline-flex items-center gap-1 text-sm font-bold text-wise-600">
                                {{ $path['cta'] }} <x-icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-1" />
                            </span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <section class="relative overflow-hidden bg-navy-900 bg-mesh-dark">
        <div class="container-site section relative text-center" data-gsap="zoom">
            <h2 class="mx-auto max-w-2xl font-display text-display-sm font-bold text-white">Your results should become your dashboard.</h2>
            <p class="mx-auto mt-3 max-w-xl text-lg text-navy-200">
                Start free. Save your progress when you are ready, then use your dashboard to track tools, courses, and next steps.
            </p>
            <div class="mt-8 flex flex-wrap justify-center gap-3">
                <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-accent btn-lg">Take the assessment</a>
                <a href="{{ route('register') }}" class="btn-white btn-lg">Create free dashboard</a>
            </div>
        </div>
    </section>
</x-layouts.site>
