@php
    $activePage = $activePage ?? '';
@endphp

<!-- Header -->
<header class="header">
    <div class="header-inner">
        <div class="container">
            <div class="inner">
                <div class="row align-items-center">
                    <!-- Logo -->
                    <div class="col-lg-3 col-md-3 col-12">
                        <div class="logo">
                            <a href="{{ route('accueil') }}">
                                <img src="{{ asset('img/logo-iriec/IRIEC_variante.jpg') }}" alt="Logo IRIEC" width="80" height="80" style="margin-top:-9%">
                            </a>
                        </div>
                        <div class="mobile-nav"></div>
                    </div>

                    <!-- Menu principal -->
                    <div class="col-lg-9 col-md-9 col-12">
                        <div class="main-menu">
                            <nav class="navigation">
                                <ul class="nav menu d-flex align-items-center">
                                    <!-- Accueil -->
                                    <li class="{{ $activePage === 'accueil' ? 'active' : '' }}">
                                        <a href="{{ route('accueil') }}">Accueil</a>
                                    </li>

                                    <!-- Sous-menu: A propos de nous -->
                                    <li class="has-dropdown {{ in_array($activePage, ['apropos', 'membres', 'adhesion']) ? 'active' : '' }}">
                                        <a href="#">À propos de nous</a>
                                        <ul class="dropdown">
                                            <li>
                                                <a href="{{ route('apropos') }}">À propos de l'Iriec</a>
                                            </li>
                                            <li>
                                                <a href="{{ route('membres') }}">Membres</a>
                                            </li>
                                            <li>
                                                <a href="{{ route('adhesion') }}">Adhésion</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <!-- Sous-menu: Actualites -->
                                    <li class="has-dropdown {{ in_array($activePage, ['evenements', 'gallerie']) ? 'active' : '' }}">
                                        <a href="#">Actualités</a>
                                        <ul class="dropdown">
                                            <li>
                                                <a href="{{ route('evenements') }}">Nos Événements</a>
                                            </li>
                                            <li>
                                                <a href="{{ route('gallerie') }}">Galerie</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <!-- Contact -->
                                    <li class="{{ $activePage === 'contact' ? 'active' : '' }}">
                                        <a href="{{ route('contact') }}">Contact</a>
                                    </li>

                                    <!-- Boutons OPCC integres dans le menu -->
                                    <div class="opcc-buttons">
                                        <a class="btn text-white" href="{{ route('etudes-opcc') }}" target="_blank">
                                            <i class="fa fa-database"></i> Les etudes OPCC
                                        </a>
                                        <a class="btn text-white" href="{{ route('indicateurs') }}">
                                            <i class="fa fa-line-chart"></i> Indicateurs OPCC
                                        </a>
                                    </div>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>