{{-- Météogramme horaire (Open-Meteo) - toutes les conditions heure par heure, avec
     repère rouge « maintenant ». Affiché à titre indicatif sous la courbe de marée.
     Variables : ciel · température · pluie · vent (dir + rafales) · houle (large) · pression. --}}
    <div x-data="javapaxMeteogramme()" x-init="load()" class="rounded-2xl bg-white border border-stone-100 shadow-sm mt-6">
        <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 text-3xl">📊</div>
                <div class="flex-1 text-center md:text-left">
                    <h3 class="text-xl font-bold text-navy">Conditions heure par heure</h3>
                    <p class="text-stone-500 text-sm mt-1">Ciel, température, pluie, vent, houle et @include('partials.terme', ['k' => 'pression', 'label' => 'pression']) au Moulleau - le <span class="text-red-600 font-semibold">trait rouge</span> marque l'instant présent.</p>
                </div>
            </div>

            <template x-if="state === 'loading'"><p class="py-12 text-center text-slate-600 text-sm">Chargement des conditions…</p></template>
            <template x-if="state === 'error'"><p class="py-12 text-center text-slate-600 text-sm">Conditions momentanément indisponibles.</p></template>

            <template x-if="state === 'ok'">
                <div>
                    {{-- Bande horaire défilante : colonnes = heures, lignes = variables. --}}
                    <div class="overflow-x-auto -mx-2 px-2 pb-1" x-ref="scroller">
                        <div class="flex" style="min-width:max-content">
                            {{-- Colonne d'étiquettes fixe à gauche --}}
                            <div class="sticky left-0 z-10 bg-white pr-2 shrink-0 flex flex-col text-[11px] font-semibold text-stone-600 border-r border-stone-100">
                                <div class="h-6 flex items-end pb-0.5"></div>
                                <div class="h-7 flex items-center justify-end">Ciel</div>
                                <div class="h-7 flex items-center justify-end">🌡️ °C</div>
                                <div class="h-7 flex items-center justify-end">☔ %</div>
                                <div class="h-9 flex items-center justify-end leading-tight text-right">💨 km/h</div>
                                <div class="h-7 flex items-center justify-end">🌊 m</div>
                                <div class="h-7 flex items-center justify-end">🔵 hPa</div>
                            </div>

                            {{-- Une colonne par heure --}}
                            <template x-for="(h, i) in hours" :key="i">
                                <div class="shrink-0 w-12 text-center relative"
                                     :class="h.isNow ? 'bg-red-50 rounded-lg ring-2 ring-red-500 z-0' : (h.isPast ? 'opacity-40' : '')"
                                     :id="h.isNow ? 'jvpx-now' : null">
                                    {{-- En-tête heure (+ jour au changement de date) --}}
                                    <div class="h-6 flex flex-col items-center justify-end leading-none">
                                        <template x-if="h.newDay"><span class="text-[9px] font-bold uppercase text-sea" x-text="h.dayLabel"></span></template>
                                        <span class="text-[11px] font-bold" :class="h.isNow ? 'text-red-700' : 'text-stone-500'" x-text="h.hh"></span>
                                    </div>
                                    {{-- Ciel --}}
                                    <div class="h-7 flex items-center justify-center text-lg" x-text="h.sky"></div>
                                    {{-- Température --}}
                                    <div class="h-7 flex items-center justify-center text-[12px] font-bold text-navy" x-text="h.temp != null ? h.temp + '°' : '-'"></div>
                                    {{-- Pluie --}}
                                    <div class="h-7 flex items-center justify-center text-[11px]"
                                         :class="h.rain >= 60 ? 'text-sky-700 font-bold' : (h.rain >= 30 ? 'text-sky-500' : 'text-stone-500')"
                                         x-text="h.rain != null ? h.rain + '%' : '-'"></div>
                                    {{-- Vent : flèche orientée + vitesse, rafale en dessous --}}
                                    <div class="h-9 flex flex-col items-center justify-center leading-none gap-0.5">
                                        <template x-if="h.windSpeed != null">
                                            <div class="flex flex-col items-center">
                                                <svg class="w-3 h-3" :class="h.windCls" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" :style="'transform:rotate(' + h.windArrow + 'deg)'"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                                                <span class="text-[11px] font-bold" :class="h.windCls" x-text="h.windSpeed"></span>
                                                <span class="text-[8px] text-stone-600" x-show="h.windGust > h.windSpeed + 4" x-text="h.windGust"></span>
                                            </div>
                                        </template>
                                        <template x-if="h.windSpeed == null"><span class="text-stone-500">-</span></template>
                                    </div>
                                    {{-- Houle --}}
                                    <div class="h-7 flex items-center justify-center text-[11px]"
                                         :class="h.wave != null && h.wave > 1.5 ? 'text-amber-800 font-semibold' : 'text-stone-600'"
                                         x-text="h.wave != null ? h.wave.toFixed(1).replace('.', ',') : '-'"></div>
                                    {{-- Pression --}}
                                    <div class="h-7 flex items-center justify-center text-[10px] text-stone-600" x-text="h.press != null ? h.press : '-'"></div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <p class="mt-3 text-[11px] text-slate-600 text-center">
                        Prévisions Open-Meteo au Moulleau (lat 44,66 / lon -1,16). Vent : flèche = sens où il souffle ;
                        <span class="text-red-600">rouge</span> = soutenu (&gt; 20 km/h). Houle mesurée au large.
                    </p>
                </div>
            </template>
        </div>
    </div>

    @once
    @push('scripts')
    <script>
    function javapaxMeteogramme () {
        const CARD = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSO', 'SO', 'OSO', 'O', 'ONO', 'NO', 'NNO'];
        const JV_J = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
        const skyOf = c => {
            if (c === 0) return '☀️';
            if (c === 1 || c === 2) return '🌤️';
            if (c === 3) return '☁️';
            if (c === 45 || c === 48) return '🌫️';
            if ([51, 53, 55, 56, 57].includes(c)) return '🌦️';
            if ([61, 63, 65, 80, 81, 82, 66, 67].includes(c)) return '🌧️';
            if ([71, 73, 75, 77, 85, 86].includes(c)) return '❄️';
            if ([95, 96, 99].includes(c)) return '⛈️';
            return '🌤️';
        };
        return {
            state: 'loading', hours: [],
            async load () {
                const base = '?latitude=44.66&longitude=-1.16&timezone=Europe%2FParis&past_days=1&forecast_days=3';
                const url = 'https://api.open-meteo.com/v1/forecast' + base
                    + '&hourly=temperature_2m,weather_code,precipitation_probability,wind_speed_10m,wind_gusts_10m,wind_direction_10m,surface_pressure';
                const murl = 'https://marine-api.open-meteo.com/v1/marine' + base + '&hourly=wave_height';
                try {
                    const [r, mr] = await Promise.all([fetch(url), fetch(murl)]);
                    if (!r.ok) throw 0;
                    const j = await r.json(); const H = j.hourly;
                    let WAVE = null, WT = null;
                    if (mr.ok) { const mj = await mr.json(); WAVE = mj.hourly.wave_height; WT = mj.hourly.time; }
                    const now = new Date();
                    const nowKey = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0')
                        + 'T' + String(now.getHours()).padStart(2, '0') + ':00';
                    // Fenêtre affichée : de 3 h avant maintenant à +33 h (utile pour préparer demain).
                    const nowI = H.time.indexOf(nowKey);
                    const start = Math.max(0, (nowI < 0 ? 0 : nowI) - 3);
                    const end = Math.min(H.time.length - 1, start + 36);
                    const waveAt = t => { if (!WAVE || !WT) return null; const k = WT.indexOf(t); return k < 0 ? null : WAVE[k]; };
                    let prevDay = null; const out = [];
                    for (let i = start; i <= end; i++) {
                        const t = H.time[i]; const d = new Date(t.slice(0, 16));
                        const dayKey = t.slice(0, 10);
                        const newDay = dayKey !== prevDay; prevDay = dayKey;
                        const wd = H.wind_direction_10m[i];
                        const sp = H.wind_speed_10m[i];
                        out.push({
                            hh: String(d.getHours()).padStart(2, '0') + 'h',
                            newDay, dayLabel: JV_J[d.getDay()],
                            isNow: t === nowKey, isPast: i < nowI,
                            sky: skyOf(H.weather_code[i]),
                            temp: H.temperature_2m[i] != null ? Math.round(H.temperature_2m[i]) : null,
                            rain: H.precipitation_probability[i],
                            windSpeed: sp != null ? Math.round(sp) : null,
                            windGust: H.wind_gusts_10m[i] != null ? Math.round(H.wind_gusts_10m[i]) : null,
                            windDir: wd, windCard: wd != null ? CARD[Math.round((wd % 360) / 22.5) % 16] : '',
                            windArrow: wd != null ? (wd + 180) % 360 : 0,
                            windCls: sp == null ? 'text-stone-600' : (sp > 20 ? 'text-red-600' : (sp >= 12 ? 'text-amber-800' : 'text-sea')),
                            wave: waveAt(t),
                            press: H.surface_pressure[i] != null ? Math.round(H.surface_pressure[i]) : null,
                        });
                    }
                    this.hours = out;
                    this.state = 'ok';
                    // Centre la vue sur « maintenant » après le rendu.
                    this.$nextTick(() => {
                        const el = document.getElementById('jvpx-now');
                        if (el && this.$refs.scroller) {
                            this.$refs.scroller.scrollLeft = Math.max(0, el.offsetLeft - this.$refs.scroller.clientWidth / 2);
                        }
                    });
                } catch (e) { this.state = 'error'; }
            },
        };
    }
    </script>
    @endpush
    @endonce