{{-- Marégramme du jour (courbe + pleines/basses mers + marnage). Réutilisé : page Météo & marées + accueil.
     Définit aussi JVPX_paddlePlan/JVPX_COEFS utilisés par le tableau paddle. --}}
        {{-- Marées : graphe en direct (hauteur d'eau prévue) --}}
        <div x-data="javapaxMarees()" x-init="load()" class="rounded-2xl bg-white border border-stone-100 shadow-sm">
            <div class="p-6 md:p-8">
                <div class="flex flex-col md:flex-row md:items-center gap-4 mb-5">
                    <div class="shrink-0 w-14 h-14 rounded-2xl bg-sea/10 text-sea flex items-center justify-center">
                        <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
                            <path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
                            <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
                        </svg>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <div class="flex flex-wrap items-center justify-center md:justify-start gap-3">
                            <h3 class="text-xl font-bold text-navy" x-text="'Marées d\'Arcachon — ' + (dayLabel || 'aujourd\'hui')"></h3>
                            <template x-if="coef">
                                <span class="inline-flex items-center gap-1.5 rounded-full bg-sea/10 text-sea px-3 py-1 text-sm font-bold">
                                    @include('partials.terme', ['k' => 'coef', 'label' => 'Coefficient']) <span x-text="coef" class="text-base text-navy"></span>
                                    <span x-show="coef >= 95" class="text-amber-600">· @include('partials.terme', ['k' => 'grande-maree', 'label' => 'grande marée'])</span>
                                </span>
                            </template>
                        </div>
                        <p class="text-stone-500 text-sm mt-1">Hauteur d'eau prévue à la Jetée d'Eyrac. Grandes marées (coef. &gt; 95) pour les bancs de sable et la pêche à pied, marées douces pour la baignade.</p>
                    </div>
                    <a href="{{ config('javapax.maree_url') }}" target="_blank" rel="noopener" class="shrink-0 border border-stone-200 text-sea text-sm font-semibold px-5 py-2.5 rounded-full hover:border-sea hover:bg-sea/5 transition whitespace-nowrap">
                        Coefficients officiels →
                    </a>
                </div>

                <div class="bg-white rounded-2xl border border-stone-100 p-3 md:p-4">
                    <template x-if="state === 'loading'"><p class="py-12 text-center text-slate-400 text-sm">Chargement de la marée…</p></template>
                    <template x-if="state === 'error'"><p class="py-12 text-center text-slate-400 text-sm">Marée momentanément indisponible.</p></template>
                    <template x-if="state === 'ok'">
                        <div>
                            <p class="text-center text-xs font-semibold text-slate-400 mb-1">Marégramme — Arcachon (Jetée d'Eyrac)</p>
                            <div x-html="svgHTML"></div>
                            <div class="mt-1 flex flex-wrap justify-center gap-x-6 gap-y-1.5 text-sm text-slate-600">
                                <template x-for="(e, i) in extremes" :key="i">
                                    <span class="inline-flex items-center gap-1.5">
                                        <span x-text="e.type === 'haute' ? '🔼 Pleine mer' : '🔽 Basse mer'"></span>
                                        <strong class="text-navy" x-text="e.label"></strong>
                                        <span class="text-slate-400" x-text="e.height + ' m'"></span>
                                    </span>
                                </template>
                            </div>
                            <p class="mt-2 text-[11px] text-slate-400 text-center">@include('partials.terme', ['k' => 'marnage', 'label' => 'Marnage']) du jour ≈ <span x-text="range"></span> m · @include('partials.terme', ['k' => 'prevision', 'label' => 'hauteurs prévisionnelles']) (Open-Meteo) — horaires exacts sur <a href="{{ config('javapax.maree_url') }}" target="_blank" rel="noopener" class="underline">marée.info</a>.</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        @once
        @push('scripts')
        <script>
        const JVPX_COEFS = @json(config('marees.coefficients'));

        // Calcul PARTAGÉ de la sortie paddle (utilisé par le graphe ET le tableau → cohérence garantie).
        // Départ ~transit avant la basse mer (jusant), demi-tour à la basse mer, retour ~transit après (flot).
        function JVPX_paddlePlan (times, all, COEFS) {
            const curK = c => Math.max(1, Math.min(4, (c || 55) / 100 * 4));
            const lows = [];
            for (let i = 1; i < all.length - 1; i++) if (all[i] != null && all[i - 1] != null && all[i + 1] != null && all[i] < all[i - 1] && all[i] <= all[i + 1]) lows.push(i);
            const now = new Date(); const plans = [];
            for (const i of lows) {
                const a = all[i - 1], b = all[i], c2 = all[i + 1];
                const den = (a != null && c2 != null) ? (a - 2 * b + c2) : 0;
                const frac = den ? Math.max(-0.5, Math.min(0.5, 0.5 * (a - c2) / den)) : 0;
                const bm = new Date(times[i].slice(0, 16)); bm.setMinutes(bm.getMinutes() + Math.round(frac * 60));
                const hr = bm.getHours(); if (hr < 7 || hr > 21) continue;
                const day = times[i].slice(0, 10);
                // Coefficient : valeur officielle (config) si dispo, sinon estimée d'après le marnage.
                let hiV = b;
                for (let k = Math.max(0, i - 8); k <= Math.min(all.length - 1, i + 8); k++) if (all[k] != null && all[k] > hiV) hiV = all[k];
                const coefEst = Math.max(20, Math.min(120, Math.round(23 * (hiV - b) + 12)));
                const official = COEFS[day] != null;
                const coef = official ? COEFS[day] : coefEst;
                const transit = Math.round(8 / (5 + curK(coef)) * 60);
                const dep = new Date(bm); dep.setMinutes(dep.getMinutes() - transit);
                const ret = new Date(bm); ret.setMinutes(ret.getMinutes() + transit);
                plans.push({ date: day, bm, dep, ret, coef, official, transit, courant: curK(coef) >= 3 ? 'fort' : (curK(coef) >= 2 ? 'modéré' : 'doux') });
            }
            const future = plans.filter(p => p.bm > now);
            return { next: future[0] || plans[plans.length - 1] || null, future, all: plans };
        }
        const JVPX_jours = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
        const JVPX_joursC = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
        const JVPX_hhmm = d => String(d.getHours()).padStart(2, '0') + 'h' + String(d.getMinutes()).padStart(2, '0');

        function javapaxMarees () {
            return {
                state: 'loading', svgHTML: '', extremes: [], range: '0', coef: null, dayLabel: '',
                async load () {
                    const url = 'https://marine-api.open-meteo.com/v1/marine?latitude=44.66&longitude=-1.16'
                        + '&hourly=sea_level_height_msl&timezone=Europe%2FParis&forecast_days=3';
                    try {
                        const res = await fetch(url);
                        if (!res.ok) throw new Error('http ' + res.status);
                        const j = await res.json();
                        const times = j.hourly.time, all = j.hourly.sea_level_height_msl;
                        // Journée de la PROCHAINE sortie paddle (le graphe suit le tableau).
                        const plan = JVPX_paddlePlan(times, all, JVPX_COEFS);
                        const todayStr = new Date().toDateString();
                        const day = plan.next ? plan.next.date : times[0].slice(0, 10);
                        const isToday = new Date(day + 'T12:00:00').toDateString() === todayStr;
                        this.dayLabel = isToday ? "aujourd'hui" : (JVPX_jours[new Date(day + 'T12:00:00').getDay()] + ' ' + day.slice(8) + '/' + day.slice(5, 7));
                        this.coef = JVPX_COEFS[day] ?? null;

                        // Points de la journée (00:00 → minuit)
                        const idx = [];
                        for (let i = 0; i < times.length; i++) if (times[i].slice(0, 10) === day) idx.push(i);
                        if (times.length > idx.length) idx.push(idx[idx.length - 1] + 1);
                        const ts = idx.map(i => times[i]);
                        // Hauteur ramenée au zéro des cartes (≈ niveau moyen Arcachon +2,5 m) pour des valeurs positives
                        const OFF = 2.5;
                        const vals = idx.map(i => (all[i] ?? 0) + OFF);
                        const n = vals.length;
                        if (n < 4) throw new Error('no data');

                        // Repère
                        const W = 1000, H = 380, PL = 64, PR = 24, PT = 24, PB = 56;
                        const plotW = W - PL - PR, plotH = H - PT - PB, bottom = PT + plotH;
                        const dataMin = Math.min(...vals), dataMax = Math.max(...vals);
                        const yLo = Math.floor((dataMin - 0.2) * 2) / 2;
                        const yHi = Math.ceil((dataMax + 0.2) * 2) / 2;
                        const step = (yHi - yLo) > 4 ? 1 : 0.5;
                        const lastH = n - 1;
                        const xOf = h => PL + (h / lastH) * plotW;
                        const yOf = v => PT + (1 - (v - yLo) / (yHi - yLo)) * plotH;
                        const fr = v => (Math.round(v * 10) / 10).toFixed(1).replace('.', ',');

                        // Courbe lissée (Catmull-Rom -> Bézier cubique) pour un tracé doux, façon vague.
                        const P = [];
                        for (let i = 0; i < n; i++) P.push([xOf(i), yOf(vals[i])]);
                        let d = 'M ' + P[0][0].toFixed(1) + ' ' + P[0][1].toFixed(1);
                        for (let i = 0; i < P.length - 1; i++) {
                            const p0 = P[i - 1] || P[i], p1 = P[i], p2 = P[i + 1], p3 = P[i + 2] || P[i + 1];
                            const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
                            const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
                            d += ' C ' + c1x.toFixed(1) + ' ' + c1y.toFixed(1) + ', ' + c2x.toFixed(1) + ' ' + c2y.toFixed(1) + ', ' + p2[0].toFixed(1) + ' ' + p2[1].toFixed(1);
                        }
                        const areaD = d + ' L ' + xOf(lastH).toFixed(1) + ' ' + bottom + ' L ' + xOf(0).toFixed(1) + ' ' + bottom + ' Z';

                        // Pleines / basses mers — heure et position INTERPOLÉES (précises à la minute)
                        const ex = [];
                        const fmtHM = dt => String(dt.getHours()).padStart(2, '0') + 'h' + String(dt.getMinutes()).padStart(2, '0');
                        for (let i = 1; i < n - 1; i++) {
                            const hi = vals[i] > vals[i - 1] && vals[i] >= vals[i + 1];
                            const lo = vals[i] < vals[i - 1] && vals[i] <= vals[i + 1];
                            if (!(hi || lo)) continue;
                            const a2 = vals[i - 1], b2 = vals[i], c2 = vals[i + 1];
                            const den2 = a2 - 2 * b2 + c2;
                            const frac2 = den2 ? Math.max(-0.5, Math.min(0.5, 0.5 * (a2 - c2) / den2)) : 0;
                            const fi = i + frac2;
                            const vy = b2 + 0.5 * (c2 - a2) * frac2 + 0.5 * den2 * frac2 * frac2;
                            const dt = new Date(ts[i].slice(0, 16)); dt.setMinutes(dt.getMinutes() + Math.round(frac2 * 60));
                            ex.push({ type: hi ? 'haute' : 'basse', h: i, x: +xOf(fi).toFixed(1), y: +yOf(vy).toFixed(1), label: fmtHM(dt), height: fr(vy) });
                        }
                        const extremes = ex.filter((e, i) => i === 0 || Math.abs(e.x - ex[i - 1].x) > 40);

                        // Repère « maintenant » (seulement si on trace la journée d'aujourd'hui)
                        const now = new Date();
                        const nh = now.getHours() + now.getMinutes() / 60;
                        let nowMark = null;
                        if (isToday && nh >= 0 && nh <= lastH) {
                            const i0 = Math.floor(nh), i1 = Math.min(lastH, i0 + 1), f = nh - i0;
                            const vy = vals[i0] + (vals[i1] - vals[i0]) * f;
                            nowMark = { x: xOf(nh), y: yOf(vy) };
                        }

                        // Construction du SVG (chaîne → x-html, fiable dans un SVG)
                        let s = '<svg viewBox="0 0 ' + W + ' ' + H + '" class="w-full" style="max-height:360px" xmlns="http://www.w3.org/2000/svg" font-family="ui-sans-serif,system-ui,sans-serif">';
                        for (let g = yLo; g <= yHi + 0.001; g += step) {
                            const y = yOf(g).toFixed(1);
                            s += '<line x1="' + PL + '" x2="' + (W - PR) + '" y1="' + y + '" y2="' + y + '" stroke="#e2e8f0" stroke-width="1"/>';
                            s += '<text x="' + (PL - 8) + '" y="' + (yOf(g) + 6) + '" text-anchor="end" font-size="20" fill="#94a3b8">' + (g % 1 === 0 ? g : fr(g)) + '</text>';
                        }
                        for (let h = 0; h <= lastH; h += 2) {
                            const x = xOf(h).toFixed(1);
                            s += '<line x1="' + x + '" x2="' + x + '" y1="' + PT + '" y2="' + bottom + '" stroke="#f1f5f9" stroke-width="1"/>';
                            s += '<text x="' + x + '" y="' + (bottom + 24) + '" text-anchor="middle" font-size="20" fill="#94a3b8">' + h + '</text>';
                        }
                        s += '<text x="' + (PL + plotW / 2) + '" y="' + (H - 6) + '" text-anchor="middle" font-size="20" font-weight="bold" fill="#64748b">Heures</text>';
                        s += '<text x="18" y="' + (PT + plotH / 2) + '" text-anchor="middle" font-size="20" font-weight="bold" fill="#64748b" transform="rotate(-90 18 ' + (PT + plotH / 2) + ')">Hauteur (m)</text>';
                        s += '<path d="' + areaD + '" fill="rgba(31,155,189,0.15)"/>';
                        s += '<path d="' + d + '" fill="none" stroke="#1f9bbd" stroke-width="3.5" stroke-linejoin="round" stroke-linecap="round"/>';
                        if (nowMark) {
                            s += '<line x1="' + nowMark.x.toFixed(1) + '" x2="' + nowMark.x.toFixed(1) + '" y1="' + PT + '" y2="' + bottom + '" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="5 4"/>';
                            s += '<circle cx="' + nowMark.x.toFixed(1) + '" cy="' + nowMark.y.toFixed(1) + '" r="6" fill="#ef4444"/>';
                            s += '<text x="' + nowMark.x.toFixed(1) + '" y="' + (PT - 6) + '" text-anchor="middle" font-size="17" font-weight="bold" fill="#ef4444">maintenant</text>';
                        }
                        // Points de marée (pleine = pic, basse = creux) avec l'heure précise — pas de marqueur paddle.
                        extremes.forEach(e => {
                            s += '<circle cx="' + e.x + '" cy="' + e.y + '" r="6" fill="' + (e.type === 'haute' ? '#1f9bbd' : '#ef4444') + '" stroke="#fff" stroke-width="2"/>';
                            // Pleine mer : heure + hauteur AU-DESSUS du pic.
                            // Basse mer : heure SOUS le creux, mais hauteur AU-DESSUS du point
                            // (sinon elle percute les étiquettes d'heures de l'axe du bas).
                            const ty = e.type === 'haute' ? e.y - 16 : e.y + 28;
                            const hy = e.type === 'haute' ? e.y - 35 : e.y - 16;
                            s += '<text x="' + e.x + '" y="' + ty + '" text-anchor="middle" font-size="20" font-weight="bold" fill="' + (e.type === 'haute' ? '#0e7490' : '#dc2626') + '">' + e.label + '</text>';
                            s += '<text x="' + e.x + '" y="' + hy + '" text-anchor="middle" font-size="16" fill="#64748b">' + e.height + ' m</text>';
                        });
                        s += '</svg>';

                        this.svgHTML = s;
                        this.extremes = extremes;
                        this.range = fr(dataMax - dataMin);
                        this.state = 'ok';
                    } catch (e) {
                        this.state = 'error';
                    }
                },
            };
        }
        </script>
        @endpush
        @endonce