{{-- Variables CSS dinámicas --}}
<style>
    :root {
        --color-primario-p1: {{ $colores['color-primario-p1'] ?? '#00264B' }};
        --color-primario-p2: {{ $colores['color-primario-p2'] ?? '#1A4FD3' }};
        --color-primario-p3: {{ $colores['color-primario-p3'] ?? '#4A84F7' }};
        --color-secundario-s1: {{ $colores['color-secundario-s1'] ?? '#E27227' }};
        --color-neutral: {{ $colores['color-neutral'] ?? '#DDE3E8' }};
    }
</style>

<style>
    /* Hover botones de barra desktop con tu neutral */
    .hdr-btn {
        transition: background-color .2s ease, color .2s ease;
    }

    .hdr-btn:hover {
        background-color: var(--color-neutral);
    }

    /* Panel desplegable */
    .menu-panel {
        background-color: #ffffff;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
        border-radius: .375rem;
    }

    /* Links del panel: base gris 700; hover naranja corporativo */
    .menu-link {
        color: #374151;
        transition: background-color .15s ease, color .15s ease;
    }

    .menu-link:hover {
        background-color: color-mix(in srgb, var(--color-secundario-s1) 10%, #ffffff);
        color: var(--color-secundario-s1);
    }

    .link-institucional {
        color: var(--color-neutral);
        transition: color 0.2s;
    }
    .link-institucional:hover {
        color: var(--color-secundario-s1);
    }

</style>



<!-- Header principal -->
<header id="site-header" class="fixed top-0 left-0 right-0 shadow-md z-40 md:pl-20" style="background-color:#ffffff;">
    @php
        // Teléfono para el topbar: desde BD si está disponible, sino placeholder
        $telefonoTopbar = (isset($infoContacto) && !empty($infoContacto->telefono_principal))
            ? $infoContacto->telefono_principal
            : '(+51) 01 900 900 900';

        // Limpia a solo dígitos para el enlace tel:
        $telefonoHref = 'tel:' . preg_replace('/\D+/', '', $telefonoTopbar);

        // WhatsApp desde BD o placeholder
        $whatsappTopbar = (isset($infoContacto) && !empty($infoContacto->whatsapp))
            ? $infoContacto->whatsapp
            : '(+51) 900 900 900';

        // limpiar para wa.me (solo dígitos)
        $whatsappHref = 'https://wa.me/' . preg_replace('/\D+/', '', $whatsappTopbar);
    @endphp

    {{-- TOPBAR FECHA/HORA + TELÉFONO --}}
    <div style="background-color: var(--color-primario-p1);">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between px-4 py-1 sm:py-0 sm:h-8 gap-1 text-[11px] sm:text-xs text-white font-bold">
                <span id="topbar-datetime" class="whitespace-nowrap">
                    {{ $fechaHora ?? '' }}
                </span>

                {{-- Teléfono + WhatsApp --}}
                <div class="flex flex-wrap items-center md:justify-end gap-2 whitespace-nowrap">
                    {{-- Teléfono --}}
                    <a href="{{ $telefonoHref }}" id="topbar-phone"
                       class="flex items-center gap-1 hover:underline">
                        <i data-lucide="phone" class="h-3 w-3"></i>
                        <span>{{ $telefonoTopbar }}</span>
                    </a>

                    <span>-</span>

                    {{-- WhatsApp --}}
                    <a href="{{ $whatsappHref }}" id="topbar-wa"
                       class="flex items-center gap-1 hover:underline"
                       target="_blank" rel="noopener">
                        <i data-lucide="message-circle" class="h-3 w-3"></i>
                        <span>{{ $whatsappTopbar }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- BARRA DE NAVEGACIÓN --}}
    <div class="container mx-auto">
        <div class="flex items-center justify-between h-16 px-4">
            <!-- Logo -->
            <div class="flex items-center space-x-2">
                <a href="{{ url('/') }}">
                    <img src="{{ $siteLogoUrl }}" alt="Logo NOVA" class="h-14 w-auto">
                </a>
            </div>

            <!-- Botón menú móvil -->
            <button
              id="mobile-menu-button"
              class="p-2 md:hidden"
              onclick="toggleMobileMenu()"
              aria-controls="mobile-menu"
              aria-expanded="false"
              aria-label="Abrir menú de navegación"
            >
              <i data-lucide="menu" class="h-6 w-6" id="menu-icon"></i>
              <i data-lucide="x" class="h-6 w-6 hidden" id="close-icon"></i>
            </button>


            <!-- Navegación desktop -->
            <nav class="hidden md:flex items-center space-x-1 text-sm">

                {{-- Inicio --}}
                @if (header_on('Inicio'))
                    <a href="{{ url('/') }}">
                        <button class="px-3 py-2 rounded-md font-medium hdr-btn whitespace-nowrap">Inicio</button>
                    </a>
                @endif

                {{-- Nosotros --}}
                @if (header_on('Nosotros'))
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Nosotros <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                @foreach (submodulos_activos_de('Nosotros') as $s)
                                    @php
                                        $href = sub_url('Nosotros', $s['nombre']);
                                        $blank = sub_blank('Nosotros', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        @if ($blank) target="_blank" @endif
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Programas de estudio --}}
                @if (header_on('Programas de estudio'))
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Programas de estudio <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                @foreach ($programasMenu ?? [] as $p)
                                    <a href="{{ route('programas.show.id', $p->id) }}"
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $p->nombre }}
                                    </a>
                                @endforeach
                                @foreach (submodulos_activos_de('Programas de estudio') as $s)
                                    @php
                                        $href = sub_url('Programas de estudio', $s['nombre']);
                                        $blank = sub_blank('Programas de estudio', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        @if ($blank) target="_blank" @endif
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Admisión y matrícula --}}
                @if (header_on('Admisión y matrícula'))
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Admisión y matrícula <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                @foreach (submodulos_activos_de('Admisión y matrícula') as $s)
                                    @php
                                        $href = sub_url('Admisión y matrícula', $s['nombre']);
                                        $blank = sub_blank('Admisión y matrícula', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        @if ($blank) target="_blank" @endif
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Transparencia --}}
                @if (header_on('Transparencia'))
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Transparencia <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                @foreach (submodulos_activos_de('Transparencia') as $s)
                                    @php
                                        $href = sub_url('Transparencia', $s['nombre']);
                                        $blank = sub_blank('Transparencia', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        @if ($blank) target="_blank" @endif
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Trámite --}}
                @if (header_on('Trámite'))
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Trámite <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                @foreach (submodulos_activos_de('Trámite') as $s)
                                    @php
                                        $href = sub_url('Trámite', $s['nombre']);
                                        $blank = sub_blank('Trámite', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        @if ($blank) target="_blank" @endif
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Servicios --}}
                @if (header_on('Servicios'))
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Servicios <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                @foreach (submodulos_activos_de('Servicios') as $s)
                                    @php
                                        $href = sub_url('Servicios', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        target="_blank"
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Otras páginas --}}
                @if (header_on('Otras páginas'))
                    @php
                        $ya = [];
                        $norm = function ($s) {
                            return \Illuminate\Support\Str::of($s ?? '')
                                ->lower()
                                ->ascii()
                                ->squish()
                                ->__toString();
                        };
                    @endphp
                    <div class="relative group">
                        <button class="px-3 py-2 rounded-md font-medium flex items-center hdr-btn whitespace-nowrap">
                            Otras páginas <i data-lucide="chevron-down" class="ml-1 h-4 w-4"></i>
                        </button>
                        <div
                            class="absolute left-0 mt-1 w-64 rounded-md overflow-hidden z-50 opacity-0 invisible
                        group-hover:opacity-100 group-hover:visible transition-all duration-300 menu-panel">
                            <div class="py-2">
                                {{-- Submódulos --}}
                                @foreach (submodulos_activos_de('Otras páginas') as $s)
                                    @php
                                        $key = $norm($s['nombre']);
                                        if (isset($ya[$key])) {
                                            continue;
                                        }
                                        $ya[$key] = true;
                                        $href = sub_url('Otras páginas', $s['nombre']);
                                        $blank = sub_blank('Otras páginas', $s['nombre']);
                                    @endphp
                                    <a href="{{ $href }}"
                                        @if ($blank) target="_blank" @endif
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $s['nombre'] }}
                                    </a>
                                @endforeach

                                {{-- Links institucionales (sin duplicar nombres) --}}
                                @forelse(($linksInstitucionales ?? collect()) as $link)
                                    @php
                                        $key = $norm($link->nombre);
                                        if (isset($ya[$key])) {
                                            continue;
                                        }
                                        $ya[$key] = true;
                                    @endphp
                                    <a href="{{ $link->enlace }}" target="_blank" rel="noopener"
                                        class="block px-4 py-2 text-sm menu-link">
                                        {{ $link->nombre }}
                                    </a>
                                @empty
                                    <span class="block px-4 py-2 text-sm" style="color:var(--color-neutral);">Sin enlaces</span>
                                @endforelse
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Contáctanos --}}
                @if (header_on('Contáctanos'))
                    <a href="{{ url('/contacto') }}">
                        <button class="px-3 py-2 rounded-md font-medium hdr-btn whitespace-nowrap">Contáctanos</button>
                    </a>
                @endif
            </nav>
        </div>
    </div>
</header>

<!-- Menú móvil -->
<div id="mobile-menu" class="fixed inset-0 z-30 pt-16 md:hidden overflow-y-auto hidden" style="background-color:#ffffff;">
    <div class="p-4">
        <nav class="flex flex-col">

            {{-- Inicio --}}
            @if (header_on('Inicio'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button class="flex items-center justify-between w-full py-4 text-left">
                        <a href="{{ url('/') }}"><span class="font-medium">Inicio</span></a>
                    </button>
                </div>
            @endif

            {{-- Nosotros --}}
            @if (header_on('Nosotros'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button onclick="toggleSubmenu('nosotros')"
                        class="flex items-center justify-between w-full py-4 text-left">
                        <span class="font-medium">Nosotros</span>
                        <i data-lucide="chevron-down" class="h-5 w-5 transition-transform" id="nosotros-chevron"></i>
                    </button>
                    <div id="nosotros-submenu" class="pl-4 pb-2 hidden">
                        @foreach (submodulos_activos_de('Nosotros') as $s)
                            @php
                                $href = sub_url('Nosotros', $s['nombre']);
                                $blank = sub_blank('Nosotros', $s['nombre']);
                            @endphp
                            <a href="{{ $href }}" @if ($blank) target="_blank" @endif
                                class="block py-2 text-sm" style="color:var(--color-primario-p1);">{{ $s['nombre'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Programas de estudio --}}
            @if (header_on('Programas de estudio'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button onclick="toggleSubmenu('programas')"
                        class="flex items-center justify-between w-full py-4 text-left">
                        <span class="font-medium">Programas de estudio</span>
                        <i data-lucide="chevron-down" class="h-5 w-5 transition-transform"
                            id="programas-chevron"></i>
                    </button>
                    <div id="programas-submenu" class="pl-4 pb-2 hidden">
                        @foreach ($programasMenu ?? [] as $p)
                            <a href="{{ route('programas.show.id', $p->id) }}" class="block py-2 text-sm"
                                style="color:var(--color-primario-p1);">{{ $p->nombre }}</a>
                        @endforeach
                        @foreach (submodulos_activos_de('Programas de estudio') as $s)
                            @php
                                $href = sub_url('Programas de estudio', $s['nombre']);
                                $blank = sub_blank('Programas de estudio', $s['nombre']);
                            @endphp
                            <a href="{{ $href }}" @if ($blank) target="_blank" @endif
                                class="block py-2 text-sm" style="color:var(--color-primario-p1);">{{ $s['nombre'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Admisión y matrícula --}}
            @if (header_on('Admisión y matrícula'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button onclick="toggleSubmenu('admision')"
                        class="flex items-center justify-between w-full py-4 text-left">
                        <span class="font-medium">Admisión y matrícula</span>
                        <i data-lucide="chevron-down" class="h-5 w-5 transition-transform" id="admision-chevron"></i>
                    </button>
                    <div id="admision-submenu" class="pl-4 pb-2 hidden">
                        @foreach (submodulos_activos_de('Admisión y matrícula') as $s)
                            @php
                                $href = sub_url('Admisión y matrícula', $s['nombre']);
                                $blank = sub_blank('Admisión y matrícula', $s['nombre']);
                            @endphp
                            <a href="{{ $href }}" @if ($blank) target="_blank" @endif
                                class="block py-2 text-sm" style="color:var(--color-primario-p1);">{{ $s['nombre'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Transparencia --}}
            @if (header_on('Transparencia'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button onclick="toggleSubmenu('transparencia')"
                        class="flex items-center justify-between w-full py-4 text-left">
                        <span class="font-medium">Transparencia</span>
                        <i data-lucide="chevron-down" class="h-5 w-5 transition-transform"
                            id="transparencia-chevron"></i>
                    </button>
                    <div id="transparencia-submenu" class="pl-4 pb-2 hidden">
                        @foreach (submodulos_activos_de('Transparencia') as $s)
                            @php
                                $href = sub_url('Transparencia', $s['nombre']);
                                $blank = sub_blank('Transparencia', $s['nombre']);
                            @endphp
                            <a href="{{ $href }}" @if ($blank) target="_blank" @endif
                                class="block py-2 text-sm" style="color:var(--color-primario-p1);">{{ $s['nombre'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Servicios --}}
            @if (header_on('Servicios'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button onclick="toggleSubmenu('servicios')"
                        class="flex items-center justify-between w-full py-4 text-left">
                        <span class="font-medium">Servicios</span>
                        <i data-lucide="chevron-down" class="h-5 w-5 transition-transform"
                            id="servicios-chevron"></i>
                    </button>
                    <div id="servicios-submenu" class="pl-4 pb-2 hidden">
                        @foreach (submodulos_activos_de('Servicios') as $s)
                            @php
                                $href = sub_url('Servicios', $s['nombre']);
                                $blank = sub_blank('Servicios', $s['nombre']);
                            @endphp
                            <a href="{{ $href }}" @if ($blank) target="_blank" @endif
                                class="block py-2 text-sm" style="color:var(--color-primario-p1);">{{ $s['nombre'] }}</a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Otras páginas --}}
            @if (header_on('Otras páginas'))
                @php
                    $ya = [];
                    $norm = function ($s) {
                        return \Illuminate\Support\Str::of($s ?? '')
                            ->lower()
                            ->ascii()
                            ->squish()
                            ->__toString();
                    };
                @endphp
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button onclick="toggleSubmenu('otras')"
                        class="flex items-center justify-between w-full py-4 text-left">
                        <span class="font-medium">Otras páginas</span>
                        <i data-lucide="chevron-down" class="h-5 w-5 transition-transform" id="otras-chevron"></i>
                    </button>
                    <div id="otras-submenu" class="pl-4 pb-2 hidden">
                        {{-- Submódulos --}}
                        @foreach (submodulos_activos_de('Otras páginas') as $s)
                            @php
                                $key = $norm($s['nombre']);
                                if (isset($ya[$key])) {
                                    continue;
                                }
                                $ya[$key] = true;
                                $href = sub_url('Otras páginas', $s['nombre']);
                                $blank = sub_blank('Otras páginas', $s['nombre']);
                            @endphp
                            <a href="{{ $href }}" @if ($blank) target="_blank" @endif
                                class="block py-2 text-sm" style="color:var(--color-primario-p1);">{{ $s['nombre'] }}</a>
                        @endforeach

                        {{-- Links institucionales --}}
                        @forelse(($linksInstitucionales ?? collect()) as $link)
                            @php
                                $key = $norm($link->nombre);
                                if (isset($ya[$key])) {
                                    continue;
                                }
                                $ya[$key] = true;
                            @endphp

                            <a href="{{ $link->enlace }}" target="_blank" rel="noopener"
                                class="block py-2 text-sm link-institucional" style="color:var(--color-primario-p1);">
                                {{ $link->nombre }}
                            </a>

                        @empty
                            <span class="block py-2 text-sm" style="color:var(--color-primario-p1);">Sin enlaces</span>
                        @endforelse
                    </div>
                </div>
            @endif

            {{-- Contáctanos --}}
            @if (header_on('Contáctanos'))
                <div class="border-b" style="border-color: var(--color-neutral);">
                    <button class="flex items-center justify-between w-full py-4 text-left">
                        <a href="{{ url('/contacto') }}"><span class="font-medium">Contáctanos</span></a>
                    </button>
                </div>
            @endif

        </nav>

    </div>
</div>

{{-- Script para actualizar fecha y hora del topbar --}}
<script>
    function updateTopbarDateTime() {
        const el = document.getElementById('topbar-datetime');
        if (!el) return;

        const now = new Date();

        const optionsDate = {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        };

        const optionsTime = {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        };

        const fecha = now.toLocaleDateString('es-PE', optionsDate);
        const hora = now.toLocaleTimeString('es-PE', optionsTime);

        el.textContent = `${fecha} ${hora}`;
    }

    document.addEventListener('DOMContentLoaded', function () {
        updateTopbarDateTime();
        // actualiza cada minuto
        setInterval(updateTopbarDateTime, 60000);
    });
</script>