@extends('layouts.client')

@section('title', 'Restaurante Campestre - Inicio')

@push('styles')
    {{-- 1. CARGAMOS TAILWIND Y LUCIDE (Igual que tu original) --}}
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    
    {{-- 2. FUENTES --}}
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    
    {{-- 3. CONFIGURACIÓN DE COLORES (CRUCIAL: Esto faltaba) --}}
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['DM Sans', 'sans-serif'], serif: ['Playfair Display', 'serif'] },
                    colors: { brand: { red: '#E21C21', blue: '#0050FF', dark: '#0f172a', bg: '#f8fafc' } },
                    backgroundImage: {
                        'hero-restaurant': "url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2500&auto=format&fit=crop')",
                        'reservation-bg': "url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?q=80&w=2500&auto=format&fit=crop')"
                    }
                }
            }
        }
    </script>

    {{-- 4. ESTILOS CSS EXTRA (Animaciones y Navbar) --}}
  
@endpush

@section('client_content')

    {{-- NAVBAR --}}
    <nav id="mainNav" class="fixed top-0 w-full z-50 transition-all duration-300 nav-transparent flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gradient-brand rounded-lg flex items-center justify-center text-white shadow-lg rotate-3">
                <i data-lucide="chef-hat" class="w-6 h-6"></i>
            </div>
            <span class="font-serif font-bold text-xl tracking-wide nav-link transition-colors">CAMPESTRE CLUB</span>
        </div>

        <div class="hidden md:flex items-center gap-10 text-sm font-bold tracking-widest uppercase">
            <a href="#hero" class="nav-link hover:text-brand-red transition-colors relative group">Inicio<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-red transition-all group-hover:w-full"></span></a>
            <a href="#promociones" class="nav-link hover:text-brand-red transition-colors relative group">Novedades<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-red transition-all group-hover:w-full"></span></a>
            <a href="#carta" class="nav-link hover:text-brand-red transition-colors relative group">La Carta<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-red transition-all group-hover:w-full"></span></a>
            <a href="#reservas" class="nav-link hover:text-brand-red transition-colors relative group">Reservas<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-red transition-all group-hover:w-full"></span></a>
        </div>

        <div class="flex items-center gap-6">
            
            {{-- BOTÓN NUEVO: MIS RESERVAS --}}
            {{-- Solo visible en PC (md:flex), estilo blanco para no pelear con el rojo --}}
            <a href="{{ route('client.orders') }}" class="hidden md:flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-brand-dark text-xs font-bold uppercase tracking-wider rounded-full hover:bg-slate-50 transition-colors shadow-sm group">
                <i data-lucide="calendar-check" class="w-4 h-4 text-brand-blue group-hover:scale-110 transition-transform"></i>
                Mis Reservas
            </a>

            <a href="#reservas" class="hidden md:block px-6 py-2.5 bg-brand-red text-white text-xs font-bold uppercase tracking-wider rounded-full hover:bg-red-700 transition-colors shadow-lg">Reservar Mesa</a>
            
            <a href="{{ route('client.profile') }}" class="flex items-center gap-3 pl-6 border-l border-white/20 group transition-all" id="userArea">
                {{-- ... código de tu perfil ... --}}
                <div class="text-right hidden lg:block leading-tight">
                    <p class="text-xs font-bold nav-link group-hover:text-brand-blue transition-colors">
                        {{ $usuario['nombre'] }}
                    </p>
                    <p class="text-[10px] text-brand-blue font-black uppercase">
                        {{ $usuario['nivel'] }}
                    </p>
                </div>
                <div class="relative">
                    <img src="{{ $usuario['avatar'] }}" 
                         class="w-9 h-9 rounded-full border-2 border-white shadow-md object-cover transition-transform duration-300 group-hover:scale-110 group-hover:border-brand-blue">
                    <span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></span>
                </div>
            </a>
        </div>
    </nav>

    {{-- HERO SECTION --}}
    <section id="hero" class="relative h-screen w-full flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 bg-hero-restaurant bg-cover bg-center"></div>
        <div class="absolute inset-0 bg-black/40"></div>

        <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
            <div class="mb-4 md:mb-6 reveal active">
                <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-white/20 bg-white/10 backdrop-blur-md text-white text-[10px] md:text-[11px] font-bold uppercase tracking-[0.3em] shadow-lg">
                    <span class="w-1.5 h-1.5 rounded-full bg-brand-red animate-pulse"></span>
                    Cocina de Autor & Naturaleza
                </span>
            </div>
            
            <h1 class="font-serif text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-4 md:mb-6 text-white drop-shadow-xl reveal active transition-all duration-1000 delay-100">
                Experiencia <br/>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-blue via-white to-brand-blue bg-[length:200%_auto] animate-[gradient_4s_linear_infinite]">Gastronómica</span>
            </h1>
            
            <p class="text-slate-100 text-sm md:text-lg font-light max-w-xl mx-auto mb-8 md:mb-10 leading-relaxed reveal active transition-all duration-1000 delay-200" style="text-shadow: 0 2px 8px rgba(0,0,0,0.7);">
                Descubre un refugio culinario donde los ingredientes locales se transforman en platos memorables en un entorno natural privilegiado.
            </p>

            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center reveal active transition-all duration-1000 delay-500">
                <button onclick="scrollToSection('carta')" class="group w-full sm:w-auto px-7 py-3.5 bg-white text-brand-dark font-bold uppercase tracking-widest text-[11px] rounded-lg hover:bg-slate-100 transition-all shadow-xl flex items-center justify-center gap-2">
                    Ver Carta 
                    <i data-lucide="arrow-down-right" class="w-4 h-4 group-hover:rotate-45 transition-transform"></i>
                </button>
                
                <button onclick="scrollToSection('reservas')" class="relative overflow-hidden w-full sm:w-auto px-7 py-3.5 bg-brand-red text-white font-bold uppercase tracking-widest text-[11px] rounded-lg shadow-lg shadow-brand-red/30 hover:scale-105 active:scale-95 transition-all group">
                    <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]"></span>
                    Reservar Ahora
                </button>
            </div>
        </div>

        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 opacity-50">
            <div class="w-[20px] h-[32px] rounded-full border-2 border-white flex justify-center pt-1">
                <div class="w-0.5 h-1.5 bg-white rounded-full animate-bounce"></div>
            </div>
            <span class="text-[8px] text-white font-bold uppercase tracking-[0.2em]">Scroll</span>
        </div>
    </section>

    {{-- PROMOCIONES --}}
    <section id="promociones" class="py-20 bg-white relative overflow-hidden">
        <div class="absolute top-0 right-0 w-3/4 h-full bg-slate-50 -skew-x-12 origin-top-right -z-10 opacity-50"></div>

        <div class="container mx-auto px-6 max-w-[1400px]">
            <div class="flex flex-col md:flex-row md:items-end justify-between mb-10 reveal">
                <div>
                    <span class="inline-block py-1 px-3 bg-brand-red/10 text-brand-red text-xs font-bold uppercase tracking-widest rounded-full mb-3">
                        Agenda Campestre
                    </span>
                    <h2 class="font-serif text-4xl md:text-5xl font-bold text-brand-dark leading-tight">
                        Eventos & <br><span class="text-brand-blue">Novedades</span>
                    </h2>
                </div>
                <div class="flex gap-3 mt-6 md:mt-0">
                    <button onclick="scrollContainer('promoContainer', 'left')" class="group w-12 h-12 rounded-full border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-brand-dark hover:text-white hover:border-brand-dark transition-all">
                        <i data-lucide="arrow-left" class="w-5 h-5 group-hover:-translate-x-1 transition-transform"></i>
                    </button>
                    <button onclick="scrollContainer('promoContainer', 'right')" class="group w-12 h-12 rounded-full border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-brand-dark hover:text-white hover:border-brand-dark transition-all">
                        <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </div>
            </div>

            <div id="promoContainer" class="flex gap-6 overflow-x-auto scroll-container snap-x snap-mandatory pb-10 px-2 -mx-2">
                @foreach($promociones as $promo)
                    <div class="min-w-[85vw] md:min-w-[650px] lg:min-w-[800px] h-[320px] md:h-[380px] relative rounded-[2rem] overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 snap-center group cursor-pointer border border-slate-100">
                        <img src="{{ $promo['img'] }}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-1000">
                        <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent opacity-90"></div>
                        <div class="absolute top-6 right-6 bg-white/10 backdrop-blur-md border border-white/20 text-white rounded-xl px-4 py-2 text-center group-hover:bg-brand-blue group-hover:border-brand-blue transition-colors">
                            <span class="block text-[10px] font-bold uppercase tracking-wider opacity-80">HOY</span>
                            <span class="block text-xl font-black leading-none">29</span>
                        </div>
                        <div class="absolute inset-0 flex flex-col justify-end p-8 md:p-12 items-start">
                            <div class="max-w-xl transform translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
                                <span class="inline-block px-3 py-1 bg-brand-red text-white text-[10px] font-bold uppercase tracking-widest rounded mb-3 shadow-lg">Promoción</span>
                                <h3 class="text-3xl md:text-5xl font-serif font-bold text-white mb-3 leading-tight drop-shadow-lg">{{ $promo['titulo'] }}</h3>
                                <p class="text-slate-200 text-lg font-light mb-6 opacity-90 line-clamp-2">{{ $promo['sub'] }}</p>
                                <button class="flex items-center gap-3 text-white font-bold text-sm uppercase tracking-widest hover:text-brand-blue transition-colors">
                                    Ver Detalles <i data-lucide="arrow-right" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- CARTA PREVIEW --}}
    <section id="carta" class="py-20 bg-slate-50 relative border-t border-slate-200">
        <div class="container mx-auto px-4 md:px-8 max-w-[1400px]">
            <div class="text-center mb-12 reveal">
                <h2 class="font-serif text-5xl font-bold text-brand-dark mb-4">Nuestra Carta</h2>
                <div class="w-20 h-1 bg-gradient-brand mx-auto rounded-full mb-8"></div>
                
                <div class="max-w-lg mx-auto mb-10 relative group">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <i data-lucide="search" class="h-5 w-5 text-slate-400 group-focus-within:text-brand-blue transition-colors"></i>
                    </div>
                    <input type="text" id="searchInput" onkeyup="realTimeSearch()" 
                           class="block w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-full leading-5 text-brand-dark placeholder-slate-400 focus:outline-none focus:border-brand-blue focus:ring-1 focus:ring-brand-blue shadow-sm hover:shadow-md transition-all duration-300" 
                           placeholder="¿Qué se te antoja hoy? (ej. Lomo, Pisco, Parrilla...)">
                </div>

                <div class="flex flex-wrap justify-center gap-3">
                    @foreach($categorias as $cat)
                        <a href="#cat-{{ $cat['id'] }}" class="px-5 py-2 bg-white rounded-full border border-slate-200 text-sm font-bold text-slate-600 hover:bg-brand-dark hover:text-white hover:border-brand-dark transition-all shadow-sm flex items-center gap-2">
                            <i data-lucide="{{ $cat['icono'] }}" class="w-4 h-4"></i>
                            {{ $cat['nombre'] }}
                        </a>
                    @endforeach
                </div>
            </div>

            @foreach($categorias as $cat)
                <div id="cat-{{ $cat['id'] }}" class="category-row mb-20 reveal relative group/row scroll-mt-32">
                    <div class="flex items-end justify-between mb-6 px-4">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-xl bg-gradient-brand flex items-center justify-center text-white shadow-lg shadow-blue-500/20">
                                <i data-lucide="{{ $cat['icono'] }}" class="w-6 h-6"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl md:text-3xl font-bold text-brand-dark">{{ $cat['nombre'] }}</h3>
                                <p class="text-sm text-slate-400 font-medium">Selección del Chef</p>
                            </div>
                        </div>
                        <div class="flex gap-2 opacity-50 group-hover/row:opacity-100 transition-opacity">
                            <button onclick="scrollContainer('slider-{{ $cat['id'] }}', 'left')" class="w-10 h-10 rounded-full border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-brand-dark hover:text-white hover:border-brand-dark transition-all bg-white"><i data-lucide="chevron-left" class="w-5 h-5"></i></button>
                            <button onclick="scrollContainer('slider-{{ $cat['id'] }}', 'right')" class="w-10 h-10 rounded-full border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-brand-dark hover:text-white hover:border-brand-dark transition-all bg-white"><i data-lucide="chevron-right" class="w-5 h-5"></i></button>
                        </div>
                    </div>

                    <div id="slider-{{ $cat['id'] }}" class="flex gap-6 overflow-x-auto scroll-container snap-x snap-mandatory px-4 pb-12 pt-2 -mx-4">
                        @php
                            $productosCategoria = collect($productos)->where('cat', $cat['id']);
                        @endphp

                        @forelse($productosCategoria as $prod)
                            <div class="searchable-item min-w-[280px] w-[280px] md:min-w-[320px] md:w-[320px] bg-white rounded-[24px] shadow-[0_8px_30px_rgba(0,0,0,0.04)] border border-slate-100 snap-start flex-shrink-0 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_rgba(0,0,0,0.08)] group/card flex flex-col h-full relative overflow-hidden">
                                <div class="relative h-56 overflow-hidden">
                                    <img src="{{ $prod['img'] }}" class="w-full h-full object-cover transition-transform duration-700 group-hover/card:scale-110">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity duration-300"></div>
                                    @if(isset($prod['badge']) && $prod['badge'])
                                        <span class="absolute top-4 left-4 bg-white/95 backdrop-blur text-brand-dark text-[10px] font-extrabold px-3 py-1 rounded-full shadow-md uppercase tracking-wider border border-slate-100 flex items-center gap-1">
                                            <span class="w-1.5 h-1.5 rounded-full bg-brand-red animate-pulse"></span> {{ $prod['badge'] }}
                                        </span>
                                    @endif
                                </div>
                                <div class="p-6 flex flex-col flex-1">
                                    <div class="flex justify-between items-start mb-2">
                                        <h4 class="product-title font-bold text-lg text-brand-dark leading-tight group-hover/card:text-brand-blue transition-colors line-clamp-1">{{ $prod['nombre'] }}</h4>
                                    </div>
                                    <p class="product-desc text-sm text-slate-500 line-clamp-2 leading-relaxed mb-4 flex-1">{{ $prod['desc'] }}</p>
                                    <div class="flex items-center justify-between pt-4 border-t border-slate-50 mt-auto">
                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Precio</span>
                                        <span class="text-xl font-bold text-brand-dark">S/ {{ number_format($prod['precio'], 2) }}</span>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="w-full text-center py-12 bg-white rounded-2xl border border-dashed border-slate-300 text-slate-400 italic">
                                Próximamente nuevos platillos en esta sección.
                            </div>
                        @endforelse
                    </div>
                </div>
            @endforeach

            <div id="noResults" class="hidden text-center py-20">
                <i data-lucide="search-x" class="w-16 h-16 text-slate-300 mx-auto mb-4"></i>
                <h3 class="text-xl font-bold text-slate-600">No encontramos lo que buscas</h3>
                <p class="text-slate-400">Intenta con otra palabra clave como "Lomo" o "Pisco".</p>
            </div>
        </div>
    </section>

    {{-- RESERVAS --}}
    <section id="reservas" class="relative py-24 bg-slate-50 overflow-hidden">
        
        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-brand-blue/5 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 bg-brand-red/5 rounded-full blur-3xl"></div>

        <div class="container mx-auto px-6 relative z-10">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                
                <div class="reveal">
                    <span class="inline-block py-1 px-3 rounded-lg bg-white border border-slate-200 text-brand-blue text-xs font-bold uppercase tracking-widest mb-6 shadow-sm">
                        Reserva Tu Experiencia
                    </span>
                    
                    <h2 class="font-serif text-5xl md:text-6xl font-bold text-brand-dark mb-6 leading-tight">
                        Tu mesa ideal te <br>
                        <span class="relative inline-block">
                            está esperando
                            <svg class="absolute w-full h-3 -bottom-1 left-0 text-brand-red opacity-30" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 5 Q 50 10 100 5" stroke="currentColor" stroke-width="8" fill="none" /></svg>
                        </span>
                    </h2>
                    
                    <p class="text-lg text-slate-600 mb-8 leading-relaxed">
                        Olvídate de las esperas. Gestionamos tu reserva al instante para que solo te preocupes de disfrutar. Ideal para almuerzos familiares, aniversarios o reuniones de negocios.
                    </p>

                    <div class="grid grid-cols-2 gap-4 mb-10">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm text-brand-red"><i data-lucide="car" class="w-5 h-5"></i></div>
                            <span class="text-sm font-bold text-slate-700">Parking Gratuito</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm text-brand-red"><i data-lucide="wifi" class="w-5 h-5"></i></div>
                            <span class="text-sm font-bold text-slate-700">Wifi Alta Velocidad</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm text-brand-red"><i data-lucide="music" class="w-5 h-5"></i></div>
                            <span class="text-sm font-bold text-slate-700">Música en Vivo</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm text-brand-red"><i data-lucide="baby" class="w-5 h-5"></i></div>
                            <span class="text-sm font-bold text-slate-700">Zona Kids</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ route('client.reservations') }}" class="px-8 py-4 bg-brand-dark text-white font-bold uppercase tracking-widest rounded-xl shadow-xl hover:bg-brand-blue transition-all transform hover:-translate-y-1 flex items-center justify-center gap-3 group">
    <i data-lucide="calendar-days" class="w-5 h-5 group-hover:animate-bounce"></i>
    Reservar Ahora
</a>
                        <a href="tel:+51999000000" class="px-8 py-4 bg-white border border-slate-200 text-slate-700 font-bold uppercase tracking-widest rounded-xl hover:bg-slate-50 transition-colors flex items-center justify-center gap-3">
                            <i data-lucide="phone" class="w-5 h-5"></i> Llamar
                        </a>
                    </div>
                </div>

                <div class="relative reveal delay-200">
                    <div class="relative rounded-3xl overflow-hidden shadow-2xl border-4 border-white">
                        <img src="https://corporacionsirius.com/wp-content/uploads/2019/05/sauce-alto-cieneguilla.jpg" alt="Restaurante Campestre" class="w-full h-[600px] object-cover hover:scale-105 transition-transform duration-700">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>

                    <div class="absolute bottom-8 left-8 right-8 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-lg border border-white/50">
                        <p class="text-xs text-brand-gray font-bold uppercase tracking-wider mb-3">Elige tu ambiente preferido</p>
                        <div class="flex justify-between items-center">
                            <div class="text-center">
                                <i data-lucide="sun" class="w-6 h-6 text-brand-blue mx-auto mb-1"></i>
                                <span class="text-xs font-bold text-brand-dark">Terraza</span>
                            </div>
                            <div class="w-px h-8 bg-slate-200"></div>
                            <div class="text-center">
                                <i data-lucide="trees" class="w-6 h-6 text-green-600 mx-auto mb-1"></i>
                                <span class="text-xs font-bold text-brand-dark">Jardín</span>
                            </div>
                            <div class="w-px h-8 bg-slate-200"></div>
                            <div class="text-center">
                                <i data-lucide="armchair" class="w-6 h-6 text-brand-red mx-auto mb-1"></i>
                                <span class="text-xs font-bold text-brand-dark">Salón</span>
                            </div>
                        </div>
                    </div>

                    <div class="absolute top-6 right-6 bg-brand-red text-white px-4 py-2 rounded-full text-sm font-bold shadow-lg flex items-center gap-2 animate-bounce">
                        <i data-lucide="star" class="w-4 h-4 fill-current"></i> Alta Demanda
                    </div>
                </div>

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

    {{-- FOOTER --}}
    <footer class="bg-[#0b1121] text-white pt-20 pb-10 border-t border-white/5 relative overflow-hidden">
        
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-brand-red to-transparent opacity-50"></div>

        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
                
                <div class="space-y-6">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-brand rounded-lg flex items-center justify-center text-white shadow-lg rotate-3">
                            <i data-lucide="chef-hat" class="w-6 h-6"></i>
                        </div>
                        <span class="font-serif font-bold text-xl tracking-wide">CAMPESTRE CLUB</span>
                    </div>
                    <p class="text-slate-400 text-sm leading-relaxed max-w-xs">
                        Una experiencia gastronómica única donde la tradición culinaria abraza la naturaleza. Tu escape perfecto de la ciudad.
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white hover:border-brand-blue transition-all duration-300 group">
                            <i data-lucide="instagram" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white hover:border-brand-blue transition-all duration-300 group">
                            <i data-lucide="facebook" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:bg-brand-blue hover:text-white hover:border-brand-blue transition-all duration-300 group">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-music-2 group-hover:scale-110 transition-transform"><circle cx="8" cy="18" r="4"/><path d="M12 18V2l7 4"/></svg>
                        </a>
                    </div>
                </div>

                <div>
                    <h4 class="font-bold text-white mb-6 uppercase text-xs tracking-[0.2em]">Explorar</h4>
                    <ul class="space-y-4 text-sm text-slate-400">
                        <li><a href="#hero" class="hover:text-brand-red transition-colors flex items-center gap-2"><span class="w-1 h-1 rounded-full bg-brand-red"></span> Inicio</a></li>
                        <li><a href="#carta" class="hover:text-brand-red transition-colors flex items-center gap-2"><span class="w-1 h-1 rounded-full bg-slate-600"></span> La Carta</a></li>
                        <li><a href="#reservas" class="hover:text-brand-red transition-colors flex items-center gap-2"><span class="w-1 h-1 rounded-full bg-slate-600"></span> Reservas</a></li>
                        <li><a href="#" class="hover:text-brand-red transition-colors flex items-center gap-2"><span class="w-1 h-1 rounded-full bg-slate-600"></span> Eventos Privados</a></li>
                        <li><a href="#" class="hover:text-brand-red transition-colors flex items-center gap-2"><span class="w-1 h-1 rounded-full bg-slate-600"></span> Nosotros</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-bold text-white mb-6 uppercase text-xs tracking-[0.2em]">Visítanos</h4>
                    <ul class="space-y-4 text-sm text-slate-400">
                        <li class="flex items-start gap-3">
                            <i data-lucide="map-pin" class="w-5 h-5 text-brand-blue shrink-0 mt-0.5"></i>
                            <span>Av. Principal Campestre 123,<br>Ate, Lima - Perú</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i data-lucide="phone" class="w-5 h-5 text-brand-blue shrink-0"></i>
                            <span>+51 999 000 000</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i data-lucide="mail" class="w-5 h-5 text-brand-blue shrink-0"></i>
                            <span>reservas@campestre.com</span>
                        </li>
                        <li class="pt-4 border-t border-white/5 mt-4">
                            <div class="flex items-center gap-2 text-white font-bold">
                                <i data-lucide="clock" class="w-4 h-4 text-brand-red"></i> Abierto Hoy:
                            </div>
                            <span class="block mt-1 pl-6">12:00 PM - 10:00 PM</span>
                        </li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-bold text-white mb-6 uppercase text-xs tracking-[0.2em]">Novedades</h4>
                    <p class="text-slate-400 text-sm mb-4">Suscríbete para recibir promociones exclusivas y descuentos de cumpleaños.</p>
                    <form class="space-y-3">
                        <input type="email" placeholder="Tu correo electrónico" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-blue transition-colors placeholder:text-slate-600">
                        <button class="w-full py-3 bg-brand-dark border border-slate-700 hover:bg-white hover:text-black hover:border-white text-white font-bold text-sm uppercase tracking-wider rounded-lg transition-all duration-300">
                            Suscribirme
                        </button>
                    </form>
                </div>

            </div>

            <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500">
                <p>&copy; 2026 Restaurante Campestre Club. Todos los derechos reservados.</p>
                <div class="flex gap-6">
                    <a href="#" class="hover:text-white transition-colors">Términos y Condiciones</a>
                    <a href="#" class="hover:text-white transition-colors">Política de Privacidad</a>
                    <a href="#" class="hover:text-white transition-colors">Libro de Reclamaciones</a>
                </div>
            </div>
        </div>
    </footer>

    {{-- SCRIPTS --}}
    <script>
        lucide.createIcons();
        window.addEventListener('scroll', () => {
            const nav = document.getElementById('mainNav');
            const userArea = document.getElementById('userArea');
            if (window.scrollY > 50) {
                nav.classList.add('nav-scrolled');
                nav.classList.remove('nav-transparent');
                userArea.classList.replace('border-white/20', 'border-slate-200');
            } else {
                nav.classList.add('nav-transparent');
                nav.classList.remove('nav-scrolled');
                userArea.classList.replace('border-slate-200', 'border-white/20');
            }
            revealOnScroll();
        });

        function revealOnScroll() {
            var reveals = document.querySelectorAll(".reveal");
            for (var i = 0; i < reveals.length; i++) {
                var windowHeight = window.innerHeight;
                var elementTop = reveals[i].getBoundingClientRect().top;
                var elementVisible = 150;
                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].classList.add("active");
                }
            }
        }

        function scrollToSection(id) {
            document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
        }

        function scrollContainer(containerId, direction) {
            const container = document.getElementById(containerId);
            const scrollAmount = direction === 'left' ? -350 : 350;
            container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
        }

        function realTimeSearch() {
            const input = document.getElementById('searchInput');
            const filter = input.value.toUpperCase();
            const cards = document.querySelectorAll('.searchable-item');
            const categories = document.querySelectorAll('.category-row');
            const noResults = document.getElementById('noResults');
            let visibleCount = 0;

            cards.forEach(card => {
                const title = card.querySelector('.product-title').innerText;
                const desc = card.querySelector('.product-desc').innerText;
                if (title.toUpperCase().indexOf(filter) > -1 || desc.toUpperCase().indexOf(filter) > -1) {
                    card.style.display = ""; 
                    visibleCount++;
                } else {
                    card.style.display = "none"; 
                }
            });

            categories.forEach(row => {
                const visibleCardsInRow = Array.from(row.querySelectorAll('.searchable-item')).some(c => c.style.display !== "none");
                if(visibleCardsInRow) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            });

            if (visibleCount === 0) noResults.classList.remove('hidden');
            else noResults.classList.add('hidden');
        }

        window.onload = revealOnScroll;
    </script>
@endsection