<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $company->name }} — AsignaPro</title>
    <meta name="description" content="{{ $company->description ?: 'Reserva tus citas en '.$company->name.' de forma rápida y sencilla.' }}">
    <x-pwa-meta :theme-color="$company->primary_color" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    <style>
        /* Native-feel tap on all interactive elements */
        * { -webkit-tap-highlight-color: transparent; }
        html { scroll-behavior: smooth; }
        /* Safe area support */
        .safe-pb { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        /* Custom scrollbar for date/service strips */
        .snap-strip { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
        .snap-strip > * { scroll-snap-align: start; }
        /* Horizontal scrollbar hidden */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .public-shell { width: min(100%, 72rem); }
        @media (min-width: 768px) { .public-shell { width: min(calc(100vw - 2rem), 78rem); } }
        @media (min-width: 1280px) { .public-shell { width: min(calc(100vw - 4rem), 90rem); } }
    </style>
</head>
<body class="bg-slate-100 font-sans antialiased">

@php
    $heroImage = $company->coverUrl() ?: $gallery->first()?->imageUrl() ?: $services->first(fn ($s) => $s->imageUrl())?->imageUrl();
    $featuredService = $services->first();
    $address = collect([$company->address, $company->city])->filter()->join(', ');
    $promotionForService = fn ($svc) => $featuredPromotions->first(fn ($p) => $p->appliesToService($svc->id));
@endphp

{{-- ══════════════════════════════════════════════════════
     SHELL (card centrada en desktop, full en mobile)
══════════════════════════════════════════════════════ --}}
<div class="public-shell mx-auto min-h-screen bg-white md:my-8 md:overflow-hidden md:rounded-[2rem] md:shadow-[0_32px_80px_rgba(15,23,42,0.12)]">

    {{-- ══════════════════════════════════════════════════
         HERO — Header con foto de portada
    ══════════════════════════════════════════════════ --}}
    <header>
        {{-- Top bar --}}
        <div class="relative z-10 flex items-center justify-between gap-3 px-4 py-4 md:px-6">
            {{-- Logo + nombre --}}
            <div class="flex min-w-0 items-center gap-3">
                @if ($company->logoUrl())
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-white shadow-md ring-1 ring-white/60">
                        <img src="{{ $company->logoUrl() }}" alt="{{ $company->name }}" class="h-full w-full object-contain p-1.5">
                    </div>
                @else
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-lg font-black text-white shadow-md"
                         style="background:{{ $company->primary_color }};">
                        {{ strtoupper(substr($company->name, 0, 1)) }}
                    </div>
                @endif
                <div class="min-w-0">
                    <p class="truncate text-base font-black text-slate-950 md:text-lg">{{ $company->name }}</p>
                    @if ($address || $company->phone)
                        <p class="truncate text-[11px] font-medium text-slate-500">
                            @if ($address){{ $address }}@endif
                            @if ($address && $company->phone) &middot; @endif
                            @if ($company->phone){{ $company->phone }}@endif
                        </p>
                    @endif
                </div>
            </div>

            {{-- Acciones --}}
            <div class="flex shrink-0 items-center gap-2">
                @if ($company->whatsapp)
                    <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->whatsapp) }}"
                       target="_blank" rel="noopener"
                       class="flex h-10 w-10 items-center justify-center rounded-full bg-[#25D366] text-white shadow-md transition hover:bg-[#22c55e] active:scale-95"
                       aria-label="WhatsApp">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                        </svg>
                    </a>
                @endif
                <a href="#reservar"
                   class="hidden rounded-full px-5 py-2.5 text-sm font-black text-white shadow-md transition hover:opacity-90 active:scale-95 md:inline-flex"
                   style="background:{{ $company->primary_color }};">
                    Reservar
                </a>
            </div>
        </div>

        {{-- Hero image --}}
        <div class="mx-4 overflow-hidden rounded-[1.5rem] bg-slate-900 shadow-xl md:mx-6 md:rounded-[1.75rem]">
            <div class="relative min-h-[13rem] md:min-h-[20rem]">
                @if ($heroImage)
                    <img src="{{ $heroImage }}" alt="{{ $company->name }}"
                         class="absolute inset-0 h-full w-full object-cover opacity-80">
                @else
                    <div class="absolute inset-0" style="background:linear-gradient(135deg,{{ $company->primary_color }},{{ $company->secondary_color }});"></div>
                @endif
                <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/30 to-transparent"></div>
                <div class="relative flex min-h-[13rem] flex-col justify-end p-5 text-white md:min-h-[20rem] md:p-7">
                    <span class="mb-3 inline-flex w-fit items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-bold backdrop-blur-sm">
                        <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
                        Reserva online disponible
                    </span>
                    <h1 class="text-2xl font-black leading-tight md:text-4xl">
                        {{ $company->description ?: 'Agenda fácil, rápida y desde cualquier lugar' }}
                    </h1>
                    @if ($featuredService)
                        <div class="mt-4 flex flex-wrap items-center gap-2 text-sm">
                            <span class="rounded-full bg-white/15 px-3 py-1 font-bold backdrop-blur-sm">{{ $featuredService->name }}</span>
                            <span class="rounded-full bg-white/10 px-3 py-1 backdrop-blur-sm">{{ $featuredService->duration_minutes }} min</span>
                            <span class="rounded-full bg-white/15 px-3 py-1 font-black backdrop-blur-sm">
                                $&nbsp;{{ number_format($featuredService->price, 0, ',', '.') }}
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="mt-4 flex justify-center gap-1.5 pb-2">
            <span class="h-2 w-5 rounded-full" style="background:{{ $company->primary_color }};"></span>
            <span class="h-2 w-2 rounded-full bg-slate-200"></span>
            <span class="h-2 w-2 rounded-full bg-slate-200"></span>
        </div>
    </header>

    {{-- ══════════════════════════════════════════════════
         PROMOCIONES
    ══════════════════════════════════════════════════ --}}
    @if ($featuredPromotions->isNotEmpty())
        <section class="px-4 pt-8 md:px-6">
            <div class="mb-4 flex items-end justify-between gap-4">
                <div>
                    <p class="text-[11px] font-black uppercase tracking-widest" style="color:{{ $company->primary_color }};">Promociones</p>
                    <h2 class="text-xl font-black text-slate-950">Ofertas destacadas</h2>
                </div>
                <a href="#reservar" class="rounded-full px-4 py-2 text-xs font-black text-white transition hover:opacity-90 active:scale-95"
                   style="background:{{ $company->primary_color }};">
                    Reservar
                </a>
            </div>
            <div class="snap-strip no-scrollbar flex gap-3 overflow-x-auto pb-2 md:grid md:grid-cols-2 md:overflow-visible xl:grid-cols-3">
                @foreach ($featuredPromotions as $promo)
                    <a href="#reservar"
                       class="group w-72 shrink-0 snap-start overflow-hidden rounded-[1.25rem] text-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl active:scale-[0.98] md:w-auto">
                        <div class="relative min-h-36 p-5">
                            <div class="absolute inset-0" style="background:linear-gradient(135deg,{{ $company->primary_color }},{{ $company->secondary_color }});"></div>
                            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.22),transparent_40%)]"></div>
                            <div class="relative">
                                <span class="inline-flex rounded-full bg-white/20 px-3 py-1 text-xs font-black backdrop-blur-sm">{{ $promo->discountLabel() }}</span>
                                <h3 class="mt-3 text-lg font-black leading-tight">{{ $promo->name }}</h3>
                                @if ($promo->description)
                                    <p class="mt-1.5 line-clamp-2 text-sm text-white/80">{{ $promo->description }}</p>
                                @endif
                                <p class="mt-4 text-sm font-bold text-white/90">Ver servicios →</p>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ══════════════════════════════════════════════════
         SERVICIOS
    ══════════════════════════════════════════════════ --}}
    <section class="px-4 pt-8 md:px-6">
        <div class="mb-4 flex items-end justify-between gap-4">
            <div>
                <p class="text-[11px] font-black uppercase tracking-widest" style="color:{{ $company->primary_color }};">Menú</p>
                <h2 class="text-xl font-black text-slate-950">Servicios</h2>
            </div>
            <a href="#reservar" class="text-sm font-black transition" style="color:{{ $company->primary_color }};">
                Ver todos →
            </a>
        </div>

        @if ($services->isEmpty())
            <p class="rounded-2xl border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
                Aún no hay servicios disponibles.
            </p>
        @else
            <div class="snap-strip no-scrollbar flex gap-3 overflow-x-auto pb-2 md:grid md:grid-cols-2 md:overflow-visible lg:grid-cols-3 xl:grid-cols-4">
                @foreach ($services as $svc)
                    @php $svcPromo = $promotionForService($svc); @endphp
                    <button type="button"
                       data-public-service-id="{{ $svc->id }}"
                       class="group w-64 shrink-0 snap-start overflow-hidden rounded-[1.25rem] border border-slate-100 bg-white text-left shadow-[0_8px_24px_rgba(15,23,42,0.07)] transition hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.98] md:w-auto">
                        <div class="relative h-36 bg-slate-100">
                            @if ($svc->imageUrl())
                                <img src="{{ $svc->imageUrl() }}" alt="{{ $svc->name }}" class="h-full w-full object-cover transition duration-300 group-hover:scale-105">
                            @elseif ($heroImage)
                                <img src="{{ $heroImage }}" alt="{{ $svc->name }}" class="h-full w-full object-cover transition duration-300 group-hover:scale-105">
                            @else
                                <div class="h-full w-full" style="background:linear-gradient(135deg,{{ $company->primary_color }},{{ $company->secondary_color }});"></div>
                            @endif
                            {{-- Category badge --}}
                            <span class="absolute left-3 top-3 rounded-full px-2.5 py-1 text-[11px] font-black text-white shadow"
                                  style="background:{{ $company->primary_color }};">
                                {{ $svc->category?->name ?: 'Servicio' }}
                            </span>
                            {{-- Promo badge --}}
                            @if ($svcPromo)
                                <span class="absolute right-3 top-3 rounded-full bg-white px-2.5 py-1 text-[11px] font-black shadow"
                                      style="color:{{ $company->primary_color }};">
                                    {{ $svcPromo->discountLabel() }}
                                </span>
                            @endif
                        </div>
                        <div class="p-4">
                            <h3 class="text-base font-black text-slate-950">{{ $svc->name }}</h3>
                            @if ($svc->description)
                                <p class="mt-1 line-clamp-2 text-xs leading-relaxed text-slate-500">{{ $svc->description }}</p>
                            @endif
                            <div class="mt-3.5 flex items-center justify-between">
                                <span class="inline-flex items-center gap-1 text-xs font-semibold text-slate-400">
                                    <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" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    {{ $svc->duration_minutes }} min
                                </span>
                                <span>
                                    @if ($svcPromo)
                                        @php $promoPrice = max(0, (float)$svc->price - $svcPromo->calculateDiscount((float)$svc->price)); @endphp
                                        <span class="block text-right text-xs font-semibold text-slate-400 line-through">
                                            $&nbsp;{{ number_format($svc->price, 0, ',', '.') }}
                                        </span>
                                        <span class="text-base font-black" style="color:{{ $company->primary_color }};">
                                            $&nbsp;{{ number_format($promoPrice, 0, ',', '.') }}
                                        </span>
                                    @else
                                        <span class="text-base font-black" style="color:{{ $company->primary_color }};">
                                            $&nbsp;{{ number_format($svc->price, 0, ',', '.') }}
                                        </span>
                                    @endif
                                </span>
                            </div>
                        </div>
                    </button>
                @endforeach
            </div>
        @endif
    </section>

    {{-- ══════════════════════════════════════════════════
         GALERÍA
    ══════════════════════════════════════════════════ --}}
    @if ($gallery->isNotEmpty())
        <section class="px-4 pt-8 md:px-6">
            <div class="mb-4">
                <p class="text-[11px] font-black uppercase tracking-widest" style="color:{{ $company->primary_color }};">Galería</p>
                <h2 class="text-xl font-black text-slate-950">Nuestro trabajo</h2>
            </div>
            <div class="grid grid-cols-2 gap-2.5 md:grid-cols-4">
                @foreach ($gallery as $item)
                    <figure class="group overflow-hidden rounded-2xl bg-slate-100 shadow-sm">
                        <img src="{{ $item->imageUrl() }}"
                             alt="{{ $item->title ?: 'Imagen de '.$company->name }}"
                             class="aspect-square w-full object-cover transition duration-300 group-hover:scale-105">
                        @if ($item->title)
                            <figcaption class="px-3 py-2">
                                <p class="text-xs font-bold text-slate-700 line-clamp-1">{{ $item->title }}</p>
                            </figcaption>
                        @endif
                    </figure>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ══════════════════════════════════════════════════
         EQUIPO
    ══════════════════════════════════════════════════ --}}
    @if ($employees->isNotEmpty())
        <section class="px-4 pt-8 md:px-6">
            <div class="mb-4">
                <p class="text-[11px] font-black uppercase tracking-widest" style="color:{{ $company->primary_color }};">Profesionales</p>
                <h2 class="text-xl font-black text-slate-950">Nuestro equipo</h2>
            </div>
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
                @foreach ($employees as $emp)
                    <div class="rounded-[1.125rem] border border-slate-100 bg-white p-4 text-center shadow-[0_8px_24px_rgba(15,23,42,0.06)]">
                        @if ($emp->photoUrl())
                            <img src="{{ $emp->photoUrl() }}" alt="{{ $emp->fullName() }}"
                                 class="mx-auto mb-3 h-16 w-16 rounded-full object-cover ring-2 ring-white shadow-md">
                        @else
                            <div class="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-full text-xl font-black text-white shadow-md ring-2 ring-white"
                                 style="background:{{ $emp->color }};">
                                {{ strtoupper(substr($emp->first_name, 0, 1)) }}
                            </div>
                        @endif
                        <p class="text-sm font-black text-slate-900">{{ $emp->fullName() }}</p>
                        @if ($emp->position)
                            <p class="mt-0.5 text-xs font-medium text-slate-400">{{ $emp->position }}</p>
                        @endif
                        @if ($emp->bio)
                            <p class="mt-2 text-xs leading-relaxed text-slate-500 line-clamp-3">{{ $emp->bio }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ══════════════════════════════════════════════════
         WIZARD DE RESERVA
    ══════════════════════════════════════════════════ --}}
    <section id="reservar" class="scroll-mt-4 px-4 py-10 md:px-6 lg:py-12">
        <div class="rounded-[2rem] bg-slate-50 p-4 ring-1 ring-slate-100 md:p-6 lg:p-8">
            <div class="mb-7 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                <div>
                    <p class="text-[11px] font-black uppercase tracking-widest" style="color:{{ $company->primary_color }};">Reserva online</p>
                    <h2 class="mt-1 text-3xl font-black tracking-tight text-slate-950 md:text-4xl">Agenda tu cita</h2>
                    <p class="mt-2 max-w-2xl text-sm leading-relaxed text-slate-500">Selecciona servicio, profesional y horario disponible. Confirmamos tu reserva por correo.</p>
                </div>
                <div class="hidden rounded-full bg-white px-4 py-2 text-xs font-black text-slate-500 ring-1 ring-slate-200 md:inline-flex">
                    Reserva en menos de 1 minuto
                </div>
            </div>

            <div class="grid gap-6 lg:grid-cols-[minmax(250px,0.78fr)_minmax(0,1.5fr)] xl:grid-cols-[320px_minmax(0,1fr)]">
                <aside class="space-y-4 lg:sticky lg:top-6 lg:self-start">
                    <div class="overflow-hidden rounded-[1.5rem] bg-slate-950 text-white shadow-[0_24px_55px_rgba(15,23,42,.18)]">
                        <div class="relative min-h-48 p-5">
                            @if ($heroImage)
                                <img src="{{ $heroImage }}" alt="{{ $company->name }}" class="absolute inset-0 h-full w-full object-cover opacity-45">
                            @endif
                            <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/70 to-slate-950/20"></div>
                            <div class="relative flex min-h-40 flex-col justify-end">
                                <span class="mb-3 inline-flex w-fit rounded-full bg-white/15 px-3 py-1 text-xs font-black backdrop-blur">Disponible ahora</span>
                                <h3 class="text-2xl font-black leading-tight">{{ $company->name }}</h3>
                                <p class="mt-2 text-sm leading-relaxed text-white/70">{{ $company->description ?: 'Reserva tus citas online de forma rápida y sencilla.' }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-[1.25rem] border border-slate-100 bg-white p-4 shadow-sm">
                        <p class="text-xs font-black uppercase tracking-widest text-slate-400">Tu reserva incluye</p>
                        <div class="mt-4 space-y-3">
                            @foreach ([
                                ['title' => 'Confirmación por correo', 'text' => 'Recibes el detalle de tu cita al finalizar.'],
                                ['title' => 'Profesionales disponibles', 'text' => 'Solo mostramos horarios realmente libres.'],
                                ['title' => 'Cancelación online', 'text' => $company->allow_customer_cancel ? 'Puedes cancelar desde tu enlace de reserva.' : 'El negocio gestiona cambios directamente.'],
                            ] as $benefit)
                                <div class="flex gap-3">
                                    <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-white" style="background:{{ $company->primary_color }};">
                                        <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="3" d="M5 13l4 4L19 7"/></svg>
                                    </span>
                                    <div>
                                        <p class="text-sm font-black text-slate-900">{{ $benefit['title'] }}</p>
                                        <p class="mt-0.5 text-xs leading-relaxed text-slate-500">{{ $benefit['text'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @if ($featuredPromotions->isNotEmpty())
                        <div class="rounded-[1.25rem] border border-emerald-100 bg-emerald-50 p-4">
                            <p class="text-xs font-black uppercase tracking-widest text-emerald-700">Promoción activa</p>
                            <p class="mt-2 text-lg font-black text-slate-950">{{ $featuredPromotions->first()->name }}</p>
                            <p class="mt-1 text-sm font-semibold text-emerald-700">{{ $featuredPromotions->first()->discountLabel() }}</p>
                        </div>
                    @endif
                </aside>

                <div class="min-w-0">
                    @livewire('public.booking-wizard', ['slug' => $company->slug])
                </div>
            </div>
        </div>
    </section>

    {{-- ══════════════════════════════════════════════════
         INFO DE CONTACTO
    ══════════════════════════════════════════════════ --}}
    @if ($company->website || $company->email || $address)
        <section class="border-t border-slate-100 px-4 py-6 md:px-6">
            <div class="flex flex-wrap justify-center gap-3 text-xs font-semibold text-slate-500">
                @if ($address)
                    <span class="flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1.5">
                        <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        {{ $address }}
                    </span>
                @endif
                @if ($company->email)
                    <a href="mailto:{{ $company->email }}"
                       class="flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1.5 transition hover:bg-slate-200">
                        <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        {{ $company->email }}
                    </a>
                @endif
                @if ($company->website)
                    <a href="{{ $company->website }}" target="_blank" rel="noopener"
                       class="flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1.5 transition hover:bg-slate-200">
                        <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/></svg>
                        {{ parse_url($company->website, PHP_URL_HOST) ?: $company->website }}
                    </a>
                @endif
            </div>
        </section>
    @endif

    {{-- ══════════════════════════════════════════════════
         FOOTER
    ══════════════════════════════════════════════════ --}}
    <footer class="border-t border-slate-100 px-4 py-6 text-center text-xs text-slate-400 md:px-6">
        <p>Powered by <a href="/" class="font-bold text-slate-600 transition hover:text-slate-900">AsignaPro</a></p>
    </footer>

    {{-- ══════════════════════════════════════════════════
         STICKY CTA — Solo mobile
    ══════════════════════════════════════════════════ --}}
    <div class="safe-pb sticky bottom-0 z-30 border-t border-slate-200/80 bg-white/95 px-4 pt-3 backdrop-blur-md md:hidden">
        <div class="flex gap-2 pb-1">
            <a href="#reservar"
               class="flex flex-1 items-center justify-center rounded-full py-3.5 text-sm font-black text-white shadow-lg transition active:scale-[0.97]"
               style="background:{{ $company->primary_color }};">
                <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                Reservar turno
            </a>
            @if ($company->allow_customer_cancel)
                <a href="{{ route('public.bookings.cancel.lookup') }}"
                   class="flex items-center rounded-full border-2 border-slate-200 px-4 py-3.5 text-sm font-black text-slate-600 transition hover:bg-slate-50 active:scale-[0.97]">
                    <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>
                </a>
            @endif
        </div>
    </div>

</div>{{-- /shell --}}

<x-pwa-install-banner :above-nav="false" />

@livewireScriptConfig
<script>
    document.addEventListener('click', function (event) {
        const trigger = event.target.closest('[data-public-service-id]');

        if (!trigger) {
            return;
        }

        const id = Number(trigger.dataset.publicServiceId);
        document.getElementById('reservar')?.scrollIntoView({ behavior: 'smooth', block: 'start' });

        window.setTimeout(() => {
            if (window.Livewire && id) {
                window.Livewire.dispatch('public-service-selected', { id: id });
            }
        }, 250);
    });
</script>
</body>
</html>
