@props(['steps', 'autoplay' => false, 'completeUrl', 'csrf', 'skipLabel', 'nextLabel', 'doneLabel', 'restartLabel'])

<div x-data="ndTour({{ json_encode($steps) }}, '{{ $completeUrl }}', '{{ $csrf }}', {{ $autoplay ? 'true' : 'false' }})"
     x-show="active"
     x-cloak>

    {{-- Dimmed overlay --}}
    <div class="fixed inset-0 z-[50] bg-black/50 pointer-events-all" @click.prevent></div>

    {{-- Highlight ring --}}
    <div class="nd-tour-highlight" :style="highlightStyle"></div>

    {{-- Tooltip --}}
    <div class="fixed z-[60] w-72 bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 p-5"
         :style="tooltipStyle">

        {{-- Progress bar --}}
        <div class="flex gap-1 mb-4">
            <template x-for="(_, i) in {{ count($steps) }}" :key="i">
                <div class="h-1 flex-1 rounded-full transition-colors duration-300"
                     :class="i <= step ? '' : 'bg-gray-200 dark:bg-gray-600'"
                     :style="i <= step ? 'background-color:rgb(var(--a5))' : ''"></div>
            </template>
        </div>

        {{-- Content --}}
        <p class="font-semibold text-sm text-gray-900 dark:text-white mb-1.5" x-text="currentStep.title"></p>
        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed whitespace-pre-line" x-text="currentStep.body"></p>

        {{-- Optional CTA button (e.g. register link on last guest step) --}}
        <template x-if="currentStep.cta">
            <a :href="currentStep.cta.url"
               class="mt-3 flex items-center justify-center gap-1.5 w-full px-4 py-2 rounded-lg text-sm font-semibold text-white transition hover:opacity-90"
               style="background-color:rgb(var(--a6))"
               x-text="currentStep.cta.label">
            </a>
        </template>

        {{-- Actions --}}
        <div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-100 dark:border-gray-700">
            <button @click="skip"
                    class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 underline underline-offset-2 transition">
                {{ $skipLabel }}
            </button>
            <div class="flex items-center gap-2">
                <button x-show="isLast" @click="restart"
                        class="px-3.5 py-1.5 rounded-lg text-xs font-semibold transition hover:opacity-80 border"
                        style="color:rgb(var(--a6)); border-color:rgb(var(--a6))">
                    {{ $restartLabel }}
                </button>
                <button @click="next"
                        class="px-3.5 py-1.5 rounded-lg text-xs font-semibold text-white transition hover:opacity-90"
                        style="background-color:rgb(var(--a6))"
                        x-text="isLast ? '{{ $doneLabel }}' : '{{ $nextLabel }} →'">
                </button>
            </div>
        </div>
    </div>
</div>