Product Quiz

@props([
    'eyebrow' => 'Product finder',
    'heading' => 'Find your perfect match',
    // Each question: ['prompt' => '…', 'options' => [['icon' => '<slug>', 'label' => '…', 'desc' => '…'], …]].
    // Icons map to a small inline SVG set below; unknown slugs fall back to a neutral mark.
    'questions' => null,
])
@php
    $questions ??= [
        [
            'prompt' => 'What are you shopping for?',
            'options' => [
                ['icon' => 'home', 'label' => 'For my home', 'desc' => 'Everyday comfort and style'],
                ['icon' => 'gift', 'label' => 'A gift', 'desc' => 'Something they\'ll remember'],
                ['icon' => 'sparkles', 'label' => 'A treat for me', 'desc' => 'Because you earned it'],
            ],
        ],
        [
            'prompt' => 'Which look feels most you?',
            'options' => [
                ['icon' => 'leaf', 'label' => 'Calm & natural', 'desc' => 'Warm, earthy tones'],
                ['icon' => 'bolt', 'label' => 'Bold & modern', 'desc' => 'Sharp lines, high contrast'],
                ['icon' => 'star', 'label' => 'Classic & timeless', 'desc' => 'Pieces that never date'],
                ['icon' => 'palette', 'label' => 'Playful & bright', 'desc' => 'Colour that pops'],
            ],
        ],
        [
            'prompt' => 'What\'s your budget?',
            'options' => [
                ['icon' => 'tag', 'label' => 'Under €50', 'desc' => 'Smart everyday value'],
                ['icon' => 'wallet', 'label' => '€50–€150', 'desc' => 'A considered upgrade'],
                ['icon' => 'crown', 'label' => '€150+', 'desc' => 'Go all in'],
            ],
        ],
    ];

    // Seed the recommended products keyed to the budget answer (last question).
    $results = [
        ['name' => 'Aura Lounge Throw', 'price' => '€48', 'note' => 'Best value pick'],
        ['name' => 'Meridian Wool Blanket', 'price' => '€129', 'note' => 'Most popular'],
        ['name' => 'Atelier Cashmere Wrap', 'price' => '€220', 'note' => 'Premium choice'],
    ];

    $iconPaths = [
        'home' => '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/>',
        'gift' => '<rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><path d="M7.5 8a2.5 2.5 0 1 1 0-5C9 3 12 5 12 8c0-3 3-5 4.5-5a2.5 2.5 0 1 1 0 5"/>',
        'sparkles' => '<path d="m12 3 1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z"/><path d="M19 14l.7 1.8L21.5 17l-1.8.7L19 19.5l-.7-1.8L16.5 17l1.8-.4z"/>',
        'leaf' => '<path d="M11 20A7 7 0 0 1 4 13c0-6 7-9 16-9 0 9-3 16-9 16Z"/><path d="M4 20c2-4 5-7 9-9"/>',
        'bolt' => '<path d="M13 2 4 14h7l-2 8 9-12h-7z"/>',
        'star' => '<path d="m12 3 2.7 5.5L21 9.4l-4.5 4.3 1.1 6.3L12 17l-5.6 3 1.1-6.3L3 9.4l6.3-.9z"/>',
        'palette' => '<path d="M12 3a9 9 0 0 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4c0-4.4-4-7.7-9-7.7Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="10.5" r="1"/>',
        'tag' => '<path d="M3 11V4a1 1 0 0 1 1-1h7l9 9-8 8z"/><circle cx="7.5" cy="7.5" r="1.2"/>',
        'wallet' => '<path d="M3 7a2 2 0 0 1 2-2h13a1 1 0 0 1 1 1v2"/><path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H5a2 2 0 0 1-2-2Z"/><circle cx="16.5" cy="13" r="1"/>',
        'crown' => '<path d="m3 7 4 5 5-7 5 7 4-5v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/>',
    ];
    $fallbackIcon = '<circle cx="12" cy="12" r="9"/>';

    $alpine = [
        'questions' => $questions,
        'results' => $results,
    ];
@endphp

<section
    data-slot="product-quiz-01"
    x-data="{
        step: 0,
        answers: @js(array_fill(0, count($questions), null)),
        questions: @js($alpine['questions']),
        results: @js($alpine['results']),
        get total() { return this.questions.length },
        get isResult() { return this.step >= this.total },
        get answered() { return this.answers[this.step] !== null && this.answers[this.step] !== undefined },
        get pct() { return Math.round(((this.isResult ? this.total : this.step) / this.total) * 100) },
        get stepLabel() {
            return this.isResult
                ? @js(__('Your result'))
                : @js(__('Step :current of :total')).replace(':current', this.step + 1).replace(':total', this.total)
        },
        get result() {
            const budget = this.answers[this.total - 1]
            const idx = budget === null || budget === undefined ? 1 : budget
            return this.results[Math.min(idx, this.results.length - 1)]
        },
        dir: 'fwd',
        select(qIndex, optIndex) { this.answers[qIndex] = optIndex },
        next() { if (this.answered && this.step < this.total) { this.dir = 'fwd'; this.step++ } },
        back() { if (this.step > 0) { this.dir = 'back'; this.step-- } },
        restart() { this.dir = 'back'; this.step = 0; this.answers = this.answers.map(() => null) },
    }"
    x-bind:data-step-dir="dir"
    {{ $attributes->merge(['class' => 'flex min-h-svh items-center justify-center bg-background px-4 py-12 text-foreground']) }}
>
    <x-ui.card class="w-full max-w-xl overflow-hidden rounded-lg border border-border bg-card p-0 shadow-sm">
        {{-- Header --}}
        <div class="flex flex-col gap-4 border-b border-border p-6 sm:p-8">
            <div class="flex items-center justify-between gap-4">
                <x-ui.badge variant="secondary" class="w-fit">{{ __($eyebrow) }}</x-ui.badge>
                <span class="text-sm font-medium text-muted-foreground" x-text="stepLabel">{{ __('Step :current of :total', ['current' => 1, 'total' => count($questions)]) }}</span>
            </div>

            <div class="flex flex-col gap-2">
                <h2 class="text-pretty text-xl font-semibold leading-tight tracking-tight sm:text-2xl">{{ __($heading) }}</h2>

                {{-- Live step progress: the primitive's indicator follows the Alpine step. --}}
                <x-ui.progress
                    :value="0"
                    :max="count($questions)"
                    :label="__('Quiz progress')"
                    bind="isResult ? total : step"
                />
            </div>
        </div>

        {{-- Body: one question at a time --}}
        <div class="p-6 sm:p-8">
            @foreach ($questions as $qIndex => $question)
                <div x-show="step === {{ $qIndex }}" x-cloak data-step-panel class="flex flex-col gap-6">
                    <h3 class="text-pretty text-base font-medium leading-snug text-foreground sm:text-lg">{{ __($question['prompt']) }}</h3>

                    <div
                        role="radiogroup"
                        aria-label="{{ __($question['prompt']) }}"
                        class="grid grid-cols-1 gap-4 sm:grid-cols-2"
                    >
                        @foreach ($question['options'] as $optIndex => $option)
                            <button
                                type="button"
                                role="radio"
                                x-bind:aria-checked="answers[{{ $qIndex }}] === {{ $optIndex }} ? 'true' : 'false'"
                                x-on:click="select({{ $qIndex }}, {{ $optIndex }})"
                                x-bind:class="answers[{{ $qIndex }}] === {{ $optIndex }}
                                    ? 'border-primary ring-2 ring-primary bg-primary/5'
                                    : 'border-border hover:border-primary/50 hover:bg-muted/50'"
                                class="flex items-start gap-4 rounded-lg border bg-card p-6 text-start transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                            >
                                <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-foreground">
                                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        {!! $iconPaths[$option['icon'] ?? ''] ?? $fallbackIcon !!}
                                    </svg>
                                </span>
                                <span class="flex flex-col gap-0.5">
                                    <span class="text-sm font-medium leading-snug text-foreground">{{ __($option['label']) }}</span>
                                    @if (! empty($option['desc']))
                                        <span class="text-sm leading-relaxed text-muted-foreground">{{ __($option['desc']) }}</span>
                                    @endif
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endforeach

            {{-- Final step: the recommendation — the quiz's payoff gets the staggered
                 entrance ([data-animate] keyframes replay on each x-show reveal). --}}
            <div x-show="isResult" x-cloak data-animate="pop" class="flex flex-col gap-6">
                <div data-animate="rise" data-animate-order="1" class="flex flex-col gap-2">
                    <span class="text-sm font-medium text-primary">{{ __('We found your match') }}</span>
                    <h3 class="text-pretty text-base font-medium leading-snug text-foreground sm:text-lg">{{ __('Based on your answers, we recommend:') }}</h3>
                </div>

                <div data-animate="rise" data-animate-order="2" class="flex flex-col gap-4 rounded-lg border border-border bg-muted/30 p-6 sm:flex-row sm:items-center">
                    {{-- Image placeholder --}}
                    <div class="flex aspect-square w-full items-center justify-center rounded-lg bg-muted text-muted-foreground sm:size-28 sm:shrink-0" aria-hidden="true">
                        <svg class="size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="3" width="18" height="18" rx="2"/>
                            <circle cx="9" cy="9" r="2"/>
                            <path d="m21 15-3.5-3.5a2 2 0 0 0-2.8 0L5 21"/>
                        </svg>
                    </div>

                    <div class="flex flex-1 flex-col gap-2">
                        <x-ui.badge variant="secondary" class="w-fit" x-text="result.note">{{ __('Most popular') }}</x-ui.badge>
                        <span class="text-base font-semibold leading-tight text-foreground" x-text="result.name">{{ __('Meridian Wool Blanket') }}</span>
                        <span class="text-base font-bold tracking-tight text-foreground" x-text="result.price">€129</span>
                    </div>
                </div>

                <x-ui.button size="lg" class="w-full">{{ __('Shop now') }}</x-ui.button>

                <button
                    type="button"
                    x-on:click="restart()"
                    class="text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:underline"
                >
                    {{ __('Start over') }}
                </button>
            </div>
        </div>

        {{-- Footer nav (hidden on the result step) --}}
        <div x-show="! isResult" class="flex items-center justify-between gap-4 border-t border-border p-6 sm:px-8">
            <x-ui.button
                variant="ghost"
                x-on:click="back()"
                x-show="step > 0"
            >
                <svg class="size-4 me-2 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="m15 18-6-6 6-6"/>
                </svg>
                {{ __('Back') }}
            </x-ui.button>

            {{-- Spacer keeps Next end-aligned when Back is hidden on step 0. --}}
            <span x-show="step === 0" aria-hidden="true"></span>

            <x-ui.button
                x-on:click="next()"
                x-bind:disabled="! answered"
                x-bind:aria-disabled="! answered"
                class="ms-auto"
            >
                <span x-text="step === total - 1 ? @js(__('See results')) : @js(__('Next'))">{{ __('Next') }}</span>
                <svg class="size-4 ms-2 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="m9 18 6-6-6-6"/>
                </svg>
            </x-ui.button>
        </div>
    </x-ui.card>
</section>