@php
    $pagesMap = [
        ['path' => '/', 'label' => 'Inicio'],
        ['path' => '/software-para-farmacias', 'label' => 'Software para farmacias'],
        ['path' => '/facturacion-electronica-farmacias', 'label' => 'Facturacion'],
        ['path' => '/control-inventario-farmacia', 'label' => 'Inventario'],
        ['path' => '/pos-farmacia', 'label' => 'POS'],
        ['path' => '/equipos-para-farmacia', 'label' => 'Equipos'],
        ['path' => '/precios', 'label' => 'Precios'],
        ['path' => '/blog', 'label' => 'Blog'],
        ['path' => '/consultar-comprobante', 'label' => 'Consulta CPE'],
    ];
@endphp

<nav class="nav-main" id="navbar">
    <div class="nav-inner">
        <a href="{{ url('/') }}" class="nav-logo"><img src="{{ asset('logo/tulogo.png') }}" alt="Sysfarma" width="170" height="36"></a>
        <ul class="nav-links">
            @foreach($pagesMap as $navItem)
                <li><a href="{{ url($navItem['path']) }}">{{ $navItem['label'] }}</a></li>
            @endforeach
        </ul>
        <a href="https://wa.me/51916050559?text=Hola%2C%20quiero%20una%20demo%20de%20Sysfarma" target="_blank" rel="noopener noreferrer" class="btn-primary-custom">Solicitar demo</a>
        <button class="mobile-toggle" aria-label="Abrir menu movil" aria-controls="mobileMenu" aria-expanded="false" onclick="document.getElementById('mobileMenu').classList.add('active'); this.setAttribute('aria-expanded','true')"><i class="fas fa-bars" aria-hidden="true"></i></button>
    </div>
</nav>
<div class="mobile-menu" id="mobileMenu" onclick="this.classList.remove('active')">
    <div class="mobile-menu-content" onclick="event.stopPropagation()">
        <button class="mobile-menu-close" aria-label="Cerrar menu movil" onclick="document.getElementById('mobileMenu').classList.remove('active')"><i class="fas fa-times" aria-hidden="true"></i></button>
        <ul class="mobile-menu-links">
            @foreach($pagesMap as $navItem)
                <li><a href="{{ url($navItem['path']) }}">{{ $navItem['label'] }}</a></li>
            @endforeach
        </ul>
    </div>
</div>