@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 step
])

@php
    $last = $confidential ? 2 : 1;
@endphp

<div
    x-data="{
        open: false,
        step: 0,
        last: {{ $last }},
        init() { if (! localStorage.getItem('mw-intro-{{ $slug }}')) this.open = true; },
        remember() { localStorage.setItem('mw-intro-{{ $slug }}', '1'); },
        close() { this.open = false; this.remember(); },
        next() { this.step < this.last ? this.step++ : this.close(); },
    }"
    class="mt-4 flex justify-center"
    data-hero-item
>
    {{-- Reopen chip --}}
    <button type="button" @click="step = 0; open = true"
            class="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-navy-700 shadow-brand ring-1 ring-navy-100 transition hover:text-wise-600 hover:ring-wise-300">
        <x-icon name="sparkles" class="h-4 w-4 text-wise-500" /> How it works
    </button>

    {{-- Overlay wizard (teleported to body so no ancestor overflow can clip it) --}}
    <template x-teleport="body">
        <div x-show="open" x-cloak x-transition.opacity.duration.200ms
             class="fixed inset-0 z-[90] grid place-items-center bg-navy-950/70 p-4 backdrop-blur-sm"
             @click.self="close()" @keydown.escape.window="close()">
            <div class="relative w-full max-w-lg overflow-hidden rounded-brand bg-white shadow-brand-lg"
                 x-show="open"
                 x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="opacity-0 translate-y-4 scale-95" x-transition:enter-end="opacity-100 translate-y-0 scale-100">

                {{-- Header band --}}
                <div class="relative overflow-hidden bg-gradient-to-br from-navy-900 via-navy-800 to-wise-800 p-6 text-white">
                    <div class="absolute inset-0 opacity-10" style="background:url('{{ asset('images/pattern-kitenge.svg') }}'); background-size:300px;"></div>
                    <button type="button" @click="close()" class="absolute right-4 top-4 text-white/70 transition hover:text-white" aria-label="Skip">
                        <x-icon name="x" class="h-5 w-5" />
                    </button>
                    <span class="relative grid h-12 w-12 place-items-center rounded-2xl bg-wise-400 text-navy-950 shadow-wise"><x-icon name="sparkles" class="h-6 w-6" /></span>
                    <p class="relative mt-3 text-xs font-bold uppercase tracking-[0.18em] text-wise-300">Quick guide</p>
                    <h2 class="relative font-display text-2xl font-bold">{{ $title }}</h2>
                </div>

                <div class="p-6">
                    {{-- Step 0: what it is --}}
                    <div x-show="step === 0">
                        <p class="text-xs font-bold uppercase tracking-wide text-navy-400">What this does</p>
                        <p class="mt-2 text-lg leading-relaxed text-navy-700">{{ $tagline }}</p>
                    </div>

                    {{-- Step 1: how to use --}}
                    <div x-show="step === 1" x-cloak>
                        <p class="text-xs font-bold uppercase tracking-wide text-navy-400">How to use it</p>
                        <ol class="mt-3 space-y-2.5">
                            @foreach ($steps as $i => $s)
                                <li class="flex gap-3 leading-snug text-navy-700">
                                    <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-wise-100 text-sm font-bold text-wise-700">{{ $i + 1 }}</span>
                                    <span>{{ $s }}</span>
                                </li>
                            @endforeach
                        </ol>
                    </div>

                    {{-- Step 2: confidentiality --}}
                    @if ($confidential)
                        <div x-show="step === 2" x-cloak>
                            <p class="text-xs font-bold uppercase tracking-wide text-navy-400">Private &amp; confidential</p>
                            <div class="mt-3 flex gap-3">
                                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-emerald-50 text-emerald-600"><x-icon name="shield-check" class="h-5 w-5" /></span>
                                <p class="text-sm leading-relaxed text-navy-600">
                                    Everything here runs privately in your browser. We don't see or store your numbers, and nothing is saved
                                    unless <em>you</em> choose to save your plan or email it to yourself. No judgement, ever.
                                </p>
                            </div>
                        </div>
                    @endif

                    {{-- Footer: progress + nav --}}
                    <div class="mt-7 flex items-center justify-between">
                        <div class="flex items-center gap-1.5">
                            <template x-for="d in ({{ $last }} + 1)" :key="d">
                                <span class="h-2 rounded-full transition-all duration-300" :class="step === (d - 1) ? 'w-5 bg-wise-500' : 'w-2 bg-navy-200'"></span>
                            </template>
                        </div>
                        <div class="flex gap-2">
                            <button type="button" x-show="step > 0" @click="step--" class="btn-ghost btn-sm">Back</button>
                            <button type="button" @click="next()" class="btn-accent btn-sm">
                                <span x-text="step < last ? 'Next' : 'Got it — let\'s go'"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
