@extends('layouts.site')

@section('title', 'Réserver - JavaPax au Moulleau')
@section('meta_description', 'Vérifiez les disponibilités en temps réel et envoyez votre demande de réservation pour l\'appartement de vacances JavaPax au Moulleau, à Arcachon.')

@section('content')
    <div class="text-center mb-10">
        <h1 class="text-3xl md:text-4xl font-bold text-navy">Réserver votre séjour</h1>
        <p class="mt-3 text-stone-600 max-w-2xl mx-auto">Réservez <strong>en direct</strong> avec les propriétaires, <strong>sans commission ni intermédiaire</strong> : consultez les disponibilités et envoyez votre demande ci-dessous, réponse rapide.</p>
        {{-- Repère (surtout mobile) : montre que la réservation directe est juste en
             dessous. Avant, les boutons plateformes étaient en tête et captaient le
             clic, les visiteurs ne descendaient pas jusqu'au formulaire direct. --}}
        <a href="#reserver-direct" class="mt-5 inline-flex items-center gap-2 bg-leaf text-white px-6 py-3 rounded-full font-semibold shadow hover:bg-navy transition">
            Réserver en direct ci-dessous
            <svg class="w-4 h-4 animate-bounce" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
        </a>
    </div>

    @if(session('reserved'))
        <div class="max-w-2xl mx-auto bg-teal-50 border border-teal-200 text-teal-800 rounded-xl px-5 py-4 mb-8 text-center">
            ✅ Merci, votre demande de réservation a bien été envoyée ! Nous revenons vers vous très vite pour la confirmer.
        </div>
        {{-- Objectif de conversion Umami : demande de réservation envoyée. --}}
        @push('scripts')
        <script>
            (function fire(n){ if (window.umami) { umami.track('reservation-envoyee'); }
                else if (n < 40) { setTimeout(function(){ fire(n + 1); }, 250); } })(0);
        </script>
        @endpush
    @endif

    <div id="reserver-direct" class="grid lg:grid-cols-2 gap-10 scroll-mt-24">

        {{-- CALENDRIER --}}
        <div>
            <h2 class="text-xl font-bold text-navy mb-4">Disponibilités</h2>
            <div class="flex items-center gap-4 text-sm mb-4">
                <span class="inline-flex items-center gap-1.5"><span class="w-4 h-4 rounded bg-white border border-stone-300"></span> Libre</span>
                <span class="inline-flex items-center gap-1.5"><span class="w-4 h-4 rounded bg-red-200"></span> Occupé</span>
            </div>

            @php
                // 10 mois affichés (2 colonnes x 5 lignes). Généré ici (et non
                // seulement dans le contrôleur) pour un effet immédiat au view:clear,
                // sans dépendre du recyclage OPcache d'un changement de classe.
                $months = [];
                $cur = \Carbon\Carbon::today()->startOfMonth();
                for ($m = 0; $m < 10; $m++) { $months[] = $cur->copy(); $cur->addMonth(); }
            @endphp
            <div class="grid sm:grid-cols-2 gap-6">
                @foreach($months as $month)
                    @php
                        $first = $month->copy()->startOfMonth();
                        $daysInMonth = $month->daysInMonth;
                        $startWeekday = (int) $first->isoWeekday(); // 1=lundi
                    @endphp
                    <div class="bg-white rounded-xl shadow-sm p-4">
                        <div class="font-semibold text-navy text-center mb-2 capitalize">{{ $month->translatedFormat('F Y') }}</div>
                        <div class="grid grid-cols-7 gap-1 text-center text-[11px] text-stone-600 mb-1">
                            @foreach(['L','M','M','J','V','S','D'] as $d)<div>{{ $d }}</div>@endforeach
                        </div>
                        <div class="grid grid-cols-7 gap-1 text-center text-sm">
                            @for($i = 1; $i < $startWeekday; $i++)<div></div>@endfor
                            @for($day = 1; $day <= $daysInMonth; $day++)
                                @php
                                    $date = $first->copy()->day($day);
                                    $key = $date->format('Y-m-d');
                                    $isPast = $date->lt($today);
                                    $isBusy = isset($unavailable[$key]);
                                @endphp
                                @if($isPast)
                                    <div class="py-1 text-stone-500">{{ $day }}</div>
                                @elseif($isBusy)
                                    <div class="py-1 rounded bg-red-200 text-red-800">{{ $day }}</div>
                                @else
                                    <div class="py-1 rounded hover:bg-teal-50 text-stone-700">{{ $day }}</div>
                                @endif
                            @endfor
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- FORMULAIRE --}}
        <div>
            <div class="mb-4">
                <h2 class="text-xl font-bold text-navy">Votre demande de réservation</h2>
                <p class="text-sm text-stone-500 mt-1">Réponse rapide et sans engagement - nous confirmons la disponibilité et le tarif.</p>
            </div>
            @if($errors->any())
                <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 mb-5 text-sm">
                    {{ $errors->first() }}
                </div>
            @endif
            <form x-data="resaForm()" method="POST" action="{{ route('reservation.store') }}" class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6 md:p-7 space-y-6">
                @csrf
                <input type="text" id="f-website" name="website" class="hidden" tabindex="-1" autocomplete="off">

                {{-- Votre séjour --}}
                <div class="space-y-4">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-sea">Votre séjour</p>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label for="f-checkin" class="block text-sm font-medium text-stone-700 mb-1">Arrivée <span class="text-rose-500">*</span></label>
                            <input type="date" id="f-checkin" name="checkin" x-model="checkin" min="{{ $today->format('Y-m-d') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                        </div>
                        <div>
                            <label for="f-checkout" class="block text-sm font-medium text-stone-700 mb-1">Départ <span class="text-rose-500">*</span></label>
                            <input type="date" id="f-checkout" name="checkout" x-model="checkout" min="{{ $today->copy()->addDay()->format('Y-m-d') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label for="f-guests" class="block text-sm font-medium text-stone-700 mb-1">Voyageurs <span class="text-rose-500">*</span></label>
                            <input type="number" id="f-guests" name="guests" x-model.number="guests" min="1" max="6" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                            <p class="text-[11px] text-stone-600 mt-1">Capacité : 6 personnes max.</p>
                        </div>
                        <div>
                            <label for="f-adults" class="block text-sm font-medium text-stone-700 mb-1">dont adultes <span class="text-rose-500">*</span></label>
                            <input type="number" id="f-adults" name="adults" x-model.number="adults" min="1" :max="guests" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                            <p class="text-[11px] text-stone-600 mt-1">≥ 18 ans - pour la taxe de séjour.</p>
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label for="f-bikes" class="block text-sm font-medium text-stone-700 mb-1">Vélos <span class="text-stone-600 font-normal">(facultatif, max 4)</span></label>
                            <input type="number" id="f-bikes" name="bikes" x-model.number="bikes" min="0" max="4"
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                            <p class="text-[11px] text-stone-600 mt-1">20 €/vélo sem. 1 · −50 % sem. 2 · offerts dès la sem. 3.</p>
                        </div>
                    </div>
                    <p class="text-[11px] text-stone-600">Séjour minimum : <strong>7 nuits</strong> en juillet-août (jusqu'à 3 semaines), <strong>5 nuits</strong> en mai-juin, <strong>3 nuits</strong> le reste de l'année. <span class="text-emerald-600 font-medium">Remise longue durée : −10 % dès 15 nuits, −15 % dès 21 nuits.</span></p>
                    {{-- Code promo (ex. Famille 2027 = -20 % sur la location). --}}
                    <div>
                        <label for="f-promo" class="block text-sm font-medium text-stone-700 mb-1">Code promo <span class="text-stone-600 font-normal">(facultatif)</span></label>
                        <input id="f-promo" name="promo" x-model="promo" value="{{ old('promo', request('promo')) }}" placeholder="Ex. Famille 2027"
                               class="w-full rounded-lg px-3 py-2.5 border focus:ring-2 focus:ring-sea focus:border-sea"
                               :class="promoTyped ? (promoOk ? 'border-leaf ring-1 ring-leaf/40' : 'border-amber-300') : 'border-stone-300'">
                        <p class="text-[11px] mt-1" x-show="promoTyped" x-cloak
                           :class="promoOk ? 'text-emerald-700 font-semibold' : 'text-rose-700'"
                           x-text="promoOk ? '✅ Code valide : −20 % appliqué sur la location.' : 'Code non reconnu.'"></p>
                    </div>
                    {{-- Récapitulatif en direct --}}
                    <template x-if="nights > 0">
                        <div class="rounded-xl border border-stone-200 bg-stone-50/70 p-4 space-y-1.5 text-sm">
                            <p class="font-semibold text-navy first-letter:uppercase" x-text="frDate(checkin) + '  →  ' + frDate(checkout)"></p>
                            <div class="flex justify-between text-stone-500"><span x-text="guests + ' voyageur' + (guests>1?'s':'')"></span><span x-text="adults + ' adulte' + (adults>1?'s':'') + (children>0 ? ', ' + children + ' enfant' + (children>1?'s':'') : '')"></span></div>
                            <div class="flex justify-between"><span class="text-stone-500"><span x-text="nights"></span> nuit<span x-show="nights>1">s</span> <span class="text-stone-600" x-text="season ? '· '+season.name : ''"></span></span><span class="text-navy font-medium"><span x-text="eur(accommodation)"></span> €</span></div>
                            <template x-if="discount > 0"><div class="flex justify-between text-emerald-600"><span x-text="'Remise longue durée −'+(discountRate*100)+'%'"></span><span x-text="'−'+eur(discount)+' €'"></span></div></template>
                            <template x-if="promoDiscount > 0"><div class="flex justify-between text-emerald-700 font-semibold"><span>🎁 Code Famille 2027 −20%</span><span x-text="'−'+eur(promoDiscount)+' €'"></span></div></template>
                            <template x-if="discount === 0 && nights > 0 && nights < 15"><p class="text-[11px] text-emerald-600">💡 −10 % dès 15 nuits, −15 % dès 21 nuits.</p></template>
                            <template x-if="bikeCost > 0"><div class="flex justify-between"><span class="text-stone-500" x-text="bikes + ' vélo' + (bikes>1?'s':'') + (weeks>=3 ? ' · offerts dès sem. 3 🎁' : (weeks>=2 ? ' · sem. 2 −50 %' : ''))"></span><span class="text-navy font-medium" x-text="'+ '+eur(bikeCost)+' €'"></span></div></template>
                            <div class="flex justify-between"><span class="text-stone-500" x-text="'Taxe de séjour (' + adults + ' adulte' + (adults>1?'s':'') + (children>0 ? ' · enfants exonérés' : '') + ')'"></span><span class="text-navy font-medium"><span x-text="taxeStr"></span> €</span></div>
                            <div class="flex justify-between border-t border-stone-200 pt-1.5 mt-1"><span class="font-bold text-navy">Total estimé</span><span class="font-bold text-navy text-base"><span x-text="eur(Math.round(total))"></span> €</span></div>
                            <template x-if="busy"><p class="mt-1 rounded-lg bg-rose-50 px-2.5 py-1.5 text-rose-700 font-semibold">❌ Ces dates sont déjà réservées - vous pouvez tout de même nous envoyer votre demande, nous vous proposerons des dates proches.</p></template>
                            <template x-if="tooShort"><p class="mt-1 rounded-lg bg-amber-50 px-2.5 py-1.5 text-amber-800 font-semibold" x-text="'⚠️ Séjour minimum de '+minNights+' nuits sur cette période.'"></p></template>
                            <template x-if="tooLong"><p class="mt-1 rounded-lg bg-amber-50 px-2.5 py-1.5 text-amber-800 font-semibold">⚠️ En juillet-août, séjour limité à 3 semaines (21 nuits).</p></template>
                            <template x-if="!busy && !tooShort && !tooLong"><p class="mt-1 text-emerald-600 font-semibold">✅ Dates disponibles</p></template>
                        </div>
                    </template>
                </div>

                {{-- Vos coordonnées --}}
                <div class="space-y-4 pt-2 border-t border-stone-100">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-sea pt-2">Vos coordonnées</p>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label for="f-name" class="block text-sm font-medium text-stone-700 mb-1">Nom <span class="text-rose-500">*</span></label>
                            <input id="f-name" name="name" x-model="name" value="{{ old('name') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                        </div>
                        <div>
                            <label for="f-email" class="block text-sm font-medium text-stone-700 mb-1">Email <span class="text-rose-500">*</span></label>
                            <input type="email" id="f-email" name="email" x-model="email" value="{{ old('email') }}" required
                                   class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                        </div>
                    </div>
                    <div>
                        <label for="f-phone" class="block text-sm font-medium text-stone-700 mb-1">Téléphone</label>
                        <input id="f-phone" name="phone" x-model="phone" value="{{ old('phone') }}"
                               class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">
                    </div>
                    <div>
                        <label for="f-message" class="block text-sm font-medium text-stone-700 mb-1">Message</label>
                        <textarea id="f-message" name="message" rows="3" x-model="message"
                                  class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea">{{ old('message') }}</textarea>
                    </div>
                </div>

                <button type="submit" class="glow-cta w-full bg-sea hover:bg-navy text-white font-semibold px-6 py-3.5 rounded-full shadow transition">
                    Envoyer ma demande de réservation
                </button>

                {{-- Séparateur --}}
                <div class="flex items-center gap-3 text-xs text-stone-600">
                    <span class="flex-1 h-px bg-stone-200"></span>ou réponse immédiate<span class="flex-1 h-px bg-stone-200"></span>
                </div>

                {{-- WhatsApp --}}
                <a :href="waLink" target="_blank" rel="noopener"
                   class="flex items-center justify-center gap-2.5 w-full bg-[#25D366] hover:bg-[#1da851] text-white font-semibold px-6 py-3.5 rounded-full shadow transition">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.207zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
                    Discuter sur WhatsApp
                </a>
                <p class="text-xs text-stone-600 text-center">Demande sans engagement - taxe de séjour : {{ number_format(config('javapax.taxe_sejour.avant'), 2, ',', ' ') }} €/adulte/nuit ({{ number_format(config('javapax.taxe_sejour.depuis'), 2, ',', ' ') }} € pour les séjours dès {{ config('javapax.taxe_sejour.annee') }}, meublé classé 3★).</p>

                <script>
                function resaForm () {
                    var BUSY = {};
                    @json(array_keys($unavailable)).forEach(function (d) { BUSY[d] = true; });
                    return {
                        checkin: '{{ old('checkin', request('checkin')) }}',
                        checkout: '{{ old('checkout', request('checkout')) }}',
                        guests: {{ (int) old('guests', 2) }},
                        adults: {{ (int) old('adults', 2) }},
                        bikes: {{ (int) old('bikes', 0) }},
                        name: @json(old('name', '')),
                        email: @json(old('email', '')),
                        phone: @json(old('phone', '')),
                        message: @json(old('message', '')),
                        promo: @json(old('promo', request('promo', ''))),
                        taxeCfg: @json(config('javapax.taxe_sejour')),

                        // Taxe de séjour : taux selon l'année d'arrivée (1,90 € jusqu'à 2026, 2,45 € dès 2027).
                        get taxeRate () {
                            var y = this.checkin ? new Date(this.checkin + 'T12:00:00').getFullYear() : new Date().getFullYear();
                            return y >= this.taxeCfg.annee ? this.taxeCfg.depuis : this.taxeCfg.avant;
                        },
                        get taxeRateStr () { return this.taxeRate.toFixed(2).replace('.', ','); },

                        get nights () {
                            if (!this.checkin || !this.checkout) return 0;
                            var n = Math.round((new Date(this.checkout) - new Date(this.checkin)) / 86400000);
                            return n > 0 ? n : 0;
                        },
                        // Tarifs JavaPax (cf. page Tarifs).
                        seasonFor (m) {
                            if (m === 7 || m === 8) return { name: 'Haute saison', rate: 360 };
                            if (m === 4 || m === 5) return { name: 'Printemps',    rate: 220 };
                            if (m === 6 || m === 9) return { name: 'Estival',      rate: 280 };
                            return { name: 'Automne - Hiver', rate: 170 };
                        },
                        // Séjour min/max par mois : juil-août 7→21 nuits, mai-juin 5, reste 3.
                        minFor (m) { if (m === 7 || m === 8) return 7; if (m === 5 || m === 6) return 5; return 3; },
                        maxFor (m) { return (m === 7 || m === 8) ? 21 : null; },
                        get month () { return this.checkin ? new Date(this.checkin + 'T12:00:00').getMonth() + 1 : 0; },
                        get season () { return this.checkin ? this.seasonFor(this.month) : null; },
                        get minNights () { return this.checkin ? this.minFor(this.month) : 3; },
                        get maxNights () { return this.checkin ? this.maxFor(this.month) : null; },
                        get tooShort () { return this.nights > 0 && this.nights < this.minNights; },
                        get tooLong () { return this.maxNights && this.nights > this.maxNights; },
                        get children () { return Math.max(0, (this.guests || 0) - (this.adults || 0)); },
                        get accommodation () { return this.season ? this.nights * this.season.rate : 0; },
                        get discountRate () { if (this.nights >= 21) return 0.15; if (this.nights >= 15) return 0.10; return 0; },
                        get discount () { return Math.round(this.accommodation * this.discountRate); },
                        get location () { return this.accommodation - this.discount; },
                        // Code promo « Famille 2027 » = -20% sur la location (après remise
                        // longue durée). Comparaison insensible à la casse/espaces/accents.
                        get promoOk () { return (this.promo || '').toUpperCase().normalize('NFD').replace(/[^A-Z0-9]/g, '') === 'FAMILLE2027'; },
                        get promoTyped () { return (this.promo || '').trim().length > 0; },
                        get promoRate () { return this.promoOk ? 0.20 : 0; },
                        get promoDiscount () { return Math.round(this.location * this.promoRate); },
                        get locationFinal () { return this.location - this.promoDiscount; },
                        // Vélos : 20 € sem. 1, −50 % sem. 2, offerts dès sem. 3 (max 4, par vélo).
                        get weeks () { return Math.ceil(this.nights / 7); },
                        bikeWeekRate (w) { if (w === 1) return 20; if (w === 2) return 10; return 0; },
                        get bikePerBike () { let p = 0; for (let w = 1; w <= this.weeks; w++) p += this.bikeWeekRate(w); return p; },
                        get bikeCost () { return this.bikes > 0 && this.nights > 0 ? this.bikes * this.bikePerBike : 0; },
                        get taxeNum () { return Math.round((this.adults || 0) * this.nights * this.taxeRate * 100) / 100; },
                        get taxeStr () { return this.taxeNum.toFixed(2).replace('.', ','); },
                        get total () { return this.locationFinal + this.taxeNum + this.bikeCost; },

                        // Une nuit de [checkin, checkout[ tombe-t-elle sur une date occupée ?
                        get busy () {
                            if (!this.checkin || !this.checkout || this.nights <= 0) return false;
                            var d = new Date(this.checkin), end = new Date(this.checkout);
                            while (d < end) { if (BUSY[d.toISOString().slice(0, 10)]) return true; d.setDate(d.getDate() + 1); }
                            return false;
                        },

                        eur (n) { return new Intl.NumberFormat('fr-FR').format(n); },
                        frDate (s) {
                            if (!s) return '';
                            return new Date(s + 'T12:00:00').toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
                        },

                        get waLink () {
                            var L = ['Bonjour Alexandre,', '', 'Voici ma demande pour l\'appartement JavaPax au Moulleau.', ''];
                            if (this.checkin && this.checkout) {
                                L.push('Dates : du ' + this.frDate(this.checkin) + ' au ' + this.frDate(this.checkout));
                                L.push('Durée : ' + this.nights + ' nuit' + (this.nights > 1 ? 's' : '') + (this.season ? ' (' + this.season.name + ')' : ''));
                                L.push('Disponibilité : ' + (this.busy ? 'dates déjà réservées (demande tout de même envoyée)' : 'dates disponibles'));
                                if (this.tooShort) L.push('Remarque : séjour minimum ' + this.minNights + ' nuits sur cette période');
                                if (this.tooLong) L.push('Remarque : juillet-août, 3 semaines maximum (21 nuits)');
                            }
                            L.push('Voyageurs : ' + this.guests + ' (' + this.adults + ' adulte' + (this.adults > 1 ? 's' : '') + (this.children > 0 ? ', ' + this.children + ' enfant' + (this.children > 1 ? 's' : '') : '') + ')');
                            if (this.bikes > 0) L.push('Vélos : ' + this.bikes);
                            if (this.nights > 0 && this.season) {
                                L.push('Location : ' + this.eur(this.location) + ' € (' + this.nights + ' × ' + this.season.rate + ' €' + (this.discount > 0 ? ' −' + (this.discountRate * 100) + '%' : '') + ')');
                                if (this.promoOk) L.push('Code promo Famille 2027 : −20% (−' + this.eur(this.promoDiscount) + ' €)');
                                if (this.bikeCost > 0) L.push('Vélos : ' + this.eur(this.bikeCost) + ' € (' + this.bikes + ' vélo' + (this.bikes > 1 ? 's' : '') + ')');
                                L.push('Taxe de séjour : ' + this.taxeStr + ' € (' + this.adults + ' × ' + this.nights + ' × ' + this.taxeRateStr + ' €, enfants exonérés)');
                                L.push('Total estimé : ' + this.eur(Math.round(this.total)) + ' €');
                            }
                            L.push('');
                            if (this.name) L.push('Nom : ' + this.name);
                            if (this.email) L.push('Email : ' + this.email);
                            if (this.phone) L.push('Téléphone : ' + this.phone);
                            if (this.message) L.push('Message : ' + this.message);
                            return 'https://wa.me/33647353370?text=' + encodeURIComponent(L.join('\n'));
                        },
                    };
                }
                </script>
            </form>
        </div>
    </div>

    {{-- Plateformes reléguées EN BAS : la réservation directe (sans commission)
         est la voie principale. Placées ici, elles ne captent plus le clic avant
         que le visiteur ait vu le formulaire direct. --}}
    <div class="max-w-2xl mx-auto mt-14 pt-8 border-t border-stone-100 text-center">
        @include('partials.plateformes', ['direct' => false, 'titre' => 'Vous préférez passer par une plateforme ? (commission incluse)'])
    </div>
@endsection