{{-- Bloc réservation : bouton « Réserver en ligne » (direct, sans commission) mis
     en avant, puis les plateformes (Airbnb / Abritel) en secondaire.
     Variables :
       $dark   (bool)  fond sombre
       $titre  (texte) libellé au-dessus des plateformes
       $direct (bool)  afficher le bouton direct (défaut true ; false sur la page
                       Réservation elle-même pour éviter un lien circulaire). --}}
@php
    $abnb = config('javapax.airbnb');
    $abr  = config('javapax.abritel');
    $dark = $dark ?? false;
    $direct = $direct ?? true;
    $titre = $titre ?? 'Ou retrouvez notre annonce sur';
    $hasPlat = ($abnb && $abnb !== '#') || ($abr && $abr !== '#');
@endphp
@if($direct || $hasPlat)
    <div class="mt-7">
        @if($direct)
            {{-- Achat en ligne favorisé : réservation directe, sans commission. --}}
            <a href="{{ route('reservation') }}"
               class="inline-flex items-center gap-2 bg-leaf text-white px-8 py-3.5 rounded-full font-bold shadow-lg hover:bg-white hover:text-navy transition">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4M16 2v4M3 10h18"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="m9 16 2 2 4-4"/></svg>
                Réserver en ligne, sans commission
            </a>
        @endif
        @if($hasPlat)
            <p class="text-sm {{ $dark ? 'text-white/75' : 'text-stone-500' }} {{ $direct ? 'mt-5' : '' }}">{{ $direct ? 'Ou retrouvez notre annonce sur' : $titre }}</p>
            <div class="mt-3 flex flex-wrap gap-3 justify-center">
                @if($abnb && $abnb !== '#')
                    <a href="{{ $abnb }}" target="_blank" rel="noopener"
                       class="group inline-flex items-center gap-2 bg-white text-[#FF385C] px-5 py-2.5 rounded-full font-semibold shadow-sm ring-1 ring-black/5 hover:shadow-md hover:-translate-y-0.5 transition">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1.5c1.6 0 2.9 1 3.9 2.9.6 1.2 4.6 9.6 5.7 12.2.7 1.7.1 3.6-1.4 4.6-.8.5-1.7.7-2.6.6-1.1-.1-2.1-.7-3-1.5-.6-.6-1.3-1.3-2-2.2l-.6-.7-.6.7c-.7.9-1.4 1.6-2 2.2-.9.8-1.9 1.4-3 1.5-.9.1-1.8-.1-2.6-.6-1.5-1-2.1-2.9-1.4-4.6C3.5 14 7.5 5.6 8.1 4.4 9.1 2.5 10.4 1.5 12 1.5zm0 2c-.7 0-1.3.6-1.9 1.8-.5 1-4.4 9.3-5.5 11.8-.4 1-.1 2 .7 2.5.4.3.9.4 1.4.3.6-.1 1.2-.4 1.8-1 .5-.5 1.1-1.1 1.7-1.9l.7-.9-.5-.8c-.9-1.4-1.5-2.8-1.5-4 0-1.9 1.4-3.3 3.1-3.3s3.1 1.4 3.1 3.3c0 1.2-.6 2.6-1.5 4l-.5.8.7.9c.6.8 1.2 1.4 1.7 1.9.6.6 1.2.9 1.8 1 .5.1 1-.0 1.4-.3.8-.5 1.1-1.5.7-2.5-1.1-2.5-5-10.8-5.5-11.8-.6-1.2-1.2-1.8-1.9-1.8zm0 6.3c-.7 0-1.1.5-1.1 1.3 0 .7.4 1.7 1.1 2.8.7-1.1 1.1-2.1 1.1-2.8 0-.8-.4-1.3-1.1-1.3z"/></svg>
                        Airbnb
                    </a>
                @endif
                @if($abr && $abr !== '#')
                    <a href="{{ $abr }}" target="_blank" rel="noopener"
                       class="group inline-flex items-center gap-2 bg-white text-[#245ABC] px-5 py-2.5 rounded-full font-semibold shadow-sm ring-1 ring-black/5 hover:shadow-md hover:-translate-y-0.5 transition">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9.5 21v-6h5v6"/></svg>
                        Abritel
                    </a>
                @endif
            </div>
        @endif
    </div>
@endif