@extends('layouts.site')

@section('title', 'Tarifs & calculateur de séjour - JavaPax au Moulleau')
@section('meta_description', 'Tarifs par saison pour l\'appartement JavaPax au Moulleau. Linge et ménage inclus, remises longue durée. Calculez le coût de votre séjour en direct.')

@php
    // Icônes Lucide structurées pour les saisons
    $icons = [
        'sprout' => '<path d="M7 20h10"/><path d="M10 20c5.5-2.5.8-6.4 3-10"/><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z"/><path d="M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z"/>',
        'sun' => '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>',
        'palm' => '<path d="M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4"/><path d="M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-4"/><path d="M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35z"/><path d="M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14"/>',
        'leaf' => '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/>',
    ];
    $svg = fn($n,$s=28) => '<svg xmlns="http://www.w3.org/2000/svg" width="'.$s.'" height="'.$s.'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">'.($icons[$n] ?? '').'</svg>';
@endphp

@section('full')
<div class="relative overflow-hidden bg-gradient-to-br from-sky-100 via-mist to-emerald-50">
    {{-- Halos nacrés modernes --}}
    <div class="pointer-events-none absolute -top-32 -right-32 w-96 h-96 bg-sea/15 rounded-full blur-3xl"></div>
    <div class="pointer-events-none absolute top-1/3 -left-32 w-96 h-96 bg-leaf/15 rounded-full blur-3xl"></div>
    <div class="pointer-events-none absolute bottom-0 right-1/4 w-80 h-80 bg-amber-200/20 rounded-full blur-3xl"></div>

  <div class="relative max-w-6xl mx-auto px-4 py-14">

    {{-- En-tête --}}
    <div class="text-center mb-14">
        <p class="uppercase tracking-[0.25em] text-xs text-sea font-semibold mb-3">Tarifs</p>
        <h1 class="text-3xl md:text-5xl font-bold text-navy">Des tarifs clairs, tout compris</h1>
        <p class="mt-4 text-stone-600 max-w-2xl mx-auto">Le linge de maison et le forfait ménage (150 €) sont <strong>inclus</strong> dans chaque séjour. Profitez de <strong>remises longue durée</strong> et calculez votre séjour en direct.</p>
    </div>

    {{-- Cartes saisons --}}
    <section id="tarifs" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-12 scroll-mt-28">
        @foreach([
            ['sprout','Printemps','Avril – Mai','220','from-emerald-400 to-teal-500'],
            ['sun','Estival','Juin – Septembre','280','from-amber-400 to-orange-500'],
            ['palm','Haute saison','Juillet – Août','360','from-sky-400 to-blue-600'],
            ['leaf','Automne – Hiver','Octobre – Mars','170','from-orange-400 to-rose-500'],
        ] as [$icon,$nom,$periode,$prix,$grad])
            <div class="group relative bg-white rounded-3xl border border-stone-100 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 text-center p-8">
                {{-- Pastille icône dégradée centrée --}}
                <div class="mx-auto -mt-16 w-20 h-20 rounded-2xl bg-gradient-to-br {{ $grad }} text-white flex items-center justify-center shadow-xl ring-4 ring-white group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">
                    {!! $svg($icon, 34) !!}
                </div>
                <h3 class="mt-6 font-bold text-navy text-lg">{{ $nom }}</h3>
                <p class="text-xs text-stone-400 uppercase tracking-wider mt-0.5">{{ $periode }}</p>
                <div class="mt-6 pt-6 border-t border-stone-100">
                    <span class="text-5xl font-extrabold bg-gradient-to-br {{ $grad }} bg-clip-text text-transparent" data-count="{{ $prix }}">{{ $prix }}</span>
                    <div class="text-stone-400 text-sm mt-1">€ / nuit</div>
                </div>
            </div>
        @endforeach
    </section>

    {{-- Bandeau remises --}}
    <section class="grid sm:grid-cols-3 gap-4 mb-16">
        <div class="flex items-center gap-4 bg-emerald-50 border border-emerald-100 rounded-2xl p-5 hover:shadow-md transition">
            <div class="shrink-0 w-12 h-12 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="5" x2="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>
            </div>
            <div>
                <div class="text-xl font-bold text-emerald-600">−10 %</div>
                <div class="text-sm text-stone-500">dès 15 nuits réservées</div>
            </div>
        </div>
        <div class="flex items-center gap-4 bg-emerald-50 border border-emerald-100 rounded-2xl p-5 hover:shadow-md transition">
            <div class="shrink-0 w-12 h-12 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="5" x2="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>
            </div>
            <div>
                <div class="text-xl font-bold text-emerald-600">−15 %</div>
                <div class="text-sm text-stone-500">dès 3 semaines (21 nuits)</div>
            </div>
        </div>
        <div class="flex items-center gap-4 bg-sky-50 border border-sky-100 rounded-2xl p-5 hover:shadow-md transition">
            <div class="shrink-0 w-12 h-12 rounded-xl bg-sky-100 text-sky-600 flex items-center justify-center">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/></svg>
            </div>
            <div>
                <div class="text-xl font-bold text-sky-600">Vélos dégressifs</div>
                <div class="text-sm text-stone-500">sem. 2 à −50 %, sem. 3+ offerte</div>
            </div>
        </div>
    </section>

    {{-- CALCULATEUR --}}
    <section class="grid lg:grid-cols-2 gap-8 items-start"
         x-data="{
            checkin: '{{ request('checkin', '') }}',
            checkout: '{{ request('checkout', '') }}',
            bikes: 0,
            adultes: 2,
            enfants: 0,
            maxVoyageurs: 6,
            taxeIncluse: false,
            taxeCfg: @json(config('javapax.taxe_sejour')),
            displayTotal: 0,
            showForm: false,
            nom: '', prenom: '', email: '', commentaire: '',
            get voyageurs() { return this.adultes + this.enfants; },
            get placesRestantes() { return this.maxVoyageurs - this.voyageurs; },
            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 minimum/maximum 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 minNights() { return this.checkin ? this.minFor(new Date(this.checkin).getMonth()+1) : 3; },
            get maxNights() { return this.checkin ? this.maxFor(new Date(this.checkin).getMonth()+1) : null; },
            get nights() {
                if (!this.checkin || !this.checkout) return 0;
                return Math.max(0, Math.round((new Date(this.checkout) - new Date(this.checkin)) / 86400000));
            },
            get weeks() { return Math.ceil(this.nights / 7); },
            get season() { return this.checkin ? this.seasonFor(new Date(this.checkin).getMonth()+1) : null; },
            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 discountAmount() { return Math.round(this.accommodation * this.discountRate); },
            bikeWeekRate(w) { if (w === 1) return 20; if (w === 2) return 10; return 0; }, // sem1 plein, sem2 -50%, sem3+ offerte
            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 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 taxe() { return this.nights > 0 ? Math.round(this.adultes * this.nights * this.taxeRate * 100) / 100 : 0; },
            get total() { return this.accommodation - this.discountAmount + this.bikeCost + (this.taxeIncluse ? this.taxe : 0); },
            get warning() {
                if (this.nights <= 0 || !this.season) return null;
                if (this.nights < this.minNights) return 'Séjour minimum de ' + this.minNights + ' nuits sur cette période.';
                if (this.maxNights && this.nights > this.maxNights) return 'En juillet-août, le séjour est limité à 3 semaines (21 nuits maximum).';
                return null;
            },
            get valid() { return this.nights > 0 && this.season && !this.warning; },
            fmt(n) { return new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 0 }).format(n); },
            fmt2(n) { return new Intl.NumberFormat('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).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' }); },
            // Lignes de récapitulatif du devis (mail + WhatsApp)
            recapLines() {
                let L = [];
                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('Voyageurs : ' + this.voyageurs + ' (' + this.adultes + ' adulte' + (this.adultes>1?'s':'') + (this.enfants>0 ? ', ' + this.enfants + ' enfant' + (this.enfants>1?'s':'') : '') + ')');
                if (this.bikes > 0) L.push('Vélos : ' + this.bikes + ' (' + this.fmt(this.bikeCost) + ' €)');
                L.push('Location : ' + this.fmt(this.accommodation - this.discountAmount) + ' €' + (this.discountAmount>0 ? ' (remise −' + Math.round(this.discountRate*100) + '%)' : ''));
                L.push('Taxe de séjour : ' + this.fmt2(this.taxe) + ' € ' + (this.taxeIncluse ? '(incluse)' : '(à régler à part)'));
                L.push('Total : ' + this.fmt2(this.total) + ' €');
                return L;
            },
            get recapText() { return this.recapLines().join('\n'); },
            get messageHidden() { return this.recapText + (this.commentaire ? '\n\nMessage : ' + this.commentaire : ''); },
            get waDevis() {
                let L = ['Bonjour Alexandre,', '', 'Voici ma demande pour l\'appartement JavaPax au Moulleau.', ''];
                L = L.concat(this.recapLines());
                L.push('');
                let id = (this.prenom + ' ' + this.nom).trim();
                if (id) L.push('Nom : ' + id);
                if (this.email) L.push('Email : ' + this.email);
                if (this.commentaire) L.push('Message : ' + this.commentaire);
                return 'https://wa.me/33647353370?text=' + encodeURIComponent(L.join('\n'));
            },
            animateTotal(target) {
                const start = this.displayTotal, t0 = performance.now(), dur = 450;
                const step = (now) => {
                    const p = Math.min(1, (now - t0) / dur);
                    this.displayTotal = Math.round((start + (target - start) * (1 - Math.pow(1 - p, 3))) * 100) / 100;
                    if (p < 1) requestAnimationFrame(step);
                };
                requestAnimationFrame(step);
            }
         }"
         x-init="$watch('total', v => animateTotal(v)); animateTotal(total)">

        {{-- Formulaire --}}
        <div class="bg-white rounded-2xl shadow-md p-7">
            <h2 class="text-xl font-bold text-navy mb-1">Calculez votre séjour</h2>
            <p class="text-sm text-stone-500 mb-6">Estimation immédiate, sans engagement.</p>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Arrivée</label>
                    <input type="date" x-model="checkin"
                           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 class="block text-sm font-medium text-stone-700 mb-1">Départ</label>
                    <input type="date" x-model="checkout" :min="checkin"
                           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>
            <p class="text-xs text-stone-400 mt-2 leading-relaxed">
                <strong>Séjour minimum :</strong> juillet-août <strong>7 nuits</strong> (jusqu'à 3 semaines) ·
                mai-juin <strong>5 nuits</strong> · le reste de l'année <strong>3 nuits</strong>.
            </p>

            {{-- Compteur vélos --}}
            <div class="mt-5">
                <label class="block text-sm font-medium text-stone-700 mb-1">Vélos <span class="text-stone-400 font-normal">(max 4)</span></label>
                <div class="flex items-center gap-3">
                    <button type="button" @click="bikes = Math.max(0, bikes-1)" class="w-10 h-10 rounded-full bg-sea/10 text-sea border-2 border-sea/30 text-xl font-bold hover:bg-sea hover:text-white active:scale-90 transition">−</button>
                    <span class="w-8 text-center text-lg font-semibold text-navy" x-text="bikes"></span>
                    <button type="button" @click="bikes = Math.min(4, bikes+1)" :disabled="bikes >= 4" class="w-10 h-10 rounded-full bg-sea/10 text-sea border-2 border-sea/30 text-xl font-bold hover:bg-sea hover:text-white active:scale-90 transition disabled:opacity-40">+</button>
                    <span class="text-xs text-stone-400 ml-1">Sem. 1 : 20 € · Sem. 2 : <span class="text-leaf font-medium">−50%</span> · Sem. 3+ : <span class="text-leaf font-medium">offerte</span></span>
                </div>
            </div>

            {{-- Voyageurs : adultes + enfants, plafond 6 --}}
            <div class="mt-5">
                <div class="flex items-center justify-between mb-2">
                    <label class="text-sm font-medium text-stone-700">Voyageurs <span class="text-stone-400 font-normal">(6 personnes max)</span></label>
                    <span class="text-xs font-semibold px-2.5 py-1 rounded-full"
                          :class="voyageurs >= maxVoyageurs ? 'bg-amber-100 text-amber-700' : 'bg-sea/10 text-sea'"
                          x-text="voyageurs + ' / ' + maxVoyageurs"></span>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-stone-50 rounded-xl p-3">
                        <div class="text-xs font-medium text-stone-600 mb-2">Adultes <span class="text-stone-400">(+18 ans)</span></div>
                        <div class="flex items-center gap-2">
                            <button type="button" @click="adultes = Math.max(1, adultes-1)" class="w-9 h-9 rounded-full bg-sea/10 text-sea border-2 border-sea/30 text-lg font-bold hover:bg-sea hover:text-white active:scale-90 transition">−</button>
                            <span class="w-7 text-center text-lg font-semibold text-navy" x-text="adultes"></span>
                            <button type="button" @click="if (voyageurs < maxVoyageurs) adultes++" :disabled="voyageurs >= maxVoyageurs" class="w-9 h-9 rounded-full bg-sea/10 text-sea border-2 border-sea/30 text-lg font-bold hover:bg-sea hover:text-white active:scale-90 transition disabled:opacity-30">+</button>
                        </div>
                    </div>
                    <div class="bg-stone-50 rounded-xl p-3">
                        <div class="text-xs font-medium text-stone-600 mb-2">Enfants <span class="text-stone-400">(−18 ans)</span></div>
                        <div class="flex items-center gap-2">
                            <button type="button" @click="enfants = Math.max(0, enfants-1)" class="w-9 h-9 rounded-full bg-sea/10 text-sea border-2 border-sea/30 text-lg font-bold hover:bg-sea hover:text-white active:scale-90 transition">−</button>
                            <span class="w-7 text-center text-lg font-semibold text-navy" x-text="enfants"></span>
                            <button type="button" @click="if (voyageurs < maxVoyageurs) enfants++" :disabled="voyageurs >= maxVoyageurs" class="w-9 h-9 rounded-full bg-sea/10 text-sea border-2 border-sea/30 text-lg font-bold hover:bg-sea hover:text-white active:scale-90 transition disabled:opacity-30">+</button>
                        </div>
                    </div>
                </div>
                <p x-show="voyageurs >= maxVoyageurs" x-cloak class="text-xs text-amber-600 mt-2 flex items-center gap-1">⚠️ Capacité maximale atteinte : 6 personnes (6 couchages).</p>
                <p class="text-xs text-stone-400 mt-1.5">Seuls les adultes sont soumis à la taxe de séjour ; les enfants de moins de 18 ans en sont exonérés.</p>
            </div>

            {{-- Mode de règlement de la taxe de séjour --}}
            <div class="mt-5">
                <label class="block text-sm font-medium text-stone-700 mb-2">Taxe de séjour <span class="text-stone-400 font-normal">(<span x-text="taxeRate.toFixed(2).replace('.', ',')"></span> €/nuit/adulte)</span></label>
                <div class="grid grid-cols-2 gap-2">
                    <button type="button" @click="taxeIncluse = false"
                            :class="!taxeIncluse ? 'border-sea bg-sea/5 text-navy' : 'border-stone-200 text-stone-500'"
                            class="border rounded-xl px-3 py-2.5 text-sm text-left transition">
                        <span class="font-semibold block">Je la règle à part</span>
                        <span class="text-xs">Chèque à l'ordre du Trésor Public</span>
                    </button>
                    <button type="button" @click="taxeIncluse = true"
                            :class="taxeIncluse ? 'border-sea bg-sea/5 text-navy' : 'border-stone-200 text-stone-500'"
                            class="border rounded-xl px-3 py-2.5 text-sm text-left transition">
                        <span class="font-semibold block">Incluse dans le séjour</span>
                        <span class="text-xs">JavaPax la reverse pour vous</span>
                    </button>
                </div>
            </div>

            <div x-show="warning" x-cloak x-transition class="mt-5 bg-amber-50 border border-amber-200 text-amber-800 rounded-lg px-4 py-3 text-sm">
                <span x-text="warning"></span>
            </div>
        </div>

        {{-- Estimation --}}
        <div class="bg-gradient-to-br from-leaf to-emerald-600 text-white rounded-2xl shadow-xl p-7 relative overflow-hidden">
            <div class="absolute -top-16 -right-16 w-48 h-48 bg-white/15 rounded-full blur-2xl"></div>
            <h2 class="text-xl font-bold mb-6 relative">Votre estimation</h2>

            <template x-if="nights > 0 && season">
                <div class="space-y-3 text-sm relative">
                    <div class="flex justify-between text-white/70">
                        <span>Saison</span><span class="font-medium text-white" x-text="season.name"></span>
                    </div>
                    <div class="flex justify-between text-white/70">
                        <span><span x-text="nights"></span> nuit(s) × <span x-text="season.rate"></span> €</span>
                        <span class="font-medium text-white" x-text="fmt(accommodation) + ' €'"></span>
                    </div>
                    <div x-show="discountAmount > 0" x-transition class="flex justify-between text-amber-200">
                        <span>Remise longue durée (<span x-text="Math.round(discountRate*100)"></span> %)</span>
                        <span class="font-semibold" x-text="'− ' + fmt(discountAmount) + ' €'"></span>
                    </div>
                    <div x-show="bikeCost > 0" x-transition class="flex justify-between text-white/70">
                        <span>
                            <span x-text="bikes"></span> vélo(s)
                            <span class="block text-xs text-white/50">
                                <span x-show="weeks >= 1">sem. 1 plein tarif</span><span x-show="weeks >= 2"> · sem. 2 −50%</span><span x-show="weeks >= 3" class="text-amber-200"> · sem. 3+ offerte 🎁</span>
                            </span>
                        </span>
                        <span class="font-medium text-white" x-text="'+ ' + fmt(bikeCost) + ' €'"></span>
                    </div>
                    {{-- Taxe de séjour : incluse ou à part --}}
                    <div class="flex justify-between" :class="taxeIncluse ? 'text-white/70' : 'text-white/50'">
                        <span>Taxe de séjour <span class="text-xs" x-text="taxeIncluse ? '(incluse)' : '(à régler à part)'"></span></span>
                        <span class="font-medium" :class="taxeIncluse ? 'text-white' : 'text-white/60'" x-text="(taxeIncluse ? '+ ' : '') + fmt2(taxe) + ' €'"></span>
                    </div>

                    <div class="border-t border-white/15 pt-4 flex justify-between items-baseline">
                        <span class="text-lg font-semibold">Total séjour</span>
                        <span class="text-4xl font-bold text-white drop-shadow" x-text="fmt2(displayTotal) + ' €'"></span>
                    </div>
                    <p class="text-xs text-white/60 pt-1" x-show="!taxeIncluse">Linge + ménage inclus. Taxe de séjour (<span x-text="fmt2(taxe)"></span> €) à régler à part par chèque à l'ordre du Trésor Public.</p>
                    <p class="text-xs text-white/60 pt-1" x-show="taxeIncluse" x-cloak>Linge + ménage + taxe de séjour inclus. Caution en supplément.</p>

                    <button type="button" x-show="nights > 0 && season" x-transition x-cloak
                            @click="showForm = true; $nextTick(() => $refs.demandeForm && $refs.demandeForm.scrollIntoView({ behavior: 'smooth', block: 'center' }))"
                            class="block w-full text-center mt-4 bg-white text-emerald-700 hover:bg-navy hover:text-white font-semibold px-6 py-3.5 rounded-full transition">
                        Réserver ces dates →
                    </button>
                </div>
            </template>

            <template x-if="nights <= 0 || !season">
                <p class="text-white/60 text-sm relative">Choisissez vos dates d'arrivée et de départ pour voir le montant de votre séjour en temps réel.</p>
            </template>
        </div>

        {{-- DEMANDE : révélée au clic sur « Réserver ces dates » --}}
        <div x-show="showForm" x-cloak x-transition x-ref="demandeForm" class="lg:col-span-2 bg-white rounded-2xl shadow-md border border-stone-100 p-7">
            <div class="flex items-start justify-between gap-4 mb-1">
                <h2 class="text-xl font-bold text-navy">Envoyer ma demande</h2>
                <button type="button" @click="showForm = false" class="text-stone-400 hover:text-stone-600" aria-label="Fermer">✕</button>
            </div>
            <p class="text-sm text-stone-500 mb-5">Renseignez vos coordonnées : nous recevons votre devis et revenons vers vous rapidement. Réponse immédiate possible par WhatsApp.</p>

            {{-- Rappel du devis --}}
            <div class="rounded-xl bg-stone-50 border border-stone-200 p-4 mb-5 text-sm text-stone-700">
                <p class="font-semibold text-navy capitalize" x-text="frDate(checkin) + '  →  ' + frDate(checkout)"></p>
                <p class="text-stone-500 mt-0.5">
                    <span x-text="nights"></span> nuit<span x-show="nights>1">s</span> ·
                    <span x-text="season ? season.name : ''"></span> ·
                    <span x-text="voyageurs"></span> voyageur<span x-show="voyageurs>1">s</span>
                    (<span x-text="adultes"></span> adulte<span x-show="adultes>1">s</span><span x-show="enfants>0"><span x-text="', ' + enfants + ' enfant' + (enfants>1?'s':'')"></span></span>)
                    <span x-show="bikes>0"><span x-text="' · ' + bikes + ' vélo' + (bikes>1?'s':'')"></span></span>
                </p>
                <p class="mt-1 font-bold text-leaf">Total estimé : <span x-text="fmt2(total)"></span> €</p>
                <p x-show="warning" x-cloak class="mt-1.5 text-amber-600 font-medium" x-text="warning"></p>
            </div>

            <form method="POST" action="{{ route('reservation.store') }}" class="space-y-4">
                @csrf
                <input type="text" name="website" class="hidden" tabindex="-1" autocomplete="off">
                <input type="hidden" name="checkin"  :value="checkin">
                <input type="hidden" name="checkout" :value="checkout">
                <input type="hidden" name="guests"   :value="voyageurs">
                <input type="hidden" name="adults"   :value="adultes">
                <input type="hidden" name="name"     :value="(prenom + ' ' + nom).trim()">
                <input type="hidden" name="message"  :value="messageHidden">

                <div class="grid sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-stone-700 mb-1">Prénom <span class="text-rose-500">*</span></label>
                        <input x-model="prenom" 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 class="block text-sm font-medium text-stone-700 mb-1">Nom <span class="text-rose-500">*</span></label>
                        <input x-model="nom" 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 class="block text-sm font-medium text-stone-700 mb-1">Email <span class="text-rose-500">*</span></label>
                    <input type="email" name="email" x-model="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>
                    <label class="block text-sm font-medium text-stone-700 mb-1">Commentaire <span class="text-stone-400 font-normal">(facultatif)</span></label>
                    <textarea x-model="commentaire" rows="3" placeholder="Une question, une demande particulière…" class="w-full border border-stone-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-sea focus:border-sea"></textarea>
                </div>

                <div class="grid sm:grid-cols-2 gap-3 pt-1">
                    <button type="submit" class="glow-cta inline-flex items-center justify-center gap-2 bg-sea hover:bg-navy text-white font-semibold px-6 py-3.5 rounded-full shadow transition">
                        Envoyer ma demande
                    </button>
                    <a :href="waDevis" target="_blank" rel="noopener"
                       class="inline-flex items-center justify-center gap-2.5 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>
                        WhatsApp
                    </a>
                </div>
                <p class="text-xs text-stone-400">En envoyant, votre demande nous parvient par e-mail. Sans engagement.</p>
            </form>
        </div>
    </section>

    {{-- Inclus / supplément --}}
    <section class="grid sm:grid-cols-2 gap-6 mt-16">
        <div class="bg-emerald-50 border border-emerald-100 rounded-2xl p-6">
            <h3 class="font-bold text-emerald-800 mb-3">✦ Inclus dans le tarif</h3>
            <ul class="space-y-1.5 text-sm text-emerald-900">
                <li>Linge de maison (6 draps et serviettes)</li>
                <li>Forfait ménage de fin de séjour (150 €)</li>
                <li>Remises automatiques sur les longs séjours</li>
            </ul>
        </div>
        <div class="bg-stone-100 border border-stone-200 rounded-2xl p-6">
            <h3 class="font-bold text-navy mb-3">En supplément</h3>
            <ul class="space-y-1.5 text-sm text-stone-700">
                <li>Taxe de séjour (réglée sur place)</li>
                <li>Caution (restituée après état des lieux)</li>
                <li>Vélos : 20 € sem. 1, −50 % sem. 2, offerts dès sem. 3 (max 4)</li>
            </ul>
        </div>
    </section>

    {{-- VÉLOS --}}
    <section id="nos-velos-1" class="mt-20 scroll-mt-28">
        <div class="text-center mb-8">
            <p class="uppercase tracking-[0.25em] text-xs text-sky-600 font-semibold mb-2">Mobilité douce</p>
            <h2 class="text-2xl md:text-3xl font-bold text-navy">4 vélos pour explorer le Bassin</h2>
            <p class="mt-3 text-stone-500 max-w-2xl mx-auto">Rejoignez la Dune du Pilat, Arcachon ou les pistes cyclables de la pinède sans voiture. Réglés à l'arrivée.</p>
        </div>

        <div class="grid lg:grid-cols-2 gap-6 items-stretch">
            {{-- Règle + image --}}
            <div class="rounded-3xl overflow-hidden bg-gradient-to-br from-sky-50 to-cyan-50 border border-sky-100 flex flex-col">
                <div class="p-7">
                    <h3 class="font-bold text-navy mb-3">Le principe (par vélo)</h3>
                    <ul class="space-y-2.5 text-sm">
                        <li class="flex items-center gap-3"><span class="w-7 h-7 rounded-full bg-sky-500 text-white text-xs font-bold flex items-center justify-center shrink-0">1</span> 1re semaine : <strong class="text-navy">20 €</strong> (plein tarif)</li>
                        <li class="flex items-center gap-3"><span class="w-7 h-7 rounded-full bg-amber-400 text-white text-xs font-bold flex items-center justify-center shrink-0">2</span> 2e semaine : <strong class="text-navy">10 €</strong> (<span class="text-amber-600">−50 %</span>)</li>
                        <li class="flex items-center gap-3"><span class="w-7 h-7 rounded-full bg-leaf text-white text-xs font-bold flex items-center justify-center shrink-0">3+</span> 3e semaine et + : <strong class="text-leaf">offerte 🎁</strong></li>
                    </ul>
                    <p class="mt-4 text-xs text-stone-500">Jusqu'à 4 vélos. La remise s'applique à <strong>chaque vélo</strong>.</p>
                </div>
                <div class="flex-1 min-h-[160px] bg-cover bg-center" style="background-image:url('{{ url('/wp-content/uploads/2025/03/dune-du-pilat.jpg') }}')"></div>
            </div>

            {{-- Grille de prix de référence --}}
            <div class="bg-white rounded-3xl shadow-md border border-stone-100 p-7">
                <h3 class="font-bold text-navy mb-1">Grille de prix des vélos</h3>
                <p class="text-xs text-stone-400 mb-5">Le calcul exact est intégré au calculateur de séjour ci-dessus.</p>
                @php
                    // Prix par vélo : sem1=20, sem2=+10, sem3+ offert -> 1sem=20, 2sem=30, 3sem+=30
                    $grille = [
                        '1 semaine' => [20, 40, 60, 80],
                        '2 semaines' => [30, 60, 90, 120],
                        '3 semaines et +' => [30, 60, 90, 120],
                    ];
                @endphp
                <div class="overflow-hidden rounded-xl border border-stone-100">
                    <table class="w-full text-sm text-center">
                        <thead>
                            <tr class="bg-navy text-white">
                                <th class="py-2.5 px-2 text-left font-semibold">Durée</th>
                                <th class="py-2.5 px-1 font-semibold">1 vélo</th>
                                <th class="py-2.5 px-1 font-semibold">2 vélos</th>
                                <th class="py-2.5 px-1 font-semibold">3 vélos</th>
                                <th class="py-2.5 px-1 font-semibold">4 vélos</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($grille as $duree => $prix)
                                <tr class="odd:bg-stone-50 border-t border-stone-100">
                                    <td class="py-2.5 px-2 text-left font-medium text-navy">{{ $duree }}</td>
                                    @foreach($prix as $p)
                                        <td class="py-2.5 px-1 text-stone-700">{{ $p }} €</td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <p class="text-xs text-stone-500 mt-4 bg-leaf/5 border border-leaf/10 rounded-lg px-3 py-2">
                    💡 <strong>Exemple :</strong> 4 vélos × 3 semaines = 80 € (sem.1) + 40 € (sem.2) + 0 € (sem.3) = <strong class="text-leaf">120 €</strong>
                </p>
            </div>
        </div>
    </section>

    {{-- TAXE DE SÉJOUR --}}
    <section id="taxe-de-sejour" class="mt-20 scroll-mt-28">
        <div class="text-center mb-8">
            <p class="uppercase tracking-[0.25em] text-xs text-sea font-semibold mb-2">Information</p>
            <h2 class="text-2xl md:text-3xl font-bold text-navy">La taxe de séjour</h2>
            <p class="mt-3 text-stone-500 max-w-2xl mx-auto">Conformément à la réglementation de la ville d'Arcachon, la taxe de séjour s'applique. À vous de choisir comment la régler.</p>
        </div>

        <div class="grid md:grid-cols-2 gap-6 items-start">
            <div class="bg-white rounded-2xl shadow-sm p-7">
                <ul class="space-y-3 text-stone-700">
                    <li class="flex items-start gap-3"><span class="text-sea mt-0.5">●</span> <span><strong>{{ number_format(config('javapax.taxe_sejour.avant'), 2, ',', ' ') }} €</strong> par nuit et par adulte (+ 18 ans). <strong>{{ number_format(config('javapax.taxe_sejour.depuis'), 2, ',', ' ') }} €</strong> pour les séjours à partir du 1<sup>er</sup> janvier {{ config('javapax.taxe_sejour.annee') }}</span></li>
                    <li class="flex items-start gap-3"><span class="text-leaf mt-0.5">●</span> <span>Les <strong>enfants de moins de 18 ans</strong> sont exonérés</span></li>
                    <li class="flex items-start gap-3"><span class="text-stone-400 mt-0.5">●</span> <span>Tarif fixé par la commune d'Arcachon, réglé à l'arrivée</span></li>
                </ul>
                <a href="https://taxe.3douest.com/arcachon.php" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 mt-4 text-sm text-sea font-semibold hover:underline">
                    Tout savoir / simuler sur le site officiel d'Arcachon
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5h5v5M19 5l-9 9M10 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4"/></svg>
                </a>
            </div>

            {{-- 2 modes de règlement --}}
            <div class="space-y-4">
                <div class="bg-white rounded-2xl shadow-sm p-6 border-l-4 border-stone-300">
                    <h3 class="font-bold text-navy flex items-center gap-2">✉️ Vous la réglez vous-même</h3>
                    <p class="mt-2 text-sm text-stone-600">Par chèque à l'ordre du <strong>Trésor Public</strong>, remis à l'arrivée. Simple et direct.</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm p-6 border-l-4 border-sea">
                    <h3 class="font-bold text-navy flex items-center gap-2">🤝 Incluse dans votre séjour</h3>
                    <p class="mt-2 text-sm text-stone-600">Réglez-la directement avec votre location : <strong>JavaPax se charge de la reverser</strong> au Trésor Public pour vous. Zéro démarche.</p>
                </div>
                <p class="text-sm text-stone-500 text-center">💡 Vous choisissez votre mode de règlement dans le calculateur ci-dessus.</p>
            </div>
        </div>
    </section>
  </div>
</div>
@endsection