
<div class="vintage-vignette py-8 px-4 sm:px-6 lg:px-8 min-h-[90vh] flex items-center justify-center"
     x-data="bookingApp({
         slug: 'arao-beards',
         categories: [{&quot;id&quot;:&quot;f7d8b11d-81a8-406a-b35b-3af3664007f0&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Cabelo&quot;,&quot;display_order&quot;:1,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;services&quot;:[{&quot;id&quot;:&quot;76447907-1982-48ae-98d2-59f16d7e8a70&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;category_id&quot;:&quot;f7d8b11d-81a8-406a-b35b-3af3664007f0&quot;,&quot;name&quot;:&quot;Acabamento &amp; Pezinho Tradicional&quot;,&quot;description&quot;:&quot;Alinhamento dos contornos com navalhete descart\u00e1vel e hidrata\u00e7\u00e3o das t\u00eamporas.&quot;,&quot;price&quot;:&quot;25.00&quot;,&quot;duration_minutes&quot;:20,&quot;commission_override&quot;:null,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;},{&quot;id&quot;:&quot;1377ff8f-ae0f-47fc-8586-277bb73df497&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;category_id&quot;:&quot;f7d8b11d-81a8-406a-b35b-3af3664007f0&quot;,&quot;name&quot;:&quot;Corte Masculino Vintage&quot;,&quot;description&quot;:&quot;Corte com tesoura e m\u00e1quina, lavagem refrescante e finaliza\u00e7\u00e3o com pomada artesanal.&quot;,&quot;price&quot;:&quot;55.00&quot;,&quot;duration_minutes&quot;:40,&quot;commission_override&quot;:null,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;}]},{&quot;id&quot;:&quot;e37797f6-4bcb-417e-964a-b7c1eae4e8b7&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Barba Cl\u00e1ssica&quot;,&quot;display_order&quot;:2,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;services&quot;:[{&quot;id&quot;:&quot;ca316829-b3d8-4b0f-8915-ca58b9bb02a0&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;category_id&quot;:&quot;e37797f6-4bcb-417e-964a-b7c1eae4e8b7&quot;,&quot;name&quot;:&quot;Barboterapia na Toalha Quente&quot;,&quot;description&quot;:&quot;Ritual com toalha quente vaporizada em ess\u00eancia de eucalipto, navalhete de precis\u00e3o e b\u00e1lsamo hidratante.&quot;,&quot;price&quot;:&quot;45.00&quot;,&quot;duration_minutes&quot;:35,&quot;commission_override&quot;:null,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;}]},{&quot;id&quot;:&quot;2880b2fc-3cd4-4616-9922-024287cbde1a&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Combos Exclusivos&quot;,&quot;display_order&quot;:3,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;services&quot;:[{&quot;id&quot;:&quot;f02481b9-cf05-4ddb-a6c9-5ed3d8307efd&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;category_id&quot;:&quot;2880b2fc-3cd4-4616-9922-024287cbde1a&quot;,&quot;name&quot;:&quot;Combo Ar\u00e3o Beards Supremo&quot;,&quot;description&quot;:&quot;Corte Completo + Barboterapia na Toalha Quente + Esfolia\u00e7\u00e3o Facial e Caf\u00e9 Espresso Especial de cortesia.&quot;,&quot;price&quot;:&quot;90.00&quot;,&quot;duration_minutes&quot;:65,&quot;commission_override&quot;:null,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;}]}],
         barbers: [{&quot;id&quot;:&quot;f64ec36a-1b3b-4a4c-809f-4dfeb6ccf5d6&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Luca Brasi&quot;,&quot;email&quot;:&quot;luca@araobeards.com.br&quot;,&quot;role&quot;:&quot;barber&quot;,&quot;is_superadmin&quot;:false,&quot;phone&quot;:&quot;(11) 98765-1003&quot;,&quot;avatar_url&quot;:null,&quot;commission_rate_services&quot;:&quot;50.00&quot;,&quot;commission_rate_products&quot;:&quot;20.00&quot;,&quot;deduct_card_fees&quot;:false,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;},{&quot;id&quot;:&quot;38cac549-b667-4072-8b60-05e50c618959&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Marcos Barbeiro Teste&quot;,&quot;email&quot;:&quot;marcos.barbeiro.teste@gmail.com&quot;,&quot;role&quot;:&quot;barber&quot;,&quot;is_superadmin&quot;:false,&quot;phone&quot;:&quot;(11) 97777-6666&quot;,&quot;avatar_url&quot;:null,&quot;commission_rate_services&quot;:&quot;50.00&quot;,&quot;commission_rate_products&quot;:&quot;20.00&quot;,&quot;deduct_card_fees&quot;:false,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T16:12:16.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T16:12:16.000000Z&quot;},{&quot;id&quot;:&quot;8f62c8d2-f610-4def-879d-d87208888cf8&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Matteo Ricci&quot;,&quot;email&quot;:&quot;matteo@araobeards.com.br&quot;,&quot;role&quot;:&quot;barber&quot;,&quot;is_superadmin&quot;:false,&quot;phone&quot;:&quot;(11) 98765-1004&quot;,&quot;avatar_url&quot;:null,&quot;commission_rate_services&quot;:&quot;50.00&quot;,&quot;commission_rate_products&quot;:&quot;20.00&quot;,&quot;deduct_card_fees&quot;:false,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T01:29:40.000000Z&quot;},{&quot;id&quot;:&quot;38e3e620-0d30-4eb7-9f1e-243e31919daf&quot;,&quot;tenant_id&quot;:&quot;a6f9b463-bee7-44d4-9187-43b03a1435d0&quot;,&quot;name&quot;:&quot;Barbeiro Teste Auto&quot;,&quot;email&quot;:&quot;teste_rh_auto@araobeards.com&quot;,&quot;role&quot;:&quot;barber&quot;,&quot;is_superadmin&quot;:false,&quot;phone&quot;:&quot;11988776655&quot;,&quot;avatar_url&quot;:null,&quot;commission_rate_services&quot;:&quot;50.00&quot;,&quot;commission_rate_products&quot;:&quot;20.00&quot;,&quot;deduct_card_fees&quot;:false,&quot;active&quot;:true,&quot;sync_status&quot;:&quot;synced&quot;,&quot;client_updated_at&quot;:null,&quot;last_synced_at&quot;:null,&quot;offline_created_at&quot;:null,&quot;created_at&quot;:&quot;2026-09-08T17:14:26.000000Z&quot;,&quot;updated_at&quot;:&quot;2026-09-08T17:14:26.000000Z&quot;}],
         initialDate: '2026-09-09'
     })">

    <div class="w-full max-w-4xl bg-vintage-surface/90 border border-vintage-border rounded-2xl shadow-2xl backdrop-blur-md overflow-hidden">
        
        <!-- Header / Tenant Banner -->
        <div class="relative bg-gradient-to-r from-stone-900 via-stone-950 to-stone-900 border-b border-vintage-border p-6 sm:p-8 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-vintage-card border-2 border-vintage-gold/80 text-vintage-gold text-2xl shadow-xl shadow-amber-950/40 mb-3 animate-pulse">
                <i class="fa-solid fa-scissors"></i>
            </div>
            
            <h1 class="font-vintage text-2xl sm:text-4xl font-bold tracking-wide text-gold-gradient mb-1">
                Barbearia Arão Beards
            </h1>
            
            <p class="text-xs sm:text-sm text-vintage-muted max-w-md mx-auto flex items-center justify-center gap-2">
                <i class="fa-solid fa-location-dot text-vintage-gold"></i>
                <span>Rua Januário da Cunha Barbosa, 1980 - Campo Limpo - São Paulo - SP</span>
                <span>•</span>
                <i class="fa-brands fa-whatsapp text-emerald-400"></i>
                <span>(11) 9 2138-1308</span>
            </p>

            <!-- Stepper Indicators -->
            <div class="flex items-center justify-center gap-2 sm:gap-4 mt-6">
                <template x-for="(stepItem, idx) in steps" :key="idx">
                    <div class="flex items-center gap-2">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300"
                             :class="step > idx + 1 ? 'bg-vintage-gold text-stone-950' : (step === idx + 1 ? 'border-2 border-vintage-gold text-vintage-gold bg-vintage-bg' : 'border border-vintage-border text-vintage-muted bg-stone-900/50')">
                            <template x-if="step > idx + 1">
                                <i class="fa-solid fa-check text-[10px]"></i>
                            </template>
                            <template x-if="step <= idx + 1">
                                <span x-text="idx + 1"></span>
                            </template>
                        </div>
                        <span class="hidden sm:inline text-xs font-medium"
                              :class="step === idx + 1 ? 'text-vintage-cream' : 'text-vintage-muted'"
                              x-text="stepItem.title"></span>
                        <template x-if="idx < steps.length - 1">
                            <span class="w-6 sm:w-10 h-[1px] bg-vintage-border"></span>
                        </template>
                    </div>
                </template>
            </div>
        </div>

        <!-- Body / Step Content -->
        <div class="p-4 sm:p-8">
            
            <!-- STEP 1: SERVICE SELECTION (MULTI-SERVICE ENABLED) -->
            <div x-show="step === 1" x-transition:enter="transition ease-out duration-200">
                <div class="mb-5 flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-vintage-border/50 pb-3">
                    <div>
                        <h2 class="font-vintage text-xl font-bold text-vintage-cream">1. Escolha seus Serviços</h2>
                        <p class="text-xs text-vintage-muted">Selecione um ou mais serviços (corte, barba, tratamentos ou combos)</p>
                    </div>
                    <div class="text-xs text-vintage-muted flex items-center gap-1.5">
                        <span class="text-vintage-gold font-semibold">*</span>
                        <span>Seleção múltipla permitida</span>
                    </div>
                </div>

                <div class="space-y-6">
                    <template x-for="category in categories" :key="category.id">
                        <div>
                            <h3 class="text-xs font-bold uppercase tracking-wider text-vintage-gold mb-3 flex items-center gap-2">
                                <i class="fa-solid fa-tag text-[10px]"></i>
                                <span x-text="category.name"></span>
                            </h3>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <template x-for="service in category.services" :key="service.id">
                                    <div class="p-3.5 rounded-xl border transition-all cursor-pointer flex justify-between items-center group relative overflow-hidden select-none"
                                         :class="isServiceSelected(service) 
                                            ? 'bg-vintage-card border-vintage-gold shadow-lg shadow-amber-950/30 ring-1 ring-vintage-gold/50' 
                                            : 'bg-vintage-bg/60 border-vintage-border hover:border-vintage-gold/50 hover:bg-vintage-card/50'"
                                         @click="toggleService(service)">
                                        
                                        <div class="space-y-1 pr-3">
                                            <div class="flex items-center gap-2">
                                                <div class="w-4 h-4 rounded border flex items-center justify-center transition"
                                                     :class="isServiceSelected(service) ? 'bg-vintage-gold border-vintage-gold text-stone-950' : 'border-vintage-border bg-stone-900/60'">
                                                    <i class="fa-solid fa-check text-[9px]" x-show="isServiceSelected(service)"></i>
                                                </div>
                                                <span class="font-semibold text-sm text-vintage-cream group-hover:text-vintage-gold transition" x-text="service.name"></span>
                                            </div>
                                            <div class="text-xs text-vintage-muted line-clamp-2 pl-6" x-text="service.description || 'Cuidado de alto padrão'"></div>
                                            <div class="text-[11px] text-vintage-muted flex items-center gap-2 pt-1 pl-6">
                                                <i class="fa-regular fa-clock text-[10px] text-vintage-gold"></i>
                                                <span x-text="service.duration_minutes + ' min'"></span>
                                            </div>
                                        </div>

                                        <div class="text-right flex-shrink-0">
                                            <div class="font-vintage font-bold text-base text-gold-gradient" x-text="formatMoney(service.price)"></div>
                                            <button type="button" 
                                                    class="mt-1 text-[11px] px-2.5 py-1 rounded-lg transition font-medium flex items-center gap-1 ml-auto"
                                                    :class="isServiceSelected(service) ? 'bg-vintage-gold text-stone-950 font-bold' : 'border border-vintage-border text-vintage-muted group-hover:border-vintage-gold group-hover:text-vintage-cream'">
                                                <template x-if="isServiceSelected(service)">
                                                    <span class="flex items-center gap-1"><i class="fa-solid fa-check text-[10px]"></i> Selecionado</span>
                                                </template>
                                                <template x-if="!isServiceSelected(service)">
                                                    <span class="flex items-center gap-1"><i class="fa-solid fa-plus text-[10px]"></i> Adicionar</span>
                                                </template>
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- Multi-Service Live Summary Bar -->
                <div x-show="selectedServices.length > 0" x-transition
                     class="mt-8 p-4 sm:p-5 rounded-2xl bg-gradient-to-r from-stone-950 via-vintage-card to-stone-950 border border-vintage-gold/50 shadow-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="space-y-2">
                        <div class="flex items-center gap-2 text-xs font-bold text-vintage-gold uppercase tracking-wider">
                            <i class="fa-solid fa-cart-shopping"></i>
                            <span x-text="selectedServices.length + (selectedServices.length === 1 ? ' serviço selecionado' : ' serviços selecionados')"></span>
                        </div>
                        
                        <div class="flex flex-wrap gap-1.5">
                            <template x-for="svc in selectedServices" :key="svc.id">
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-vintage-bg/90 border border-vintage-border text-[11px] text-vintage-cream font-medium">
                                    <span x-text="svc.name"></span>
                                    <span class="text-vintage-gold text-[10px]" x-text="formatMoney(svc.price)"></span>
                                    <button type="button" @click.stop="toggleService(svc)" title="Remover" class="text-vintage-muted hover:text-red-400 font-bold ml-1 cursor-pointer">&times;</button>
                                </span>
                            </template>
                        </div>
                    </div>

                    <div class="flex items-center gap-4 sm:gap-6 self-stretch sm:self-auto justify-between sm:justify-end border-t sm:border-t-0 pt-3 sm:pt-0 border-vintage-border/50 flex-shrink-0">
                        <div class="text-left sm:text-right">
                            <div class="text-[11px] text-vintage-muted flex items-center sm:justify-end gap-1">
                                <i class="fa-regular fa-clock text-[10px] text-vintage-gold"></i>
                                <span x-text="'Duração Total: ~' + totalDuration() + ' min'"></span>
                            </div>
                            <div class="text-xl sm:text-2xl font-vintage font-bold text-gold-gradient" x-text="formatMoney(totalPrice())"></div>
                        </div>

                        <button type="button" 
                                @click="goToStep(2)"
                                class="px-6 py-3.5 rounded-xl font-extrabold text-xs uppercase tracking-wider bg-gradient-to-r from-amber-600 via-vintage-gold to-amber-500 text-stone-950 hover:brightness-110 shadow-lg shadow-amber-950/40 flex items-center gap-2 cursor-pointer transition">
                            <span>Avançar para Barbeiro</span>
                            <i class="fa-solid fa-arrow-right text-xs"></i>
                        </button>
                    </div>
                </div>

                <div x-show="selectedServices.length === 0" class="mt-8 flex justify-end">
                    <button type="button" disabled class="px-6 py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-stone-900 border border-vintage-border text-vintage-muted cursor-not-allowed flex items-center gap-2">
                        <span>Selecione ao menos 1 serviço</span>
                    </button>
                </div>
            </div>

            <!-- STEP 2: BARBER SELECTION -->
            <div x-show="step === 2" x-transition:enter="transition ease-out duration-200" style="display: none;">
                <div class="mb-5 flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-vintage-border/50 pb-3">
                    <div>
                        <h2 class="font-vintage text-xl font-bold text-vintage-cream">2. Escolha o Profissional</h2>
                        <p class="text-xs text-vintage-muted">Com quem você deseja cortar ou cuidar da barba?</p>
                    </div>
                    <button type="button" @click="goToStep(1)" class="text-xs text-vintage-muted hover:text-vintage-gold flex items-center gap-1.5 self-start sm:self-auto cursor-pointer">
                        <i class="fa-solid fa-arrow-left text-[10px]"></i>
                        <span>Alterar serviços selecionados (<span x-text="selectedServices.length"></span>)</span>
                    </button>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3.5">
                    <!-- Option: Qualquer Barbeiro Disponível -->
                    <div class="p-4 rounded-xl border transition-all cursor-pointer flex flex-col justify-between"
                         :class="selectedBarber === 'any' ? 'bg-vintage-card border-vintage-gold shadow-lg shadow-amber-950/30' : 'bg-vintage-bg/60 border-vintage-border hover:border-vintage-gold/50'"
                         @click="selectedBarber = 'any'">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-12 h-12 rounded-full bg-vintage-surface border border-vintage-border flex items-center justify-center text-vintage-gold text-lg">
                                <i class="fa-solid fa-dice"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-sm text-vintage-cream">Qualquer Barbeiro</h4>
                                <span class="text-[11px] text-emerald-400">Primeiro horário disponível</span>
                            </div>
                        </div>
                        <p class="text-xs text-vintage-muted mt-2">Maior agilidade de horários para o seu dia.</p>
                    </div>

                    <!-- List of Barbers -->
                    <template x-for="barber in barbers" :key="barber.id">
                        <div class="p-4 rounded-xl border transition-all cursor-pointer flex flex-col justify-between"
                             :class="selectedBarber?.id === barber.id ? 'bg-vintage-card border-vintage-gold shadow-lg shadow-amber-950/30' : 'bg-vintage-bg/60 border-vintage-border hover:border-vintage-gold/50'"
                             @click="selectedBarber = barber">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-12 h-12 rounded-full bg-stone-900 border border-vintage-gold/60 flex items-center justify-center text-vintage-gold font-vintage font-bold text-lg">
                                    <span x-text="barber.name.substring(0, 2).toUpperCase()"></span>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-sm text-vintage-cream" x-text="barber.name"></h4>
                                    <span class="text-[11px] text-vintage-muted">Barbeiro Especialista</span>
                                </div>
                            </div>
                            <p class="text-xs text-vintage-muted mt-2">Atendimento artesanal e personalizado.</p>
                        </div>
                    </template>
                </div>

                <div class="mt-8 flex justify-between">
                    <button type="button" @click="goToStep(1)" class="px-5 py-2.5 rounded-xl border border-vintage-border text-vintage-muted hover:text-vintage-cream text-xs font-semibold cursor-pointer">
                        &larr; Voltar aos Serviços
                    </button>
                    <button type="button" 
                            @click="goToStep(3)"
                            class="px-6 py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-gradient-to-r from-amber-600 via-vintage-gold to-amber-500 text-stone-950 hover:brightness-110 shadow-lg shadow-amber-950/40 flex items-center gap-2 cursor-pointer">
                        <span>Avançar para Data & Horário</span>
                        <i class="fa-solid fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>

            <!-- STEP 3: DATE & TIME SELECTION -->
            <div x-show="step === 3" x-transition:enter="transition ease-out duration-200" style="display: none;">
                <div class="mb-5 flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-vintage-border/50 pb-3">
                    <div>
                        <h2 class="font-vintage text-xl font-bold text-vintage-cream">3. Escolha Data e Horário</h2>
                        <p class="text-xs text-vintage-muted">
                            Consulte a disponibilidade em tempo real para <strong class="text-vintage-gold" x-text="totalDuration() + ' minutos'"></strong> de atendimento
                        </p>
                    </div>
                    <button type="button" @click="goToStep(2)" class="text-xs text-vintage-muted hover:text-vintage-gold flex items-center gap-1.5 self-start sm:self-auto cursor-pointer">
                        <i class="fa-solid fa-arrow-left text-[10px]"></i>
                        <span>Alterar profissional</span>
                    </button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Date Picker Column -->
                    <div>
                        <label class="block text-xs font-semibold uppercase text-vintage-gold mb-2">Selecione o Dia</label>
                        <input type="date" 
                               x-model="selectedDate" 
                               @change="fetchSlots()"
                               :min="minDate"
                               class="w-full bg-vintage-bg border border-vintage-border rounded-xl px-4 py-3 text-sm text-vintage-cream focus:border-vintage-gold focus:ring-1 focus:ring-vintage-gold outline-none">
                        
                        <div class="mt-4 p-3 bg-vintage-card/60 border border-vintage-border rounded-xl text-xs space-y-1.5 text-vintage-muted">
                            <div class="text-vintage-cream font-semibold flex items-center gap-1.5">
                                <i class="fa-solid fa-clock text-vintage-gold"></i>
                                <span>Horário de Funcionamento</span>
                            </div>
                            <div>Segunda a Sábado: 09:00 às 20:00</div>
                            <div class="text-[11px] text-vintage-muted/80">Intervalo do almoço respeitado</div>
                        </div>
                    </div>

                    <!-- Available Slots Grid Column -->
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold uppercase text-vintage-gold mb-2 flex items-center justify-between">
                            <span>Horários Disponíveis</span>
                            <span class="text-[11px] text-vintage-muted" x-show="slots.length > 0" x-text="slots.length + ' horários livres'"></span>
                        </label>

                        <!-- Loading State -->
                        <div x-show="loadingSlots" class="py-12 text-center text-vintage-muted text-xs flex flex-col items-center gap-2">
                            <i class="fa-solid fa-circle-notch animate-spin text-vintage-gold text-2xl"></i>
                            <span>Buscando agenda atualizada...</span>
                        </div>

                        <!-- Slots Grid -->
                        <div x-show="!loadingSlots && slots.length > 0" class="grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-[300px] overflow-y-auto pr-1">
                            <template x-for="slot in slots" :key="slot.time">
                                <button type="button"
                                        @click="selectedTime = slot.time"
                                        class="py-2.5 px-2 rounded-xl text-xs font-bold transition border flex items-center justify-center gap-1.5 cursor-pointer"
                                        :class="selectedTime === slot.time 
                                            ? 'bg-vintage-gold border-vintage-gold text-stone-950 shadow-md shadow-amber-950/30' 
                                            : 'bg-vintage-bg/80 border-vintage-border text-vintage-cream hover:border-vintage-gold/60 hover:bg-vintage-card'">
                                    <i class="fa-regular fa-clock text-[10px]" :class="selectedTime === slot.time ? 'text-stone-950' : 'text-vintage-gold'"></i>
                                    <span x-text="slot.formatted"></span>
                                </button>
                            </template>
                        </div>

                        <!-- Empty Slots Message -->
                        <div x-show="!loadingSlots && slots.length === 0" class="py-10 text-center border border-dashed border-vintage-border rounded-xl p-6 text-xs text-vintage-muted">
                            <i class="fa-regular fa-calendar-xmark text-2xl text-vintage-gold/60 mb-2"></i>
                            <p class="font-semibold text-vintage-cream">Nenhum horário disponível para este dia</p>
                            <p class="text-[11px] mt-1">Experimente selecionar outro profissional ou outra data.</p>
                        </div>
                    </div>
                </div>

                <div class="mt-8 flex justify-between">
                    <button type="button" @click="goToStep(2)" class="px-5 py-2.5 rounded-xl border border-vintage-border text-vintage-muted hover:text-vintage-cream text-xs font-semibold cursor-pointer">
                        &larr; Voltar
                    </button>
                    <button type="button" 
                            :disabled="!selectedTime"
                            @click="goToStep(4)"
                            class="px-6 py-3 rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-200 flex items-center gap-2 shadow-lg"
                            :class="selectedTime 
                                ? 'bg-gradient-to-r from-amber-600 via-vintage-gold to-amber-500 text-stone-950 hover:brightness-110 shadow-amber-950/40 cursor-pointer' 
                                : 'bg-stone-900 border border-vintage-border text-vintage-muted cursor-not-allowed'">
                        <span>Avançar para Seus Dados</span>
                        <i class="fa-solid fa-arrow-right text-xs"></i>
                    </button>
                </div>
            </div>

            <!-- STEP 4: CUSTOMER DATA & MULTI-SERVICE BREAKDOWN -->
            <div x-show="step === 4" x-transition:enter="transition ease-out duration-200" style="display: none;">
                <div class="mb-5 flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-vintage-border/50 pb-3">
                    <div>
                        <h2 class="font-vintage text-xl font-bold text-vintage-cream">4. Seus Dados de Contato</h2>
                        <p class="text-xs text-vintage-muted">Para confirmarmos seu horário e enviar o lembrete via WhatsApp</p>
                    </div>
                    <button type="button" @click="goToStep(3)" class="text-xs text-vintage-muted hover:text-vintage-gold flex items-center gap-1.5 self-start sm:self-auto cursor-pointer">
                        <i class="fa-solid fa-arrow-left text-[10px]"></i>
                        <span>Alterar data e hora</span>
                    </button>
                </div>

                <!-- Booking Summary Banner with Itemized Services -->
                <div class="bg-vintage-card border border-vintage-gold/40 rounded-xl p-4 sm:p-5 mb-6 text-xs shadow-lg">
                    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-vintage-border/50 pb-3 mb-3">
                        <div class="text-vintage-muted text-[11px] font-bold uppercase tracking-wider">Resumo do Agendamento:</div>
                        <div class="text-vintage-gold font-semibold flex items-center gap-1.5">
                            <i class="fa-regular fa-calendar text-[11px]"></i>
                            <span x-text="formatDateDisplay(selectedDate) + ' às ' + selectedTime"></span>
                            <span>•</span>
                            <span x-text="selectedBarber === 'any' ? 'Qualquer Barbeiro' : selectedBarber?.name"></span>
                        </div>
                    </div>

                    <div class="space-y-2 mb-3">
                        <template x-for="svc in selectedServices" :key="svc.id">
                            <div class="flex justify-between items-center text-vintage-cream">
                                <div class="flex items-center gap-2">
                                    <i class="fa-solid fa-scissors text-vintage-gold text-[10px]"></i>
                                    <span x-text="svc.name" class="font-semibold text-sm"></span>
                                    <span class="text-[10px] text-vintage-muted" x-text="'(' + svc.duration_minutes + ' min)'"></span>
                                </div>
                                <span class="font-mono font-bold text-vintage-cream" x-text="formatMoney(svc.price)"></span>
                            </div>
                        </template>
                    </div>

                    <div class="border-t border-vintage-border/50 pt-3 flex justify-between items-center">
                        <div class="text-[11px] text-vintage-muted">
                            Duração Estimada: <strong class="text-vintage-cream" x-text="totalDuration() + ' minutos'"></strong>
                        </div>
                        <div class="text-right">
                            <div class="text-[10px] text-vintage-muted uppercase font-semibold">Valor Total:</div>
                            <div class="font-vintage font-bold text-xl text-gold-gradient" x-text="formatMoney(totalPrice())"></div>
                        </div>
                    </div>
                </div>

                <form @submit.prevent="submitBooking()" class="space-y-4">
                    <div>
                        <label class="block text-xs font-medium text-vintage-cream mb-1">
                            Nome Completo <span class="text-red-400">*</span>
                        </label>
                        <div class="relative">
                            <i class="fa-solid fa-user absolute left-3.5 top-1/2 -translate-y-1/2 text-xs text-vintage-muted"></i>
                            <input type="text" x-model="customerName" required placeholder="Ex: Rodrigo Silveira"
                                   class="w-full bg-vintage-bg border border-vintage-border rounded-xl pl-9 pr-3.5 py-3 text-sm text-vintage-cream placeholder-vintage-muted/50 focus:border-vintage-gold focus:ring-1 focus:ring-vintage-gold outline-none transition">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-vintage-cream mb-1">
                            WhatsApp <span class="text-red-400">*</span>
                            <span class="text-[11px] text-vintage-muted font-normal">(Receba a confirmação e o Pix por mensagem)</span>
                        </label>
                        <div class="relative">
                            <i class="fa-brands fa-whatsapp absolute left-3.5 top-1/2 -translate-y-1/2 text-xs text-emerald-400"></i>
                            <input type="tel" x-model="customerPhone" @input="formatPhone" required placeholder="(11) 99999-9999"
                                   class="w-full bg-vintage-bg border border-vintage-border rounded-xl pl-9 pr-3.5 py-3 text-sm text-vintage-cream placeholder-vintage-muted/50 focus:border-vintage-gold focus:ring-1 focus:ring-vintage-gold outline-none transition">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-vintage-cream mb-1">
                            E-mail <span class="text-vintage-muted text-[11px] font-normal">(Opcional)</span>
                        </label>
                        <div class="relative">
                            <i class="fa-regular fa-envelope absolute left-3.5 top-1/2 -translate-y-1/2 text-xs text-vintage-muted"></i>
                            <input type="email" x-model="customerEmail" placeholder="seuemail@exemplo.com"
                                   class="w-full bg-vintage-bg border border-vintage-border rounded-xl pl-9 pr-3.5 py-3 text-sm text-vintage-cream placeholder-vintage-muted/50 focus:border-vintage-gold focus:ring-1 focus:ring-vintage-gold outline-none transition">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-vintage-cream mb-1">
                            Observações ou Preferências <span class="text-vintage-muted text-[11px] font-normal">(Opcional)</span>
                        </label>
                        <textarea x-model="notes" rows="2" placeholder="Alguma preferência de corte, estilo ou restrição?"
                                  class="w-full bg-vintage-bg border border-vintage-border rounded-xl p-3 text-sm text-vintage-cream placeholder-vintage-muted/50 focus:border-vintage-gold focus:ring-1 focus:ring-vintage-gold outline-none transition resize-none"></textarea>
                    </div>

                    <div class="pt-4 flex items-center justify-between border-t border-vintage-border/50">
                        <button type="button" @click="goToStep(3)" class="px-5 py-2.5 rounded-xl border border-vintage-border text-vintage-muted hover:text-vintage-cream text-xs font-semibold cursor-pointer">
                            &larr; Voltar
                        </button>
                        <button type="submit" 
                                :disabled="isSubmitting"
                                class="px-7 py-3.5 rounded-xl font-bold text-sm bg-gradient-to-r from-amber-600 via-vintage-gold to-amber-500 text-stone-950 hover:brightness-110 shadow-xl shadow-amber-900/40 flex items-center gap-2 cursor-pointer transition">
                            <template x-if="!isSubmitting">
                                <span class="flex items-center gap-2">
                                    <i class="fa-solid fa-check"></i>
                                    <span>Confirmar Agendamento</span>
                                </span>
                            </template>
                            <template x-if="isSubmitting">
                                <span class="flex items-center gap-2">
                                    <i class="fa-solid fa-spinner animate-spin"></i>
                                    <span>Gerando Pix & Confirmando...</span>
                                </span>
                            </template>
                        </button>
                    </div>
                </form>
            </div>

            <!-- STEP 5: SUCCESS MODAL WITH MERCADO PAGO PIX QR CODE -->
            <div x-show="step === 5" x-transition:enter="transition ease-out duration-300 transform opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" style="display: none;">
                <div class="text-center py-4">
                    <div class="w-16 h-16 rounded-full bg-emerald-950/80 border-2 border-emerald-500 flex items-center justify-center text-emerald-400 text-2xl mx-auto mb-4 shadow-xl shadow-emerald-950/40 animate-bounce">
                        <i class="fa-solid fa-check"></i>
                    </div>

                    <h2 class="font-vintage text-2xl sm:text-3xl font-bold text-vintage-cream mb-1">
                        Agendamento Confirmado!
                    </h2>
                    <p class="text-xs text-vintage-muted max-w-md mx-auto">
                        Seu horário foi reservado com sucesso na <strong class="text-vintage-cream">Barbearia Arão Beards</strong>.
                    </p>

                    <!-- Summary Card -->
                    <div class="max-w-md mx-auto bg-vintage-card/80 border border-vintage-border rounded-xl p-4 my-4 text-left text-xs space-y-2">
                        <div class="flex justify-between border-b border-vintage-border/50 pb-1.5">
                            <span class="text-vintage-muted">Serviço(s):</span>
                            <span class="font-bold text-vintage-cream text-right ml-2" x-text="bookingDetails?.service"></span>
                        </div>
                        <div class="flex justify-between border-b border-vintage-border/50 pb-1.5">
                            <span class="text-vintage-muted">Barbeiro:</span>
                            <span class="font-semibold text-vintage-cream" x-text="bookingDetails?.barber"></span>
                        </div>
                        <div class="flex justify-between border-b border-vintage-border/50 pb-1.5">
                            <span class="text-vintage-muted">Data & Hora:</span>
                            <span class="font-bold text-vintage-gold" x-text="bookingDetails?.date + ' às ' + bookingDetails?.time"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-vintage-muted">Valor Total:</span>
                            <span class="font-bold text-gold-gradient font-vintage text-sm" x-text="bookingDetails?.price"></span>
                        </div>
                    </div>

                    <!-- DYNAMIC PIX PAYMENT BOX -->
                    <template x-if="pix && pix.qr_code">
                        <div class="max-w-md mx-auto bg-stone-900/90 border-2 border-vintage-gold/60 rounded-2xl p-5 my-5 text-center shadow-2xl shadow-amber-950/40 relative">
                            <div class="flex items-center justify-between border-b border-vintage-border pb-3 mb-4">
                                <div class="flex items-center gap-2">
                                    <i class="fa-brands fa-pix text-emerald-400 text-lg"></i>
                                    <span class="font-bold text-xs text-vintage-cream uppercase tracking-wider">Pagamento Instantâneo Pix</span>
                                </div>
                                <span class="text-xs font-bold text-amber-400 px-2.5 py-0.5 rounded-full bg-amber-950/60 border border-amber-500/30" x-text="pix.amount"></span>
                            </div>

                            <!-- QR Code Base64 Display -->
                            <div class="inline-block p-3 bg-white rounded-xl shadow-lg my-1">
                                <template x-if="pix.qr_code_base64">
                                    <img :src="'data:image/png;base64,' + pix.qr_code_base64" alt="QR Code Pix" class="w-44 h-44 mx-auto" />
                                </template>
                            </div>

                            <p class="text-[11px] text-vintage-muted my-2">
                                Aponte a câmera do app do seu banco ou use a chave <strong>Pix Copia e Cola</strong>:
                            </p>

                            <!-- Copy & Paste input and button -->
                            <div class="mt-2 flex gap-2">
                                <input type="text" readonly :value="pix.qr_code" class="w-full bg-vintage-bg border border-vintage-border rounded-lg px-3 py-2 text-xs font-mono text-vintage-muted truncate select-all" />
                                <button type="button" @click="copyPixCode()" class="px-3.5 py-2 bg-gradient-to-r from-amber-600 via-vintage-gold to-amber-500 text-stone-950 font-bold text-xs rounded-lg hover:brightness-110 flex items-center gap-1.5 flex-shrink-0 shadow transition cursor-pointer">
                                    <i :class="copiedPix ? 'fa-solid fa-check text-emerald-950' : 'fa-regular fa-copy'"></i>
                                    <span x-text="copiedPix ? 'Copiado!' : 'Copiar Pix'"></span>
                                </button>
                            </div>

                            <!-- Payment confirmation real-time indicator -->
                            <div class="mt-4 pt-3 border-t border-vintage-border/60 flex items-center justify-center gap-2 text-xs">
                                <template x-if="!paymentConfirmed">
                                    <div class="flex items-center gap-2 text-amber-300">
                                        <i class="fa-solid fa-circle-notch animate-spin text-vintage-gold"></i>
                                        <span>Aguardando compensação do banco em tempo real...</span>
                                    </div>
                                </template>
                                <template x-if="paymentConfirmed">
                                    <div class="flex items-center gap-2 text-emerald-400 font-bold animate-pulse">
                                        <i class="fa-solid fa-circle-check text-base"></i>
                                        <span>PAGAMENTO PIX COMPENSADO COM SUCESSO!</span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>

                    <!-- WhatsApp Status Alert -->
                    <div class="max-w-md mx-auto p-3 bg-emerald-950/30 border border-emerald-500/30 rounded-xl text-emerald-300 text-xs flex items-center gap-3 mb-6">
                        <i class="fa-brands fa-whatsapp text-xl text-emerald-400 flex-shrink-0"></i>
                        <span class="text-left">Os detalhes e a chave Pix foram enviados para seu WhatsApp!</span>
                    </div>

                    <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                        <button type="button" @click="resetBooking()"
                                class="w-full sm:w-auto px-6 py-3 rounded-xl bg-vintage-surface border border-vintage-border text-vintage-cream hover:border-vintage-gold text-xs font-semibold transition cursor-pointer">
                            Fazer Outro Agendamento
                        </button>
                        <a :href="'/' + slug + '/painel'"
                           class="w-full sm:w-auto px-6 py-3 rounded-xl bg-gradient-to-r from-amber-600 via-vintage-gold to-amber-500 text-stone-950 font-bold text-xs hover:brightness-110 transition shadow-lg">
                            Ver Painel do Barbeiro
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<!DOCTYPE html>
<html lang="pt-BR" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0d0f14">
    <meta name="description" content="Agendamento online - Barbearia Clássica &amp; Moderna">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Barbearia Arão Beards">
    <meta name="application-name" content="Barbearia Arão Beards">
    <link rel="manifest" href="/arao-beards/manifest.json">
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <title>Agendamento Online - Barbearia Arão Beards</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- FontAwesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        vintage: {
                            bg: '#0d0f14',
                            surface: '#151821',
                            card: '#181c27',
                            border: '#2a3144',
                            borderGold: '#c5a059',
                            gold: '#c5a059',
                            goldLight: '#e4c57c',
                            goldDark: '#997839',
                            cream: '#f5efe6',
                            muted: '#8b93a7',
                            crimson: '#9b2226',
                            navy: '#1b2a4a'
                        }
                    },
                    fontFamily: {
                        serif: ['"Playfair Display"', 'Georgia', 'serif'],
                        sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>

    <style>
        body {
            background-color: #0b0c10;
            background-image: linear-gradient(to bottom, rgba(11, 12, 16, 0.50), rgba(11, 12, 16, 0.65)), url('/images/bg-sistema.webp');
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            color: #f5efe6;
            font-family: 'Plus Jakarta Sans', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        .font-vintage {
            font-family: 'Playfair Display', Georgia, serif;
        }

        /* Subtle leather grain & vignette overlay */
        .vintage-vignette {
            background: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.10) 0%, rgba(11, 12, 16, 0.40) 100%);
        }

        /* Animated Barber Pole Stripe */
        .barber-pole-strip {
            background: repeating-linear-gradient(
                45deg,
                #9b2226,
                #9b2226 12px,
                #ffffff 12px,
                #ffffff 20px,
                #1b2a4a 20px,
                #1b2a4a 32px,
                #ffffff 32px,
                #ffffff 40px
            );
            background-size: 56px 56px;
            animation: barberPoleAnim 3s linear infinite;
        }

        @keyframes barberPoleAnim {
            0% { background-position: 0 0; }
            100% { background-position: 56px 0; }
        }

        /* Gold metallic gradient text */
        .text-gold-gradient {
            background: linear-gradient(135deg, #f5d799 0%, #c5a059 50%, #997839 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #0d0f14;
        }
        ::-webkit-scrollbar-thumb {
            background: #2a3144;
            border-radius: 9999px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #c5a059;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col justify-between selection:bg-amber-500/20 selection:text-amber-200">
    <!-- Top Barber Pole Accent Line -->
    <div class="h-1.5 w-full barber-pole-strip shadow-md"></div>

    <!-- Main Content Container -->
    <div class="flex-grow">
            </div>

    <!-- Neo-Vintage Footer -->
    <footer class="border-t border-vintage-border/70 bg-vintage-surface/60 py-6 text-center text-xs text-vintage-muted">
        <div class="max-w-4xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-scissors text-vintage-gold"></i>
                <span class="font-vintage text-vintage-cream text-sm tracking-wide">CreativaAi Beauty & Barber</span>
            </div>
            <div class="flex items-center gap-4">
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] bg-emerald-950/60 border border-emerald-500/30 text-emerald-400">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    SaaS Multi-Tenant Online
                </span>
                <button type="button" @click="$dispatch('trigger-pwa-install')" class="inline-flex items-center gap-1.5 text-xs text-yellow-400 hover:text-yellow-300 font-semibold transition cursor-pointer">
                    <i class="fa-solid fa-mobile-screen-button"></i>
                    <span>Instalar App</span>
                </button>
                <a href="/arao-beards/painel" class="hover:text-vintage-gold transition">Painel Barbeiro</a>
            </div>
        </div>
    </footer>

    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js').catch(err => console.log('SW registration error:', err));
            });
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
function bookingApp(config) {
    return {
        slug: config.slug,
        categories: config.categories,
        barbers: config.barbers,
        step: 1,
        selectedServices: [],
        selectedBarber: 'any',
        selectedDate: config.initialDate,
        minDate: config.initialDate,
        selectedTime: null,
        slots: [],
        loadingSlots: false,
        customerName: '',
        customerPhone: '',
        customerEmail: '',
        notes: '',
        isSubmitting: false,
        bookingDetails: null,
        pix: null,
        copiedPix: false,
        paymentConfirmed: false,
        pollInterval: null,
        steps: [
            { title: 'Serviços' },
            { title: 'Barbeiro' },
            { title: 'Data & Hora' },
            { title: 'Confirmar' }
        ],

        init() {
            this.fetchSlots();
        },

        toggleService(svc) {
            const idx = this.selectedServices.findIndex(s => s.id === svc.id);
            if (idx > -1) {
                this.selectedServices.splice(idx, 1);
            } else {
                this.selectedServices.push(svc);
            }
            if (this.selectedDate) {
                this.fetchSlots();
            }
        },

        isServiceSelected(svc) {
            return this.selectedServices.some(s => s.id === svc.id);
        },

        totalPrice() {
            return this.selectedServices.reduce((acc, s) => acc + parseFloat(s.price || 0), 0);
        },

        totalDuration() {
            const total = this.selectedServices.reduce((acc, s) => acc + parseInt(s.duration_minutes || 0), 0);
            return total > 0 ? total : 30;
        },

        formatMoney(val) {
            return 'R$ ' + parseFloat(val || 0).toFixed(2).replace('.', ',');
        },

        goToStep(s) {
            this.step = s;
            if (s === 3) {
                this.fetchSlots();
            }
            window.scrollTo({ top: 100, behavior: 'smooth' });
        },

        fetchSlots() {
            if (!this.selectedDate) return;
            this.loadingSlots = true;
            this.selectedTime = null;

            const barberParam = this.selectedBarber === 'any' ? 'any' : (this.selectedBarber ? this.selectedBarber.id : 'any');
            const svcIds = this.selectedServices.map(s => s.id).join(',');
            const duration = this.totalDuration();

            const url = window.location.pathname.includes('/BarberDev/')
                ? `/BarberDev/${this.slug}/slots?date=${this.selectedDate}&professional_id=${barberParam}&service_ids=${svcIds}&duration=${duration}`
                : `/${this.slug}/slots?date=${this.selectedDate}&professional_id=${barberParam}&service_ids=${svcIds}&duration=${duration}`;

            fetch(url)
                .then(res => res.json())
                .then(data => {
                    this.slots = data.slots || [];
                    this.loadingSlots = false;
                })
                .catch(err => {
                    console.error('Error fetching slots:', err);
                    this.loadingSlots = false;
                });
        },

        formatPhone(e) {
            let v = e.target.value.replace(/\D/g, '');
            if (v.length > 11) v = v.substring(0, 11);
            if (v.length > 10) {
                this.customerPhone = v.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
            } else if (v.length > 5) {
                this.customerPhone = v.replace(/^(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
            } else if (v.length > 2) {
                this.customerPhone = v.replace(/^(\d{2})/, '($1) ');
            } else {
                this.customerPhone = v;
            }
        },

        formatDateDisplay(d) {
            if (!d) return '';
            const parts = d.split('-');
            if (parts.length === 3) {
                return `${parts[2]}/${parts[1]}/${parts[0]}`;
            }
            return d;
        },

        playSuccessSound() {
            try {
                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                const now = audioCtx.currentTime;
                const osc = audioCtx.createOscillator();
                const gain = audioCtx.createGain();
                osc.type = 'sine';
                osc.frequency.setValueAtTime(587.33, now);
                osc.frequency.exponentialRampToValueAtTime(880, now + 0.12);
                gain.gain.setValueAtTime(0.25, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
                osc.connect(gain);
                gain.connect(audioCtx.destination);
                osc.start(now);
                osc.stop(now + 0.45);
            } catch (e) {}
        },

        triggerCelebration() {
            this.playSuccessSound();
            if (typeof confetti === 'function') {
                confetti({
                    particleCount: 80,
                    spread: 70,
                    origin: { y: 0.65 },
                    colors: ['#f6d365', '#d4af37', '#ffffff', '#fda085', '#10b981']
                });
            }
        },

        copyPixCode() {
            if (!this.pix || !this.pix.qr_code) return;
            navigator.clipboard.writeText(this.pix.qr_code).then(() => {
                this.copiedPix = true;
                this.playSuccessSound();
                setTimeout(() => { this.copiedPix = false; }, 3000);
            }).catch(() => {
                alert('Código Pix selecionado!');
            });
        },

        startPaymentPolling(appointmentId) {
            if (!appointmentId) return;
            if (this.pollInterval) clearInterval(this.pollInterval);

            const statusUrl = window.location.pathname.includes('/BarberDev/')
                ? `/BarberDev/${this.slug}/payment-status/${appointmentId}`
                : `/${this.slug}/payment-status/${appointmentId}`;

            this.pollInterval = setInterval(() => {
                fetch(statusUrl)
                    .then(res => res.json())
                    .then(data => {
                        if (data.paid) {
                            this.paymentConfirmed = true;
                            this.triggerCelebration();
                            clearInterval(this.pollInterval);
                        }
                    })
                    .catch(err => console.error('Poll status error', err));
            }, 3000);
        },

        submitBooking() {
            if (this.selectedServices.length === 0) {
                alert('Selecione pelo menos um serviço para agendar.');
                this.step = 1;
                return;
            }

            this.isSubmitting = true;

            const payload = {
                customer_name: this.customerName,
                customer_phone: this.customerPhone,
                customer_email: this.customerEmail,
                service_ids: this.selectedServices.map(s => s.id),
                service_id: this.selectedServices[0]?.id,
                professional_id: this.selectedBarber === 'any' ? 'any' : this.selectedBarber?.id,
                date: this.selectedDate,
                time: this.selectedTime,
                notes: this.notes
            };

            const bookUrl = window.location.pathname.includes('/BarberDev/')
                ? `/BarberDev/${this.slug}/book`
                : `/${this.slug}/book`;

            fetch(bookUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                this.isSubmitting = false;
                if (data.success) {
                    this.bookingDetails = data.details;
                    this.pix = data.pix;
                    this.step = 5;
                    this.triggerCelebration();
                    if (data.pix) {
                        this.startPaymentPolling(data.appointment_id);
                    }
                } else {
                    alert(data.message || 'Ocorreu um erro ao realizar o agendamento.');
                }
            })
            .catch(err => {
                this.isSubmitting = false;
                console.error('Submit error:', err);
                alert('Erro na conexão com o servidor.');
            });
        },

        resetBooking() {
            if (this.pollInterval) clearInterval(this.pollInterval);
            this.step = 1;
            this.selectedServices = [];
            this.selectedBarber = 'any';
            this.selectedTime = null;
            this.notes = '';
            this.bookingDetails = null;
            this.pix = null;
            this.paymentConfirmed = false;
            this.fetchSlots();
        }
    };
}
</script>
    <!-- PWA Install Component -->
    <!-- PWA Smart Install Experience -->
<div id="pwa-install-container" x-data="{
    deferredPrompt: null,
    showAndroidPrompt: false,
    showIosPrompt: false,
    isInstalled: false,

    init() {
        // 1. Check if already running in standalone mode (installed)
        if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
            this.isInstalled = true;
            return;
        }

        // 2. Cooldown check (5 days) unless manually triggered
        const dismissedAt = localStorage.getItem('pwa_prompt_dismissed_at');
        let shouldAutoShow = true;
        if (dismissedAt) {
            const daysSince = (Date.now() - parseInt(dismissedAt, 10)) / (1000 * 60 * 60 * 24);
            if (daysSince < 5) shouldAutoShow = false;
        }

        // 3. Android / Chrome / Edge BeforeInstallPrompt
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            this.deferredPrompt = e;
            if (shouldAutoShow) {
                setTimeout(() => {
                    this.showAndroidPrompt = true;
                }, 2500);
            }
        });

        // 4. iOS Safari Detection
        const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent) && !window.MSStream;
        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
        if (isIos && isSafari && !window.navigator.standalone && shouldAutoShow) {
            setTimeout(() => {
                this.showIosPrompt = true;
            }, 3500);
        }

        // 5. Track successful install
        window.addEventListener('appinstalled', () => {
            this.isInstalled = true;
            this.showAndroidPrompt = false;
            this.showIosPrompt = false;
            this.deferredPrompt = null;
        });

        // 6. Register Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(reg => {
                        console.log('BarberDev PWA SW active:', reg.scope);
                    })
                    .catch(err => {
                        console.warn('SW register fail:', err);
                    });
            });
        }
    },

    triggerManualInstall() {
        if (this.deferredPrompt) {
            this.installApp();
        } else {
            const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent) && !window.MSStream;
            if (isIos) {
                this.showIosPrompt = true;
            } else {
                this.showAndroidPrompt = true;
            }
        }
    },

    installApp() {
        if (!this.deferredPrompt) {
            alert('Para instalar: toque no menu do seu navegador (três pontinhos ⋮ ou Compartilhar) e selecione \'Instalar Aplicativo\' ou \'Adicionar à Tela de Início\'.');
            return;
        }
        this.deferredPrompt.prompt();
        this.deferredPrompt.userChoice.then((choice) => {
            if (choice.outcome === 'accepted') {
                this.isInstalled = true;
                this.showAndroidPrompt = false;
            }
            this.deferredPrompt = null;
        });
    },

    dismiss() {
        this.showAndroidPrompt = false;
        this.showIosPrompt = false;
        localStorage.setItem('pwa_prompt_dismissed_at', Date.now().toString());
    }
}"
@trigger-pwa-install.window="triggerManualInstall()"
x-cloak class="relative z-50">

    <!-- ANDROID / DESKTOP / CHROME INSTALL BANNER -->
    <div x-show="showAndroidPrompt && !isInstalled"
         x-transition:enter="transition ease-out duration-300 transform"
         x-transition:enter-start="opacity-0 translate-y-8 scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 scale-100"
         x-transition:leave="transition ease-in duration-200 transform"
         x-transition:leave-start="opacity-100 translate-y-0 scale-100"
         x-transition:leave-end="opacity-0 translate-y-8 scale-95"
         style="display: none;"
         class="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-6 sm:w-96 p-4 rounded-2xl bg-stone-950/95 border border-yellow-500/40 shadow-2xl backdrop-blur-xl text-white">
        
        <div class="flex items-start gap-3.5">
            <div class="w-12 h-12 rounded-xl bg-stone-900 border border-yellow-500/30 overflow-hidden flex-shrink-0 flex items-center justify-center shadow-md">
                <img src="/icons/icon-192x192.png" alt="Barbearia Arão Beards" class="w-full h-full object-cover" onerror="this.src='/icons/icon-192x192.png'">
            </div>
            
            <div class="flex-grow min-w-0">
                <div class="flex items-center justify-between gap-2">
                    <h5 class="text-xs font-bold uppercase tracking-wider text-yellow-400 truncate">Barbearia Arão Beards</h5>
                    <button type="button" @click="dismiss()" class="text-stone-400 hover:text-white text-lg leading-none p-1 cursor-pointer">&times;</button>
                </div>
                <p class="text-xs font-semibold text-white mt-0.5">Instalar aplicativo oficial</p>
                <p class="text-[11px] text-stone-400 mt-0.5 leading-snug">
                    Acesso em 1 toque na sua tela inicial, ultra-rápido e em tela cheia sem barras.
                </p>
            </div>
        </div>

        <div class="mt-3.5 flex items-center gap-2">
            <button type="button" @click="installApp()"
                    class="flex-1 py-2.5 px-4 rounded-xl bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-500 text-stone-950 font-black text-xs uppercase tracking-wider shadow-lg shadow-yellow-500/20 hover:scale-[1.02] active:scale-95 transition flex items-center justify-center gap-1.5 cursor-pointer">
                <i class="fa-solid fa-arrow-down-to-bracket text-xs"></i>
                <span>Instalar Agora</span>
            </button>
            <button type="button" @click="dismiss()"
                    class="py-2.5 px-3 rounded-xl bg-stone-900 hover:bg-stone-850 text-stone-400 hover:text-stone-200 text-xs font-semibold transition cursor-pointer">
                Mais tarde
            </button>
        </div>
    </div>

    <!-- IOS SAFARI INSTALL GUIDE -->
    <div x-show="showIosPrompt && !isInstalled"
         x-transition:enter="transition ease-out duration-300 transform"
         x-transition:enter-start="opacity-0 translate-y-8"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200 transform"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-8"
         style="display: none;"
         class="fixed bottom-4 left-4 right-4 sm:left-auto sm:right-6 sm:w-96 p-4 rounded-2xl bg-stone-950/95 border border-yellow-500/40 shadow-2xl backdrop-blur-xl text-white">
        
        <div class="flex items-start justify-between gap-2 mb-2">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-stone-900 border border-yellow-500/30 overflow-hidden flex-shrink-0">
                    <img src="/icons/icon-192x192.png" alt="Barbearia Arão Beards" class="w-full h-full object-cover" onerror="this.src='/icons/icon-192x192.png'">
                </div>
                <div>
                    <h5 class="text-xs font-bold text-white leading-tight">Instalar no seu iPhone</h5>
                    <p class="text-[10px] text-yellow-400 font-mono">Barbearia Arão Beards</p>
                </div>
            </div>
            <button type="button" @click="dismiss()" class="text-stone-400 hover:text-white text-lg leading-none p-1 cursor-pointer">&times;</button>
        </div>

        <div class="space-y-2 text-xs text-stone-300 bg-stone-900/60 p-3 rounded-xl border border-white/5 my-2">
            <div class="flex items-center gap-2">
                <span class="w-5 h-5 rounded-full bg-yellow-400/20 text-yellow-400 font-bold text-[10px] flex items-center justify-center flex-shrink-0">1</span>
                <span>Toque no botão <i class="fa-solid fa-arrow-up-from-bracket text-yellow-400 mx-1"></i> (Compartilhar) no Safari</span>
            </div>
            <div class="flex items-center gap-2">
                <span class="w-5 h-5 rounded-full bg-yellow-400/20 text-yellow-400 font-bold text-[10px] flex items-center justify-center flex-shrink-0">2</span>
                <span>Role para baixo e selecione <strong class="text-white font-semibold">"Adicionar à Tela de Início"</strong> <i class="fa-regular fa-square-plus text-yellow-400 ml-1"></i></span>
            </div>
        </div>

        <button type="button" @click="dismiss()"
                class="w-full py-2 rounded-xl bg-stone-900 hover:bg-stone-850 text-stone-300 text-xs font-semibold transition cursor-pointer">
            Entendido, fechar
        </button>
    </div>

</div>
</body>
</html>