{{--
    Composant Header — porte de maquettes/Header.dc.html
    Prop : active (string) — cle de l'onglet actif dans la navigation.
    Valeurs possibles (issues de la logique DCLogic de la maquette) :
    '', 'acheter', 'investir', 'terrain', 'about', 'actus', 'contact',
    'emplois', 'partenaires'.

    Deux zones de navigation :
    - nav du haut (topItems) : Contact, Emplois, Notre entreprise, Partenaires & Sous-traitants
    - nav principale (blocks) : ACHETER, VENDRE MON TERRAIN, avec logo au centre

    Etats actifs/hover portes en classes CSS (voir public/css/site.css) :
    .biome-header__top-link, .biome-header__block

    LOT MOBILE M1 (decision client 2026-07-03) : en dessous de 1024px, la nav
    desktop (nav du haut + nav principale) est masquee via
    .biome-masquer-tablette-mobile et remplacee par un bandeau logo + bouton
    burger (.biome-visible-mobile), qui ouvre un tiroir plein ecran listant
    les memes routes. Le desktop (>1024px) reste strictement inchange : voir
    docs/mobile-strategie.md.
--}}
@props(['active' => ''])

@php
    // Reproduction fidele de la logique DCLogic de la maquette (methode renderVals)
    $topItems = [
        ['key' => 'contact', 'label' => 'Contact', 'href' => route('contact')],
        ['key' => 'emplois', 'label' => 'Emplois', 'href' => route('recrutement')],
        ['key' => 'about', 'label' => 'Notre entreprise', 'href' => route('qui-sommes-nous')],
        ['key' => 'partenaires', 'label' => 'Partenaires & Sous-traitants', 'href' => route('partenaires')],
    ];

    $blockDefs = [
        [
            'key' => 'acheter',
            'label' => 'ACHETER',
            'href' => route('acheter'),
            'icon' => 'M3 11.2 12 4l9 7.2M5.4 10.2V20h13.2v-9.8M9.8 20v-4.6h4.4V20',
        ],
        [
            'key' => 'terrain',
            'label' => 'VENDRE MON TERRAIN',
            'href' => route('vendre-mon-terrain'),
            'icon' => 'M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11ZM12 12.4a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z',
        ],
    ];
@endphp

<header style="position:sticky;top:0;z-index:50;background:#ffffff;border-bottom:1px solid var(--couleur-bordure-header);box-shadow:var(--ombre-legere);">
    <div class="biome-header__conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:0 var(--padding-lateral-conteneur);">
        {{-- Nav du haut (desktop uniquement sous 1024px, voir mobile.css) --}}
        <nav class="biome-masquer-tablette-mobile" style="display:flex;justify-content:flex-end;align-items:center;gap:26px;padding-top:14px;padding-right:0;margin-right:-32px;">
            @foreach ($topItems as $item)
                <a
                    href="{{ $item['href'] }}"
                    class="biome-header__top-link"
                    style="font-family:var(--police-texte);font-size:var(--taille-nav);font-weight:700;text-decoration:none;color:{{ $item['key'] === $active ? 'var(--couleur-bleu-principal)' : 'var(--couleur-texte-fonce)' }};white-space:nowrap;transition:color var(--transition-standard);"
                >{{ $item['label'] }}</a>
            @endforeach
        </nav>
        <div class="biome-header__ligne-principale" style="display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:108px;">
            <a href="{{ route('accueil') }}" class="biome-header__logo" style="display:flex;align-items:center;text-decoration:none;justify-self:start;margin-left:24px;">
                <img src="{{ asset('images/biome-logo.png') }}" alt="Biome Constructions" style="height:90px;width:auto;display:block;">
            </a>
            {{-- Nav principale (desktop uniquement sous 1024px, voir mobile.css) --}}
            <nav class="biome-masquer-tablette-mobile" style="justify-self:center;display:flex;align-items:stretch;border:1px solid var(--couleur-bordure-nav);border-radius:var(--rayon-nav);overflow:hidden;box-shadow:var(--ombre-nav);">
                @foreach ($blockDefs as $i => $b)
                    @php
                        $isOn = $b['key'] === $active;
                    @endphp
                    <a
                        href="{{ $b['href'] }}"
                        class="biome-header__block"
                        style="display:flex;align-items:center;gap:14px;padding:18px 40px;text-decoration:none;border-left:{{ $i === 0 ? 'none' : '1px solid var(--couleur-bordure-header)' }};background:{{ $isOn ? 'var(--couleur-fond-survol-bleu-clair)' : '#fff' }};transition:background var(--transition-standard);"
                    >
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="{{ $b['icon'] }}"/></svg>
                        <span style="font-family:var(--police-titres);font-size:var(--taille-nav);font-weight:700;letter-spacing:.6px;color:{{ $isOn ? 'var(--couleur-bleu-principal)' : 'var(--couleur-texte-fonce)' }};white-space:nowrap;">{{ $b['label'] }}</span>
                    </a>
                @endforeach
            </nav>

            {{--
                Bandeau mobile/tablette (<=1024px) : bouton burger a droite.
                .biome-visible-mobile : cache par defaut en desktop (regle
                min-width:1025px, seule exception documentee de mobile.css),
                visible en tablette/mobile. Cible tactile >=44px.
            --}}
            <button
                type="button"
                class="biome-visible-mobile"
                data-ouvre-menu-burger
                aria-expanded="false"
                aria-controls="biome-tiroir-menu"
                aria-label="Ouvrir le menu"
                style="justify-self:end;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:8px;background:transparent;border:none;cursor:pointer;padding:0;"
            >
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-texte-fonce)" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                    <path d="M4 7h16M4 12h16M4 17h16"/>
                </svg>
            </button>
        </div>
    </div>

    {{--
        Tiroir plein ecran mobile/tablette (<=1024px). N'existe pas dans la
        maquette desktop : masque par defaut en desktop via .biome-visible-mobile
        (regle min-width:1025px de mobile.css), affichage pilote en JS
        (initMenuBurger dans site.js) sous 1024px.
        Ordre demande (decision client 2026-07-03) : ACHETER, VENDRE MON
        TERRAIN (mis en avant, style bouton), puis Contact, Emplois, Notre
        entreprise, Partenaires & Sous-traitants. Memes routes que le header
        desktop ($blockDefs / $topItems ci-dessus).
    --}}
    <div
        id="biome-tiroir-menu"
        class="biome-visible-mobile"
        data-tiroir-menu-burger
        role="dialog"
        aria-modal="true"
        aria-label="Menu de navigation"
        style="display:none;position:fixed;inset:0;z-index:60;background:#ffffff;overflow-y:auto;"
    >
        <div style="display:flex;justify-content:flex-end;padding:20px 20px 0;">
            <button
                type="button"
                data-ferme-menu-burger
                aria-label="Fermer le menu"
                style="display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0;"
            >
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-texte-fonce)" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                    <path d="M6 6l12 12M18 6L6 18"/>
                </svg>
            </button>
        </div>

        <nav style="display:flex;flex-direction:column;gap:14px;padding:12px 24px 40px;">
            @foreach ($blockDefs as $i => $b)
                @php
                    $isOn = $b['key'] === $active;
                @endphp
                <a
                    href="{{ $b['href'] }}"
                    style="display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;text-decoration:none;border-radius:var(--rayon-nav);background:{{ $isOn ? 'var(--couleur-fond-survol-bleu-clair)' : 'var(--couleur-bleu-principal)' }};"
                >
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="{{ $isOn ? 'var(--couleur-bleu-principal)' : '#ffffff' }}" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="{{ $b['icon'] }}"/></svg>
                    <span style="font-family:var(--police-titres);font-size:var(--taille-nav);font-weight:700;letter-spacing:.6px;color:{{ $isOn ? 'var(--couleur-bleu-principal)' : '#ffffff' }};">{{ $b['label'] }}</span>
                </a>
            @endforeach

            <div style="height:1px;background:var(--couleur-bordure-header);margin:10px 0;"></div>

            @foreach ($topItems as $item)
                <a
                    href="{{ $item['href'] }}"
                    style="display:flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--police-texte);font-size:var(--taille-nav);font-weight:700;color:{{ $item['key'] === $active ? 'var(--couleur-bleu-principal)' : 'var(--couleur-texte-fonce)' }};"
                >{{ $item['label'] }}</a>
            @endforeach
        </nav>
    </div>
</header>