@props([
    'slug',
    'title',
    'tagline',                 // what this tool/assessment is about
    'steps' => [],             // how to use it (array of short strings)
    'confidential' => true,    // show the confidentiality disclosure
    'cta' => 'Start using the tool',
])

@php
    $cols = match (min(count($steps), 4)) {
        1 => 'lg:grid-cols-1',
        2 => 'lg:grid-cols-2',
        3 => 'lg:grid-cols-3',
        default => 'lg:grid-cols-4',
    };
@endphp

<div class="mt-6" data-hero-item>
    <div class="relative left-1/2 -translate-x-1/2 rounded-3xl bg-white/90 p-5 text-left shadow-brand ring-1 ring-navy-100 backdrop-blur md:p-6"
         style="width: min(72rem, calc(100vw - 2rem));">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div class="max-w-2xl">
                <p class="text-xs font-bold uppercase tracking-[0.18em] text-wise-600">Before you start</p>
                <h2 class="mt-2 font-display text-xl font-bold text-navy-900">{{ $title }}</h2>
                <p class="mt-2 text-sm leading-relaxed text-navy-600">{{ $tagline }}</p>
            </div>
            <a href="#tool-workspace" class="btn-accent btn-sm shrink-0">{{ $cta }}</a>
        </div>

        {{-- The full guide, inline: every step visible at a glance --}}
        @if (count($steps))
            <div class="mt-5 grid gap-3 sm:grid-cols-2 {{ $cols }}">
                @foreach ($steps as $i => $s)
                    <div class="relative flex gap-3 rounded-2xl bg-navy-50/70 p-3.5 ring-1 ring-navy-100">
                        <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-wise-400 font-display text-sm font-extrabold text-navy-950">{{ $i + 1 }}</span>
                        <p class="self-center text-[13px] leading-snug text-navy-700">{{ $s }}</p>
                        @if (! $loop->last)
                            <span class="absolute -right-2.5 top-1/2 hidden -translate-y-1/2 text-navy-300 lg:block" aria-hidden="true">
                                <x-icon name="chevron-right" class="h-4 w-4" />
                            </span>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif

        @if ($confidential)
            <p class="mt-3 flex items-start gap-2.5 rounded-2xl bg-emerald-50 px-4 py-2.5 text-[13px] font-medium leading-relaxed text-emerald-800 ring-1 ring-emerald-100">
                <x-icon name="shield-check" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" />
                <span>Private and confidential: everything runs in your browser. We never see your numbers, and nothing is stored unless you choose to save or email your plan.</span>
            </p>
        @endif
    </div>
</div>