{{--
    Composant Footer — porte de maquettes/Footer.dc.html
    Pas de props : contenu fixe (colonnes de liens + coordonnees via config/site.php).
    Classes hover dediees dans public/css/site.css :
    .biome-footer__social, .biome-footer__link, .biome-footer__link-strong, .biome-footer__bottom-link

    Classes utilitaires responsive (public/css/mobile.css, exemple de migration
    "decision-free" du lot M0) : .biome-conteneur (padding lateral tablette/mobile)
    et .biome-grille-5 (grille de colonnes -> 2 colonnes en tablette, 1 en mobile).
    Les styles inline restent la source desktop et ne sont pas retires.
--}}
@php
    $colAcheter = [
        ['label' => 'Maisons disponibles', 'href' => route('acheter')],
        ['label' => 'Appartements neufs', 'href' => route('acheter')],
        ['label' => 'Projets en cours', 'href' => route('acheter')],
    ];

    $colInvest = [
        ['label' => 'Estimation gratuite', 'href' => route('vendre-mon-terrain')],
        ['label' => 'Notre démarche', 'href' => route('vendre-mon-terrain')],
        ['label' => 'Terrains recherchés', 'href' => route('vendre-mon-terrain')],
    ];

    $colAbout = [
        ['label' => 'Qui sommes-nous', 'href' => route('qui-sommes-nous')],
        ['label' => 'Contact', 'href' => route('contact')],
        ['label' => 'Emplois', 'href' => route('recrutement')],
        ['label' => 'Partenaires', 'href' => route('partenaires')],
    ];
@endphp

<footer style="background:var(--couleur-bleu-fonce);color:#fff;font-family:var(--police-texte);">
    <div class="biome-conteneur biome-grille-5" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:64px 32px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;">
        <div>
            <div style="display:flex;align-items:center;gap:11px;margin-bottom:18px;">
                <span style="width:42px;height:42px;border-radius:10px;background:var(--couleur-bleu-principal);display:flex;align-items:center;justify-content:center;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 11.2 12 4l9 7.2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.4 10.2V20h13.2v-9.8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.8 20v-4.6h4.4V20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </span>
                <span style="display:flex;flex-direction:column;line-height:1;">
                    <span style="font-family:var(--police-titres);font-weight:800;font-size:22px;color:#fff;letter-spacing:.4px;">BIOME</span>
                    <span style="font-weight:700;font-size:9px;color:var(--couleur-texte-attenue-clair);letter-spacing:3.4px;margin-top:2px;">CONSTRUCTIONS</span>
                </span>
            </div>
            <p style="font-size:var(--taille-texte-carte);line-height:1.7;color:var(--couleur-texte-attenue-clair-fort);max-width:280px;margin:0 0 22px;">Constructeur de maisons et promoteur immobilier en Wallonie.</p>
            <div style="display:flex;gap:10px;">
                <a href="{{ config('site.reseaux.facebook') }}" aria-label="Facebook" class="biome-footer__social" style="width:38px;height:38px;border-radius:var(--rayon-cercle);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background var(--transition-standard);">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M14 9h2.5V6H14c-2 0-3.2 1.3-3.2 3.4V11H8.5v3h2.3v7h3.2v-7h2.4l.4-3h-2.8V9.6c0-.4.3-.6.9-.6Z"/></svg>
                </a>
                <a href="{{ config('site.reseaux.instagram') }}" aria-label="Instagram" class="biome-footer__social" style="width:38px;height:38px;border-radius:var(--rayon-cercle);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background var(--transition-standard);">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4.5" stroke="#fff" stroke-width="2"/><circle cx="12" cy="12" r="3.5" stroke="#fff" stroke-width="2"/><circle cx="16.6" cy="7.4" r="1.1" fill="#fff"/></svg>
                </a>
                <a href="{{ config('site.reseaux.linkedin') }}" aria-label="LinkedIn" class="biome-footer__social" style="width:38px;height:38px;border-radius:var(--rayon-cercle);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background var(--transition-standard);">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M6.5 9H4v11h2.5V9ZM5.2 4.2A1.5 1.5 0 1 0 5.2 7.2 1.5 1.5 0 0 0 5.2 4.2ZM20 13.4c0-2.6-1.4-3.9-3.3-3.9-1.5 0-2.2.8-2.6 1.4V9H11.6c0 .7 0 11 0 11H14v-6.1c0-.3 0-.6.1-.8.3-.6.8-1.3 1.7-1.3 1.2 0 1.7.9 1.7 2.3V20H20v-6.6Z"/></svg>
                </a>
            </div>
        </div>
        <div>
            <h4 style="font-family:var(--police-titres);font-size:var(--taille-footer-titre);font-weight:600;color:#fff;margin:0 0 18px;">Acheter</h4>
            @foreach ($colAcheter as $l)
                <a href="{{ $l['href'] }}" class="biome-footer__link" style="display:block;font-size:var(--taille-footer-texte);color:var(--couleur-texte-attenue-clair-fort);text-decoration:none;margin-bottom:12px;transition:color var(--transition-standard);">{{ $l['label'] }}</a>
            @endforeach
        </div>
        <div>
            <h4 style="font-family:var(--police-titres);font-size:var(--taille-footer-titre);font-weight:600;color:#fff;margin:0 0 18px;">Vendre mon terrain</h4>
            @foreach ($colInvest as $l)
                <a href="{{ $l['href'] }}" class="biome-footer__link" style="display:block;font-size:var(--taille-footer-texte);color:var(--couleur-texte-attenue-clair-fort);text-decoration:none;margin-bottom:12px;transition:color var(--transition-standard);">{{ $l['label'] }}</a>
            @endforeach
        </div>
        <div>
            <h4 style="font-family:var(--police-titres);font-size:var(--taille-footer-titre);font-weight:600;color:#fff;margin:0 0 18px;">L'entreprise</h4>
            @foreach ($colAbout as $l)
                <a href="{{ $l['href'] }}" class="biome-footer__link" style="display:block;font-size:var(--taille-footer-texte);color:var(--couleur-texte-attenue-clair-fort);text-decoration:none;margin-bottom:12px;transition:color var(--transition-standard);">{{ $l['label'] }}</a>
            @endforeach
        </div>
        <div>
            <h4 style="font-family:var(--police-titres);font-size:var(--taille-footer-titre);font-weight:600;color:#fff;margin:0 0 18px;">Contact</h4>
            <div style="font-size:var(--taille-footer-texte);color:var(--couleur-texte-attenue-clair-fort);line-height:1.7;margin-bottom:14px;">{{ config('site.adresse.ligne1') }}<br>{{ config('site.adresse.ligne2') }}</div>
            <a href="tel:{{ config('site.telephone_lien') }}" class="biome-footer__link-strong" style="display:block;font-size:var(--taille-footer-texte);color:#fff;font-weight:700;text-decoration:none;margin-bottom:8px;">{{ config('site.telephone') }}</a>
            <a href="mailto:{{ config('site.email') }}" class="biome-footer__link" style="display:block;font-size:var(--taille-footer-texte);color:var(--couleur-texte-attenue-clair-fort);text-decoration:none;">{{ config('site.email') }}</a>
        </div>
    </div>
    <div style="border-top:1px solid rgba(255,255,255,.1);">
        <div class="biome-conteneur" style="max-width:var(--largeur-conteneur);margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
            <span style="font-size:var(--taille-petite);color:var(--couleur-texte-attenue-clair);">&copy; {{ config('site.copyright_annee') }} Biome Constructions &mdash; Tous droits r&eacute;serv&eacute;s</span>
            <div style="display:flex;gap:26px;">
                <a href="#" class="biome-footer__bottom-link" style="font-size:var(--taille-petite);color:var(--couleur-texte-attenue-clair);text-decoration:none;">Mentions l&eacute;gales</a>
                <a href="#" class="biome-footer__bottom-link" style="font-size:var(--taille-petite);color:var(--couleur-texte-attenue-clair);text-decoration:none;">Politique de confidentialit&eacute;</a>
                <a href="#" onclick="if(window.biomeCookies){window.biomeCookies.ouvrir();}return false;" class="biome-footer__bottom-link" style="font-size:var(--taille-petite);color:var(--couleur-texte-attenue-clair);text-decoration:none;">G&eacute;rer les cookies</a>
            </div>
        </div>
    </div>
</footer>