{{-- Aperçu marées du jour : carte blanche épurée avec mini-courbe (marégramme) + coefficient. --}}
<div x-data="javapaxMareeApercu()" x-init="load()" class="mt-6 max-w-3xl mx-auto">
    <template x-if="state === 'loading'">
        <div class="rounded-2xl bg-white border border-stone-100 h-44 animate-pulse"></div>
    </template>
    <template x-if="state === 'ok'">
        <div class="rounded-2xl bg-white border border-stone-100 shadow-sm p-5">
            <div class="flex items-center justify-between flex-wrap gap-2 mb-1">
                <div class="flex items-center gap-2.5">
                    <span class="w-9 h-9 rounded-xl bg-sea/10 text-sea flex items-center justify-center">
                        <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="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>
                    </span>
                    <div>
                        <p class="font-bold text-navy leading-tight">Marées à Arcachon</p>
                        <p class="text-xs text-stone-400 first-letter:uppercase" x-text="jour"></p>
                    </div>
                </div>
                <div class="inline-flex items-center gap-1.5 bg-sea/10 text-sea rounded-full px-3.5 py-1.5 text-sm font-semibold">
                    Coefficient <span class="text-base text-navy" x-text="coef"></span>
                    <span x-show="coef >= 95" class="text-amber-600">· grande marée</span>
                </div>
            </div>
            <div class="mt-1" x-html="svg"></div>
        </div>
    </template>
    <template x-if="state === 'error'">
        <div class="rounded-2xl bg-stone-50 border border-stone-100 p-4 text-center text-stone-400 text-sm">Marées momentanément indisponibles.</div>
    </template>
</div>

@once
@push('scripts')
<script>
function javapaxMareeApercu () {
    return {
        state: 'loading', coef: null, jour: '', svg: '',
        async load () {
            const COEFS = @json(config('marees.coefficients'));
            try {
                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=2';
                const res = await fetch(url);
                if (!res.ok) throw new Error('http ' + res.status);
                const j = await res.json();
                const T = j.hourly.time, H = j.hourly.sea_level_height_msl;
                const today = T[0].slice(0, 10);

                // Points du jour (heure entière -> valeur).
                const pts = [];
                for (let i = 0; i < H.length; i++) {
                    if (H[i] == null || !T[i].startsWith(today)) continue;
                    pts.push({ h: +T[i].slice(11, 13), v: H[i] });
                }
                if (pts.length < 6) throw new Error('peu de points');
                const vmin = Math.min(...pts.map(p => p.v)), vmax = Math.max(...pts.map(p => p.v));
                const rng = (vmax - vmin) || 1;

                // Extremes (pleine/basse mer) avec heure interpolée à la minute.
                const ex = [];
                for (let i = 1; i < pts.length - 1; i++) {
                    const a = pts[i - 1].v, b = pts[i].v, c = pts[i + 1].v;
                    const isHigh = b > a && b >= c, isLow = b < a && b <= c;
                    if (!isHigh && !isLow) continue;
                    const den = a - 2 * b + c, off = den !== 0 ? 0.5 * (a - c) / den : 0;
                    const dt = new Date(today + 'T' + String(pts[i].h).padStart(2, '0') + ':00:00');
                    dt.setMinutes(dt.getMinutes() + Math.round(off * 60));
                    ex.push({ high: isHigh, hf: pts[i].h + off, time: dt.toTimeString().slice(0, 5).replace(':', 'h') });
                }
                const exF = ex.filter((e, i) => i === 0 || Math.abs(e.hf - ex[i - 1].hf) > 1).slice(0, 4);

                // Construction de la courbe (SVG sobre, fond blanc).
                const W = 620, HT = 150, pX = 16, pT = 28, pB = 30;
                const xOf = h => pX + (h / 23) * (W - 2 * pX);
                const yOf = v => pT + (1 - (v - vmin) / rng) * (HT - pT - pB);
                let line = 'M' + xOf(pts[0].h).toFixed(1) + ' ' + yOf(pts[0].v).toFixed(1);
                for (let i = 1; i < pts.length; i++) line += ' L' + xOf(pts[i].h).toFixed(1) + ' ' + yOf(pts[i].v).toFixed(1);
                const area = line + ' L' + xOf(pts[pts.length - 1].h).toFixed(1) + ' ' + (HT - pB) + ' L' + xOf(pts[0].h).toFixed(1) + ' ' + (HT - pB) + ' Z';

                let marks = '';
                exF.forEach(e => {
                    const x = xOf(e.hf), col = e.high ? '#1f9bbd' : '#dc2626';
                    const ty = e.high ? pT - 8 : HT - pB + 18;
                    marks += '<circle cx="' + x.toFixed(1) + '" cy="' + yOf(e.high ? vmax : vmin).toFixed(1) + '" r="3.5" fill="' + col + '"/>';
                    marks += '<text x="' + x.toFixed(1) + '" y="' + ty + '" text-anchor="middle" font-size="13" font-weight="700" fill="' + col + '">' + e.time + '</text>';
                });

                this.svg = '<svg viewBox="0 0 ' + W + ' ' + HT + '" width="100%" preserveAspectRatio="xMidYMid meet" style="display:block">'
                    + '<defs><linearGradient id="tideFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#bae6fd" stop-opacity="0.55"/><stop offset="1" stop-color="#bae6fd" stop-opacity="0.05"/></linearGradient></defs>'
                    + '<path d="' + area + '" fill="url(#tideFill)"/>'
                    + '<path d="' + line + '" fill="none" stroke="#1f9bbd" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>'
                    + marks + '</svg>';

                this.coef = COEFS[today] ?? Math.max(20, Math.min(120, Math.round(23 * rng + 12)));
                this.jour = new Date(today + 'T12:00:00').toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
                this.state = 'ok';
            } catch (e) {
                this.state = 'error';
            }
        },
    };
}
</script>
@endpush
@endonce