<div data-public-booking-wizard
     class="rp-wizard overflow-hidden rounded-[1.75rem] border border-slate-100 bg-white shadow-[0_20px_55px_rgba(15,23,42,0.10)]"
     style="--rp-primary:{{ $company->primary_color }};--rp-secondary:{{ $company->secondary_color }};">
    {{-- Mobile tap highlight fix --}}
    <style>
    .rp-wizard *{-webkit-tap-highlight-color:transparent;}
    .rp-wizard input,.rp-wizard textarea,.rp-wizard select{font-size:16px;}
    </style>

    {{-- ╔══════════════════════════════════════════════╗
         ║  STEPPER                                     ║
         ╚══════════════════════════════════════════════╝ --}}
    @if ($step <= 4)
        <div class="border-b border-slate-100 bg-white px-4 py-4 md:px-7">
            <ol class="relative flex items-start justify-between">
                {{-- connector --}}
                <div class="pointer-events-none absolute left-4 right-4 top-4 h-px bg-slate-200 -translate-y-1/2"></div>

                @foreach (['Servicio', 'Profesional', 'Fecha y hora', 'Mis datos'] as $i => $label)
                    @php $n = $i + 1; @endphp
                    <li class="relative flex flex-1 flex-col items-center gap-1.5">
                        <div class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-xs font-black transition-all duration-300
                            {{ $step >= $n ? 'text-white shadow-md' : 'bg-white text-slate-400 ring-1 ring-slate-200' }}"
                             style="{{ $step >= $n ? 'background:var(--rp-primary);' : '' }}{{ $step === $n ? 'box-shadow:0 0 0 3px white,0 0 0 5px var(--rp-primary);' : '' }}">
                            {{ $n }}
                        </div>
                        <span class="hidden text-center text-[10px] font-bold leading-tight sm:block {{ $step >= $n ? 'text-slate-700' : 'text-slate-400' }}">
                            {{ $label }}
                        </span>
                    </li>
                @endforeach
            </ol>
        </div>
    @endif

    <div class="p-4 md:p-7">

        {{-- ── Error ──────────────────────────────────── --}}
        @if ($error)
            <div class="mb-5 flex items-start gap-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3.5">
                <svg class="mt-0.5 h-5 w-5 shrink-0 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <p class="text-sm font-semibold text-rose-800">{{ $error }}</p>
            </div>
        @endif

        {{-- ╔══════════════════════════════════════════════╗
             ║  PASO 1 — Servicios                          ║
             ╚══════════════════════════════════════════════╝ --}}
        @if ($step === 1)
            <div>
                <h3 class="text-2xl font-black text-slate-950">¿Qué servicio deseas?</h3>
                <p class="mt-1 mb-6 text-sm text-slate-500">Selecciona el servicio para comenzar.</p>

                @if ($this->services->isEmpty())
                    <div class="rounded-2xl border border-dashed border-slate-200 p-10 text-center">
                        <p class="text-sm font-semibold text-slate-400">No hay servicios disponibles en este momento.</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-3 xl:grid-cols-2">
                        @foreach ($this->services as $svc)
                            @php
                                $cardPromotion = $this->featuredPromotions->first(fn ($promotion) => $promotion->appliesToService($svc->id));
                                $servicePrice = (float) $svc->effectivePrice();
                                $discountedPrice = $cardPromotion
                                    ? max(0, $servicePrice - $cardPromotion->calculateDiscount($servicePrice))
                                    : $servicePrice;
                            @endphp
                            <button type="button" wire:click="selectService({{ $svc->id }})"
                                    data-booking-action="service" data-service-id="{{ $svc->id }}"
                                    class="group text-left rounded-2xl border-2 border-slate-100 bg-white p-4 shadow-sm transition-all duration-200 active:scale-[0.97] md:p-5"
                                    onmouseover="this.style.borderColor='var(--rp-primary)';this.style.boxShadow='0 12px 32px rgba(0,0,0,0.10)'"
                                    onmouseout="this.style.borderColor='';this.style.boxShadow=''">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0 flex-1">
                                        <p class="text-base font-black leading-snug text-slate-950 md:text-lg">{{ $svc->name }}</p>
                                        @if ($svc->description)
                                            <p class="mt-1.5 line-clamp-2 text-xs leading-relaxed text-slate-500">{{ $svc->description }}</p>
                                        @endif
                                        <div class="mt-3 flex flex-wrap items-center gap-2">
                                            <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">
                                                <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                                {{ $svc->duration_minutes }} min
                                            </span>
                                            @if ($svc->category)
                                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600">{{ $svc->category->name }}</span>
                                            @endif
                                            @if ($cardPromotion)
                                                <span class="rounded-full px-2.5 py-1 text-xs font-black text-white" style="background:var(--rp-primary);">{{ $cardPromotion->discountLabel() }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="shrink-0 text-right">
                                        @if ($cardPromotion)
                                            <p class="text-xs font-semibold leading-none text-slate-400 line-through">
                                                $&nbsp;{{ number_format($servicePrice, 0, ',', '.') }}
                                            </p>
                                        @endif
                                        <p class="mt-1 text-lg font-black leading-none md:text-xl" style="color:var(--rp-primary);">
                                            $&nbsp;{{ number_format($discountedPrice, 0, ',', '.') }}
                                        </p>
                                        <div class="ml-auto mt-3 flex h-9 w-9 items-center justify-center rounded-full text-white transition-transform duration-200 group-hover:scale-110"
                                             style="background:var(--rp-primary);">
                                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

        {{-- ╔══════════════════════════════════════════════╗
             ║  PASO 2 — Profesional                        ║
             ╚══════════════════════════════════════════════╝ --}}
        @if ($step === 2)
            <div>
                @include('livewire.public._back-btn')

                <h3 class="text-2xl font-black text-slate-950">¿Con quién quieres tu cita?</h3>
                <p class="mt-1 mb-6 text-sm text-slate-500">{{ $this->selectedService?->name }}</p>

                @if ($this->employees->isEmpty())
                    <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm font-semibold text-amber-800">
                        <svg class="mt-0.5 h-5 w-5 shrink-0 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Este servicio aún no tiene profesionales asignados.
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
                        {{-- Cualquier profesional --}}
                        <button type="button" wire:click="selectEmployee(null, true)"
                                data-booking-action="employee" data-any-employee="1"
                                class="group flex items-center gap-4 rounded-2xl border-2 border-dashed border-slate-200 p-4 text-left transition-all duration-200 active:scale-[0.97] sm:flex-col sm:text-center"
                                onmouseover="this.style.borderColor='var(--rp-primary)'" onmouseout="this.style.borderColor=''">
                            <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-slate-100 transition-transform group-hover:scale-105 sm:mb-3 sm:h-16 sm:w-16">
                                <svg class="h-7 w-7 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <div>
                                <p class="text-sm font-black text-slate-950">Cualquier profesional</p>
                                <p class="mt-0.5 text-xs text-slate-400">Más disponibilidad</p>
                            </div>
                        </button>

                        @foreach ($this->employees as $emp)
                            <button type="button" wire:click="selectEmployee({{ $emp->id }})"
                                    data-booking-action="employee" data-employee-id="{{ $emp->id }}"
                                    class="group flex items-center gap-4 rounded-2xl border-2 border-slate-100 bg-white p-4 text-left shadow-sm transition-all duration-200 active:scale-[0.97] sm:flex-col sm:text-center"
                                    onmouseover="this.style.borderColor='var(--rp-primary)'" onmouseout="this.style.borderColor=''">
                                @if ($emp->photoUrl())
                                    <img src="{{ $emp->photoUrl() }}" alt="{{ $emp->fullName() }}"
                                         class="h-14 w-14 shrink-0 rounded-full object-cover shadow-md ring-2 ring-white transition-transform group-hover:scale-105 sm:mb-3 sm:h-16 sm:w-16">
                                @else
                                    <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-black text-white shadow-md ring-2 ring-white transition-transform group-hover:scale-105 sm:mb-3 sm:h-16 sm:w-16"
                                         style="background:{{ $emp->color }};">
                                        {{ strtoupper(substr($emp->first_name, 0, 1)) }}
                                    </div>
                                @endif
                                <div>
                                    <p class="text-sm font-black leading-tight text-slate-950">{{ $emp->fullName() }}</p>
                                    @if ($emp->position)
                                        <p class="mt-0.5 text-xs text-slate-400">{{ $emp->position }}</p>
                                    @endif
                                </div>
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

        {{-- ╔══════════════════════════════════════════════╗
             ║  PASO 3 — Fecha y hora                       ║
             ╚══════════════════════════════════════════════╝ --}}
        @if ($step === 3)
            <div>
                @include('livewire.public._back-btn')

                <h3 class="text-2xl font-black text-slate-950">¿Cuándo te viene bien?</h3>
                <p class="mt-1 mb-6 text-sm text-slate-500">{{ $this->selectedService?->name }} &middot; {{ $this->selectedService?->duration_minutes }} min</p>

                {{-- Date strip --}}
                <div class="mb-6">
                    <p class="mb-3 text-sm font-black capitalize" style="color:var(--rp-primary);">
                        {{ \Carbon\Carbon::parse($date)->isoFormat('dddd, D [de] MMMM [de] YYYY') }}
                    </p>
                    <div class="-mx-1 flex gap-2 overflow-x-auto px-1 pb-3" style="scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;">
                        @foreach ($this->dateOptions as $opt)
                            <button type="button"
                                    wire:click="selectDate('{{ $opt['date'] }}')"
                                    data-booking-action="date" data-date="{{ $opt['date'] }}"
                                    @disabled(!$opt['has'])
                                    style="{{ $date === $opt['date'] ? 'background:var(--rp-primary);border-color:var(--rp-primary);' : '' }}scroll-snap-align:start;"
                                    class="w-[4.5rem] shrink-0 rounded-[1.125rem] border-2 py-3 px-1 text-center transition-all duration-150
                                        {{ $date === $opt['date']
                                            ? 'text-white shadow-lg'
                                            : ($opt['has']
                                                ? 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 active:scale-95'
                                                : 'border-transparent bg-slate-50 text-slate-300 cursor-not-allowed') }}">
                                <div class="text-[10px] font-bold uppercase tracking-wide">{{ $opt['day'] }}</div>
                                <div class="my-0.5 text-[1.375rem] font-black leading-none">{{ $opt['num'] }}</div>
                                <div class="text-[10px] font-semibold">{{ $opt['month'] }}</div>
                                <div class="mx-auto mt-1.5 h-1.5 w-1.5 rounded-full
                                    {{ $opt['has'] ? ($date === $opt['date'] ? 'bg-white/60' : 'bg-emerald-400') : '' }}"></div>
                            </button>
                        @endforeach
                    </div>
                </div>

                {{-- Slots --}}
                <div>
                    <p class="mb-3 text-[11px] font-black uppercase tracking-widest text-slate-400">Horarios disponibles</p>

                    <div wire:loading wire:target="selectDate" class="py-8 text-center">
                        <div class="inline-flex items-center gap-2 text-sm text-slate-400">
                            <svg class="h-4 w-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                            Buscando horarios...
                        </div>
                    </div>

                    <div wire:loading.remove wire:target="selectDate">
                        @if ($this->availableSlots->isEmpty())
                            <div class="rounded-2xl border border-dashed border-slate-200 py-10 text-center">
                                <svg class="mx-auto mb-3 h-7 w-7 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <p class="text-sm font-semibold text-slate-400">Sin horarios para este día.</p>
                                <p class="mt-1 text-xs text-slate-400">Selecciona otra fecha.</p>
                            </div>
                        @else
                            @php
                                $grouped = $this->availableSlots->groupBy(function ($slot) {
                                    $h = (int) explode(':', $slot['start'])[0];
                                    if ($h < 12) return 'Mañana';
                                    if ($h < 18) return 'Tarde';
                                    return 'Noche';
                                });
                            @endphp
                            <div class="space-y-5">
                                @foreach ($grouped as $period => $slots)
                                    <div>
                                        <p class="mb-2.5 text-[11px] font-bold uppercase tracking-wider text-slate-400">{{ $period }}</p>
                                        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4 xl:grid-cols-5">
                                            @foreach ($slots as $slot)
                                                <button type="button"
                                                        wire:click="selectTime('{{ $slot['start'] }}', {{ $slot['employee_id'] }})"
                                                        data-booking-action="time" data-time="{{ $slot['start'] }}" data-employee-id="{{ $slot['employee_id'] }}"
                                                        class="rounded-xl border-2 border-slate-200 bg-white py-3 text-sm font-bold text-slate-700 transition-all duration-150 active:scale-95"
                                                        onmouseover="this.style.background='var(--rp-primary)';this.style.borderColor='var(--rp-primary)';this.style.color='#fff'"
                                                        onmouseout="this.style.background='';this.style.borderColor='';this.style.color=''">
                                                    {{ $slot['start'] }}
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        {{-- ╔══════════════════════════════════════════════╗
             ║  PASO 4 — Datos del cliente                  ║
             ╚══════════════════════════════════════════════╝ --}}
        @if ($step === 4)
            <div>
                @include('livewire.public._back-btn')

                {{-- Resumen de reserva --}}
                <div class="mb-6 overflow-hidden rounded-2xl p-px" style="background:linear-gradient(135deg,var(--rp-primary),var(--rp-secondary));">
                    <div class="rounded-[15px] bg-white p-4">
                        <p class="mb-3 text-[10px] font-black uppercase tracking-widest text-slate-400">Tu reserva</p>
                        <div class="grid grid-cols-3 gap-3">
                            @foreach ([
                                ['icon'=>'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z', 'label'=>'Servicio', 'value'=> $this->selectedService?->name ?? '—'],
                                ['icon'=>'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z', 'label'=>'Fecha', 'value'=> \Carbon\Carbon::parse($date)->isoFormat('ddd D MMM')],
                                ['icon'=>'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', 'label'=>'Hora', 'value'=> $time],
                            ] as $item)
                                <div class="flex flex-col gap-2">
                                    <div class="flex h-8 w-8 items-center justify-center rounded-xl text-white" style="background:var(--rp-primary);">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $item['icon'] }}"/></svg>
                                    </div>
                                    <div>
                                        <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-400">{{ $item['label'] }}</p>
                                        <p class="truncate text-sm font-black capitalize leading-tight text-slate-900">{{ $item['value'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <h3 class="text-xl font-black text-slate-950">Completa tus datos</h3>
                <p class="mt-1 mb-5 text-sm text-slate-500">Solo necesitamos tu nombre y celular para confirmar.</p>

                <form
                    wire:submit.prevent="confirm"
                    data-booking-form
                    class="space-y-4"
                    x-data="bookingCustomerMemory('{{ $company->slug }}')"
                    x-init="restore($wire)"
                    x-on:submit="rememberFromForm()"
                >
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-slate-500">Nombre *</label>
                            <input x-ref="firstName" type="text" wire:model="customer_first_name" data-booking-field="customer_first_name" required autocomplete="given-name"
                                   placeholder="Tu nombre"
                                   class="w-full rounded-xl border-slate-200 px-4 py-3 text-base font-semibold text-slate-900 placeholder-slate-300 transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/30">
                            @error('customer_first_name') <p class="mt-1 text-xs font-semibold text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-slate-500">Apellido</label>
                            <input x-ref="lastName" type="text" wire:model="customer_last_name" data-booking-field="customer_last_name" autocomplete="family-name"
                                   placeholder="Tu apellido"
                                   class="w-full rounded-xl border-slate-200 px-4 py-3 text-base font-semibold text-slate-900 placeholder-slate-300 transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/30">
                        </div>
                        <div>
                            <label class="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-slate-500">Celular *</label>
                            <div class="flex overflow-hidden rounded-xl border border-slate-200 bg-white transition focus-within:border-indigo-400 focus-within:ring-2 focus-within:ring-indigo-400/30">
                                <span class="inline-flex items-center border-r border-slate-200 bg-slate-50 px-3 text-sm font-black text-slate-700 select-none">
                                    {{ $countryCallingCode }}
                                </span>
                                <input x-ref="phone" type="tel" wire:model="customer_phone" data-booking-field="customer_phone" required
                                       placeholder="3001234567" inputmode="numeric" autocomplete="tel-national"
                                       class="min-w-0 flex-1 border-0 px-3 py-3 text-base font-semibold text-slate-900 placeholder-slate-300 focus:ring-0">
                            </div>
                            <p class="mt-1 text-xs text-slate-400">Solo los 10 dígitos de tu WhatsApp</p>
                            @error('customer_phone') <p class="mt-1 text-xs font-semibold text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-slate-500">Email *</label>
                            <input x-ref="email" type="email" wire:model="customer_email" data-booking-field="customer_email" required autocomplete="email"
                                   placeholder="correo@ejemplo.com"
                                   class="w-full rounded-xl border-slate-200 px-4 py-3 text-base font-semibold text-slate-900 placeholder-slate-300 transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/30">
                            @error('customer_email') <p class="mt-1 text-xs font-semibold text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-slate-500">
                                Notas <span class="font-normal normal-case text-slate-400">(opcional)</span>
                            </label>
                            <textarea wire:model="customer_notes" data-booking-field="customer_notes" rows="2"
                                      placeholder="Indicaciones especiales para tu cita..."
                                      class="w-full rounded-xl border-slate-200 px-4 py-3 text-base font-semibold text-slate-900 placeholder-slate-300 transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/30"></textarea>
                        </div>
                    </div>

                    {{-- ── Cupón (link → panel Alpine) ── --}}
                    <div x-data="{ open: {{ $appliedCouponId ? 'true' : 'false' }} }">
                        <button type="button" @click="open = !open"
                                class="inline-flex items-center gap-1.5 text-sm font-semibold transition"
                                style="color:var(--rp-primary);">
                            <svg class="h-4 w-4 transition-transform duration-200" :class="{'rotate-45': open}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            <span x-text="open ? 'Ocultar cupón' : 'Aplicar cupón de descuento'"></span>
                        </button>

                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-2 scale-98"
                             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                             x-transition:leave-end="opacity-0 -translate-y-2 scale-98"
                             class="mt-3 overflow-hidden rounded-2xl border border-slate-100 bg-slate-50/80 p-4">
                            <p class="mb-2.5 text-[10px] font-black uppercase tracking-widest text-slate-400">Código de descuento</p>
                            <div class="flex gap-2">
                                <input type="text" wire:model="coupon_code" data-booking-field="coupon_code" placeholder="Ej: BIENVENIDO10"
                                       autocomplete="off" autocorrect="off" spellcheck="false"
                                       class="flex-1 rounded-xl border-slate-200 px-4 py-2.5 text-base font-bold uppercase placeholder-slate-300 transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/30">
                                <button type="button" wire:click="applyCoupon"
                                        data-booking-action="apply-coupon"
                                        class="rounded-xl px-5 py-2.5 text-sm font-black text-white transition active:scale-95"
                                        style="background:var(--rp-primary);">
                                    Aplicar
                                </button>
                                @if ($appliedCouponId)
                                    <button type="button" wire:click="clearCoupon"
                                            data-booking-action="clear-coupon"
                                            class="flex h-11 w-11 items-center justify-center rounded-xl border border-slate-200 text-slate-400 transition hover:bg-slate-100">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                @endif
                            </div>
                            @if ($couponMessage)
                                <p class="mt-2.5 flex items-center gap-1.5 text-xs font-bold text-emerald-700">
                                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                                    {{ $couponMessage }}
                                </p>
                            @endif
                            @if ($couponError)
                                <p class="mt-2.5 text-xs font-bold text-rose-600">{{ $couponError }}</p>
                            @endif
                        </div>
                    </div>

                    {{-- Recordar datos --}}
                    <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-100 bg-white px-4 py-3 transition hover:bg-slate-50/70">
                        <input type="checkbox" x-model="remember"
                               class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                        <span class="text-xs leading-relaxed text-slate-600">
                            <strong class="font-bold text-slate-800">Recordar mis datos en este dispositivo.</strong>
                            La próxima reserva se completará más rápido.
                        </span>
                    </label>

                    {{-- Precio + CTA --}}
                    <div class="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50/80 p-4 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            @if ($this->pricing['promotion_discount'] > 0 || $this->pricing['coupon_discount'] > 0)
                                <div class="mb-1.5 space-y-0.5 text-xs font-semibold text-slate-400">
                                    <p>Subtotal: $&nbsp;{{ number_format($this->pricing['subtotal'], 0, ',', '.') }}</p>
                                    @if ($this->pricing['promotion_discount'] > 0)
                                        <p class="text-emerald-600">Promoción: -$&nbsp;{{ number_format($this->pricing['promotion_discount'], 0, ',', '.') }}</p>
                                    @endif
                                    @if ($this->pricing['coupon_discount'] > 0)
                                        <p class="text-emerald-600">Cupón: -$&nbsp;{{ number_format($this->pricing['coupon_discount'], 0, ',', '.') }}</p>
                                    @endif
                                </div>
                            @endif
                            <p class="text-xs font-semibold text-slate-400">Total</p>
                            <p class="text-3xl font-black leading-none text-slate-950">
                                $&nbsp;{{ number_format($this->pricing['total'], 0, ',', '.') }}
                            </p>
                        </div>
                        <button type="submit" wire:loading.attr="disabled"
                                class="inline-flex w-full items-center justify-center gap-2 rounded-xl px-7 py-4 text-sm font-black text-white shadow-lg transition active:scale-[0.98] disabled:opacity-60 sm:w-auto"
                                style="background:var(--rp-primary);">
                            <span wire:loading.remove wire:target="confirm" class="flex items-center gap-2">
                                Confirmar reserva
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                            </span>
                            <span wire:loading wire:target="confirm" class="flex items-center gap-2">
                                <svg class="h-4 w-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                Confirmando...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        @endif

        {{-- ╔══════════════════════════════════════════════╗
             ║  PASO 5 — Éxito                              ║
             ╚══════════════════════════════════════════════╝ --}}
        @if ($step === 5)
            <div class="py-6 text-center">
                <div class="relative mx-auto mb-6 h-24 w-24">
                    <div class="absolute inset-0 animate-ping rounded-full opacity-[0.12]" style="background:var(--rp-primary);"></div>
                    <div class="relative flex h-24 w-24 items-center justify-center rounded-full text-white shadow-2xl" style="background:var(--rp-primary);">
                        <svg class="h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                </div>

                <h3 class="text-2xl font-black text-slate-950">¡Reserva confirmada!</h3>
                <p class="mt-2 text-sm text-slate-500">Anota tu código para gestionar la cita.</p>

                <div class="mx-auto mt-5 inline-flex max-w-full flex-col items-center rounded-2xl border-2 border-dashed px-5 py-3" style="border-color:var(--rp-primary);">
                    <p class="text-[9px] font-black uppercase tracking-widest text-slate-400">Código de reserva</p>
                    <p class="mt-1 whitespace-nowrap font-mono text-lg font-black tracking-wide sm:text-xl" style="color:var(--rp-primary);">{{ $confirmedCode }}</p>
                </div>

                <div class="mx-auto mt-5 max-w-xs space-y-1.5 text-left">
                    @foreach ([
                        ['Servicio', $this->selectedService?->name ?? '—'],
                        ['Fecha', \Carbon\Carbon::parse($date)->isoFormat('ddd D [de] MMM')],
                        ['Hora', $time],
                        ['Total', '$&nbsp;'.number_format($this->pricing['total'], 0, ',', '.')],
                    ] as [$k, $v])
                        <div class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-4 py-2.5 text-sm">
                            <span class="font-semibold text-slate-500">{{ $k }}</span>
                            <span class="font-black capitalize text-slate-900">{!! $v !!}</span>
                        </div>
                    @endforeach
                </div>

                <p class="mt-4 text-xs text-slate-400">Recibirás una confirmación al correo que ingresaste.</p>

                <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
                    <button wire:click="startNewBooking"
                            data-booking-action="reset"
                            class="inline-flex items-center gap-2 rounded-full border-2 border-slate-200 px-6 py-3 text-sm font-black text-slate-700 transition hover:border-slate-300 hover:bg-slate-50 active:scale-95">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        Reservar otra cita
                    </button>
                    @if ($confirmedCancelUrl)
                        <a href="{{ $confirmedCancelUrl }}"
                           class="inline-flex items-center gap-2 rounded-full border-2 border-rose-100 bg-rose-50 px-6 py-3 text-sm font-black text-rose-700 transition hover:bg-rose-100 active:scale-95">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            Cancelar esta reserva
                        </a>
                    @endif
                </div>
            </div>
        @endif

    </div>
</div>

<script>
window.bookingCustomerMemory = window.bookingCustomerMemory || function (companySlug) {
    const key = `asignapro.customer.${companySlug}`;
    return {
        remember: true,
        restore($wire) {
            const raw = localStorage.getItem(key);
            if (!raw) return;
            try {
                const d = JSON.parse(raw);
                const map = { customer_first_name: d.first_name, customer_last_name: d.last_name, customer_phone: d.phone, customer_email: d.email };
                Object.entries(map).forEach(([f, v]) => { if (v) $wire.set(f, v, false); });
            } catch { localStorage.removeItem(key); }
        },
        rememberFromForm() {
            if (!this.remember) { localStorage.removeItem(key); return; }
            localStorage.setItem(key, JSON.stringify({
                first_name: this.$refs.firstName?.value || '',
                last_name:  this.$refs.lastName?.value  || '',
                phone:      this.$refs.phone?.value     || '',
                email:      this.$refs.email?.value     || '',
                saved_at:   new Date().toISOString(),
            }));
        },
    };
};
</script>
