<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Pirras\'Associe')</title>
    <meta name="description" content="@yield('meta_description', 'Pirras\'Associe')">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/public-layout.css') }}">
    @stack('styles')
</head>
<body>
    @php
    $isHome = request()->is('/');
    $isServicePage = request()->is('centrale-achat')
    || request()->is('logistique-groupage')
    || request()->is('centrale-vente-abidjan')
    || request()->is('china-business-trip');
    @endphp
    <nav>
        <div class="container nav-wrap">
            <a class="brand" href="/">
                <img src="{{ asset('images/logo.jpg') }}" alt="Pirras'Associe" class="brand-logo">
            </a>
            <button type="button" class="nav-mobile-toggle" id="navMobileToggle" aria-expanded="false" aria-controls="mainNavLinks" aria-label="Ouvrir le menu">
                <span aria-hidden="true"></span>
            </button>
            <div class="nav-links" id="mainNavLinks">
                <a href="/" data-home-nav="accueil" class="{{ (($activeNav ?? '') === 'accueil' || $isHome) ? 'is-active' : '' }}">Accueil</a>
                <a href="/a-propos" class="{{ ($activeNav ?? '') === 'a-propos' ? 'is-active' : '' }}">A propos</a>
                <div class="nav-dropdown" id="servicesDropdown">
                    <button class="nav-dropdown-toggle {{ $isServicePage ? 'is-active' : '' }}" id="servicesDropdownToggle" aria-expanded="false" aria-controls="servicesDropdownMenu">Services</button>
                    <div class="nav-dropdown-menu" id="servicesDropdownMenu">
                        <a href="/centrale-achat">Centrale d'achat</a>
                        <a href="/logistique-groupage">Logistique et groupage</a>
                        <a href="/centrale-vente-abidjan">Centrale de vente</a>
                        <a href="/china-business-trip">China Business Trip</a>
                    </div>
                </div>
                <a href="/secteurs" class="{{ ($activeNav ?? '') === 'secteurs' ? 'is-active' : '' }}">Secteurs</a>
                <a href="/ressources" class="{{ ($activeNav ?? '') === 'ressources' ? 'is-active' : '' }}">Ressources</a>
                <a href="/#temoignages" data-home-nav="temoignages">Témoignages</a>
                <a href="/#process" data-home-nav="process">Comment ça marche ?</a>
                <a href="/contact" class="{{ ($activeNav ?? '') === 'contact' ? 'is-active' : '' }}">Contact</a>
            </div>
        </div>
    </nav>

    @yield('content')

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="/" aria-label="Pirras'Associe">
                        <img src="{{ asset('images/logo.jpg') }}" alt="Pirras'Associe" class="footer-logo">
                    </a>
                    <p>Votre partenaire strategique pour developper votre activite import-export entre la Chine et l'Afrique francophone.</p>
                </div>
                <div class="footer-col">
                    <h4>Services</h4>
                    <a href="/centrale-achat">Centrale d'achat</a>
                    <a href="/logistique-groupage">Logistique &amp; groupage</a>
                    <a href="/centrale-vente-abidjan">Centrale de vente</a>
                    <a href="/china-business-trip">China Business Trip</a>
                </div>
                <div class="footer-col">
                    <h4>Ressources</h4>
                    <a href="/ressources?section=blog">Blog</a>
                    <a href="/ressources?section=guides">Guides pratiques</a>
                    <a href="/ressources?section=actualites">Actualités</a>
                    <a href="/#temoignages">Témoignages</a>
                </div>
                <div class="footer-col">
                    <h4>Entreprise</h4>
                    <a href="/a-propos">A propos</a>
                    <a href="/#process">Comment ça marche ?</a>
                    <a href="/contact">Contact</a>
                    <a href="#javascript:void(0);">Mentions légales</a>
                    <a href="/admin" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-user">Administration</i></a>
                </div>
            </div>
            <div class="footer-bottom"><span>© 2026 Pirras'Associe - Tous droits reserves - Designed by <a href="https://softsys.ci/" target="_blank" rel="noopener noreferrer">Softsys</a></span><span>Chine - Afrique - Business</span></div>
        </div>
    </footer>

    <a class="whatsapp-float" href="https://wa.me/22500000000?text=Bonjour%2C%20je%20souhaite%20un%20accompagnement." target="_blank" rel="noopener noreferrer" aria-label="Contacter sur WhatsApp">
        <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.52 3.48A11.8 11.8 0 0 0 12.07 0C5.55 0 .24 5.31.24 11.83c0 2.08.54 4.11 1.56 5.9L0 24l6.45-1.69a11.79 11.79 0 0 0 5.62 1.43h.01c6.52 0 11.83-5.31 11.83-11.83 0-3.16-1.23-6.12-3.39-8.43Zm-8.45 18.3h-.01a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.83 1 1.02-3.74-.23-.38a9.85 9.85 0 0 1-1.51-5.24c0-5.44 4.42-9.86 9.86-9.86 2.63 0 5.11 1.02 6.97 2.89a9.8 9.8 0 0 1 2.88 6.97c0 5.44-4.42 9.85-9.86 9.85Zm5.41-7.39c-.3-.15-1.78-.88-2.05-.98-.28-.1-.48-.15-.68.15-.2.3-.78.98-.95 1.18-.18.2-.35.22-.65.08-.3-.15-1.26-.46-2.4-1.47-.89-.79-1.49-1.77-1.67-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.63-.93-2.24-.24-.58-.49-.5-.68-.5h-.58c-.2 0-.53.08-.8.38-.28.3-1.05 1.03-1.05 2.5s1.08 2.88 1.23 3.08c.15.2 2.12 3.24 5.13 4.54.72.31 1.28.5 1.72.64.72.23 1.37.2 1.88.12.57-.08 1.78-.73 2.03-1.44.25-.7.25-1.3.17-1.43-.08-.13-.28-.2-.58-.35Z" />
        </svg>
    </a>

    <script>
        const navMobileToggle = document.getElementById("navMobileToggle");
        const mainNavLinks = document.getElementById("mainNavLinks");
        if (navMobileToggle && mainNavLinks) {
            navMobileToggle.addEventListener("click", (event) => {
                event.stopPropagation();
                const isOpen = mainNavLinks.classList.toggle("open");
                navMobileToggle.setAttribute("aria-expanded", String(isOpen));
            });
        }

        const servicesDropdown = document.getElementById("servicesDropdown");
        const servicesDropdownToggle = document.getElementById("servicesDropdownToggle");
        if (servicesDropdown && servicesDropdownToggle) {
            servicesDropdownToggle.addEventListener("click", (event) => {
                event.stopPropagation();
                const isOpen = servicesDropdown.classList.toggle("open");
                servicesDropdownToggle.setAttribute("aria-expanded", String(isOpen));
            });
        }
        document.addEventListener("click", (event) => {
            if (mainNavLinks ? .classList.contains("open") && !mainNavLinks.contains(event.target) && !navMobileToggle ? .contains(event.target)) {
                mainNavLinks.classList.remove("open");
                navMobileToggle ? .setAttribute("aria-expanded", "false");
            }
            if (servicesDropdown && !servicesDropdown.contains(event.target)) {
                servicesDropdown.classList.remove("open");
                servicesDropdownToggle ? .setAttribute("aria-expanded", "false");
            }
        });
        servicesDropdown ? .querySelectorAll(".nav-dropdown-menu a").forEach((item) => {
            item.addEventListener("click", () => {
                servicesDropdown.classList.remove("open");
                servicesDropdownToggle ? .setAttribute("aria-expanded", "false");
                if (mainNavLinks ? .classList.contains("open")) {
                    mainNavLinks.classList.remove("open");
                    navMobileToggle ? .setAttribute("aria-expanded", "false");
                }
            });
        });
        mainNavLinks ? .querySelectorAll("a").forEach((link) => {
            link.addEventListener("click", () => {
                if (mainNavLinks.classList.contains("open")) {
                    mainNavLinks.classList.remove("open");
                    navMobileToggle ? .setAttribute("aria-expanded", "false");
                }
            });
        });

        // Keep home anchor links visually active based on hash.
        const homeNavLinks = document.querySelectorAll('[data-home-nav]');
        const syncHomeHashActive = () => {
            if (window.location.pathname !== "/") return;
            homeNavLinks.forEach((link) => link.classList.remove("is-active"));
            const hash = window.location.hash || "#accueil";
            if (hash === "#temoignages") {
                document.querySelector('[data-home-nav="temoignages"]') ? .classList.add("is-active");
            } else if (hash === "#process") {
                document.querySelector('[data-home-nav="process"]') ? .classList.add("is-active");
            } else {
                document.querySelector('[data-home-nav="accueil"]') ? .classList.add("is-active");
            }
        };
        window.addEventListener("hashchange", syncHomeHashActive);
        syncHomeHashActive();

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