<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="{{ $lojaAtual?->cor_primaria ?? '#FF6B35' }}">
    <meta name="description" content="{{ $lojaAtual?->descricao ?? 'Peça sua comida favorita com facilidade' }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="app-url" content="{{ config('app.url') }}">

    <title>@yield('titulo', $lojaAtual?->nome ?? config('app.name'))</title>

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
    <!-- Ícones -->
    <link rel="icon" type="image/png" href="/img/icones/icon-192x192.png">
    <link rel="apple-touch-icon" href="/img/icones/icon-192x192.png">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- CSS do sistema -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}?v={{ filemtime(public_path('css/app.css')) }}">

    <!-- Variáveis de cor da loja -->
    <style>
        :root {
            --cor-primaria: {{ $lojaAtual?->cor_primaria ?? '#FF6B35' }};
            --cor-secundaria: {{ $lojaAtual?->cor_secundaria ?? '#2C3E50' }};
        }
    </style>

    @stack('styles')
</head>
<body class="pwa-body" data-loja-id="{{ $lojaAtual?->id ?? '' }}" data-loja-slug="{{ $lojaAtual?->slug ?? '' }}">
    
    <!-- Navegação Desktop -->
    <header class="site-navbar desktop-only">
        <div class="container">
            <div class="site-navbar__brand">
                <a href="{{ url('/') }}" class="site-navbar__logo">
                    @if(isset($lojaAtual) && $lojaAtual->logo)
                        <img src="{{ $lojaAtual->logo_url }}" alt="{{ $lojaAtual->nome }}">
                    @else
                        <span>{{ $lojaAtual->nome ?? config('app.name') }}</span>
                    @endif
                </a>
                <div class="site-navbar__info">
                    <strong>{{ $lojaAtual->nome ?? config('app.name') }}</strong>
                    <small>{{ $lojaAtual->descricao ?? 'Experiência completa de delivery online' }}</small>
                </div>
            </div>

            <nav class="site-navbar__links">
                <a href="{{ isset($lojaAtual) ? route('cliente.loja', $lojaAtual->slug) : url('/') }}" 
                   class="{{ request()->routeIs('cliente.loja') ? 'active' : '' }}">Início</a>
                <a href="{{ route('cliente.lojas') }}" 
                   class="{{ request()->routeIs('cliente.lojas') ? 'active' : '' }}">Restaurantes</a>
                <a href="{{ route('cliente.buscar') }}" 
                   class="{{ request()->routeIs('cliente.buscar') ? 'active' : '' }}">Buscar</a>
                <a href="{{ route('marketing.landing') }}" target="_blank" rel="noopener">Apresentação</a>
                @auth
                <a href="{{ route('cliente.pedidos.index') }}">Pedidos</a>
                @endauth
            </nav>

            <div class="site-navbar__actions">
                @auth
                    <div class="site-navbar__user">
                        <img src="{{ Auth::user()->foto_perfil_url }}" alt="{{ Auth::user()->nome }}">
                        <div>
                            <span>{{ Auth::user()->nome_abreviado }}</span>
                            <small>{{ Auth::user()->email }}</small>
                        </div>
                    </div>
                    <a href="{{ route('cliente.checkout') }}" class="btn btn-primario">
                        <i class="bi bi-bag"></i> Carrinho
                        @if(session('carrinho') && count(session('carrinho')) > 0)
                            <span class="badge">{{ count(session('carrinho')) }}</span>
                        @endif
                    </a>
                    <form action="{{ route('logout') }}" method="POST" style="display: inline;">
                        @csrf
                        <button type="submit" class="btn btn-outline">Sair</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="btn btn-outline">Entrar</a>
                    <a href="{{ route('registro') }}" class="btn btn-primario">Criar conta</a>
                @endauth
            </div>
        </div>
    </header>

    <!-- Header Mobile (mantém o original) -->
    <header class="pwa-header mobile-only" id="pwaHeader">
        <button class="header-btn" onclick="abrirSidebar()" aria-label="Menu">
            <i class="bi bi-list"></i>
        </button>
        
        <div class="header-logo">
            @if(isset($lojaAtual) && $lojaAtual->logo)
                <img src="{{ $lojaAtual->logo_url }}" alt="{{ $lojaAtual->nome }}" class="header-logo-img">
            @endif
            <span class="header-logo-text">{{ $lojaAtual->nome ?? config('app.name') }}</span>
        </div>

        <div class="header-acoes">
            <button class="header-btn" onclick="abrirCarrinho()" aria-label="Carrinho">
                <i class="bi bi-bag fs-5"></i>
                <span class="badge-carrinho" id="badgeCarrinho" style="display:none">0</span>
            </button>
        </div>
    </header>

    <!-- Sidebar Mobile (mantém o original) -->
    <div class="sidebar-overlay mobile-only" id="sidebarOverlay" onclick="fecharSidebar()"></div>
    <aside class="sidebar sidebar-left mobile-only" id="sidebarLeft">
        <div class="sidebar-header">
            <div class="sidebar-user">
                @auth
                <img src="{{ Auth::user()->foto_perfil_url }}" alt="{{ Auth::user()->nome }}" class="sidebar-avatar">
                <div>
                    <div class="sidebar-user-nome">{{ Auth::user()->nome_abreviado }}</div>
                    <div class="sidebar-user-email">{{ Auth::user()->email }}</div>
                </div>
                @else
                <div class="sidebar-guest">
                    <i class="bi bi-person-circle fs-2"></i>
                    <div>
                        <a href="{{ route('login') }}" class="btn btn-sm btn-primario">Entrar</a>
                        <a href="{{ route('registro') }}" class="btn btn-sm btn-outline ms-1">Cadastrar</a>
                    </div>
                </div>
                @endauth
            </div>
            <button class="sidebar-close" onclick="fecharSidebar()">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>

        <nav class="sidebar-nav">
            @if(isset($lojaAtual))
            <a href="{{ route('cliente.loja', $lojaAtual->slug) }}" class="sidebar-link">
                <i class="bi bi-house"></i> Início
            </a>
            @endif
            <a href="{{ route('cliente.lojas') }}" class="sidebar-link">
                <i class="bi bi-shop"></i> Restaurantes
            </a>
            <a href="{{ route('marketing.landing') }}" target="_blank" class="sidebar-link">
                <i class="bi bi-megaphone"></i> Apresentação
            </a>
            @auth
            <a href="{{ route('cliente.pedidos.index') }}" class="sidebar-link">
                <i class="bi bi-bag"></i> Meus Pedidos
            </a>
            <a href="{{ route('perfil.index') }}" class="sidebar-link">
                <i class="bi bi-person"></i> Meu Perfil
            </a>
            @if(Auth::user()->isAdmin() || Auth::user()->isGerente())
            <div class="sidebar-divider"></div>
            <a href="{{ route('admin.dashboard') }}" class="sidebar-link">
                <i class="bi bi-speedometer2"></i> Painel Admin
            </a>
            @endif
            <div class="sidebar-divider"></div>
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="sidebar-link sidebar-link-danger" style="width: 100%; text-align: left; border: none; background: none;">
                    <i class="bi bi-box-arrow-right"></i> Sair
                </button>
            </form>
            @endauth
        </nav>
    </aside>

    <!-- Conteúdo Principal -->
    <main class="main-content">
        @hasSection('breadcrumb')
        <nav class="breadcrumb-desktop desktop-only">
            @yield('breadcrumb')
        </nav>
        @endif
        
        @hasSection('search')
        <div class="search-desktop desktop-only">
            @yield('search')
        </div>
        @endif
        
        <div class="fade-in-desktop">
            @yield('conteudo')
        </div>
    </main>

    <!-- Footer Navigation Mobile (mantém o original) -->
    <nav class="footer-nav mobile-only" id="footerNav">
        <a href="{{ isset($lojaAtual) ? route('cliente.loja', $lojaAtual->slug) : route('cliente.home') }}" 
           class="footer-nav-item {{ request()->routeIs('cliente.loja') || request()->routeIs('cliente.home') ? 'active' : '' }}">
            <i class="bi bi-house"></i>
            <span>Início</span>
        </a>
        <a href="{{ route('cliente.lojas') }}" 
           class="footer-nav-item {{ request()->routeIs('cliente.lojas') ? 'active' : '' }}">
            <i class="bi bi-shop"></i>
            <span>Lojas</span>
        </a>
        <a href="{{ route('cliente.checkout') }}" class="footer-nav-carrinho">
            <div class="footer-carrinho-btn">
                <i class="bi bi-bag-fill"></i>
                <span class="footer-carrinho-badge" id="footerCarrinhoBadge" style="display:none">0</span>
            </div>
        </a>
        <a href="{{ route('cliente.buscar') }}" 
           class="footer-nav-item {{ request()->routeIs('cliente.buscar') ? 'active' : '' }}">
            <i class="bi bi-search"></i>
            <span>Buscar</span>
        </a>
        @auth
        <a href="{{ route('cliente.pedidos.index') }}" 
           class="footer-nav-item {{ request()->routeIs('cliente.pedidos.*') ? 'active' : '' }}">
            <i class="bi bi-clock-history"></i>
            <span>Pedidos</span>
        </a>
        @else
        <a href="{{ route('login') }}" class="footer-nav-item">
            <i class="bi bi-person"></i>
            <span>Entrar</span>
        </a>
        @endauth
    </nav>

    <!-- Footer Desktop -->
    <footer class="footer-desktop desktop-only">
        <div class="container">
            <div>
                <h4>{{ $lojaAtual->nome ?? config('app.name') }}</h4>
                <p>{{ $lojaAtual->descricao ?? 'Experiência completa de delivery online' }}</p>
                @if(isset($lojaAtual) && $lojaAtual->endereco)
                <p><i class="bi bi-geo-alt"></i> {{ $lojaAtual->endereco }}</p>
                @endif
                @if(isset($lojaAtual) && $lojaAtual->telefone)
                <p><i class="bi bi-telephone"></i> {{ $lojaAtual->telefone }}</p>
                @endif
            </div>
            <div>
                <h4>Links Rápidos</h4>
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <a href="{{ route('cliente.lojas') }}">Restaurantes</a>
                    <a href="{{ route('cliente.buscar') }}">Buscar</a>
                    <a href="{{ route('marketing.landing') }}">Apresentação</a>
                    @auth
                    <a href="{{ route('cliente.pedidos.index') }}">Meus Pedidos</a>
                    @endauth
                </div>
            </div>
            <div>
                <h4>Suporte</h4>
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <a href="{{ route('lgpd.termos') }}">Termos de Uso</a>
                    <a href="{{ route('lgpd.politica') }}">Política de Privacidade</a>
                    @if(isset($lojaAtual) && $lojaAtual->whatsapp)
                    <a href="https://wa.me/{{ $lojaAtual->whatsapp }}" target="_blank">
                        <i class="bi bi-whatsapp"></i> WhatsApp
                    </a>
                    @endif
                </div>
            </div>
            <div>
                <h4>Redes Sociais</h4>
                <div style="display: flex; gap: 15px; margin-top: 10px;">
                    @if(isset($lojaAtual) && $lojaAtual->instagram)
                    <a href="{{ $lojaAtual->instagram }}" target="_blank" style="font-size: 1.5rem;">
                        <i class="bi bi-instagram"></i>
                    </a>
                    @endif
                    @if(isset($lojaAtual) && $lojaAtual->facebook)
                    <a href="{{ $lojaAtual->facebook }}" target="_blank" style="font-size: 1.5rem;">
                        <i class="bi bi-facebook"></i>
                    </a>
                    @endif
                </div>
            </div>
        </div>
        <div style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2);">
            <p>&copy; {{ date('Y') }} {{ $lojaAtual->nome ?? config('app.name') }}. Todos os direitos reservados.</p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}?v={{ filemtime(public_path('js/app.js')) }}"></script>
    
    <script>
        // Funções para sidebar mobile (mantém as originais)
        function abrirSidebar() {
            document.getElementById('sidebarLeft').classList.add('ativo');
            document.getElementById('sidebarOverlay').classList.add('ativo');
            document.body.style.overflow = 'hidden';
        }

        function fecharSidebar() {
            document.getElementById('sidebarLeft').classList.remove('ativo');
            document.getElementById('sidebarOverlay').classList.remove('ativo');
            document.body.style.overflow = '';
        }

        // Fechar sidebar ao pressionar ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                fecharSidebar();
            }
        });

        // Animações desktop
        document.addEventListener('DOMContentLoaded', function() {
            if (window.innerWidth >= 992) {
                const elements = document.querySelectorAll('.fade-in-desktop');
                elements.forEach((el, index) => {
                    setTimeout(() => {
                        el.style.opacity = '1';
                        el.style.transform = 'translateY(0)';
                    }, index * 100);
                });
            }
        });
    </script>

    @stack('scripts')
</body>
</html>