{{-- Aperçu météo 7 jours (Open-Meteo). Réutilisé : page Météo & marées + accueil.
     (Le preconnect vers api/marine-api.open-meteo.com est déjà global dans layouts/site.) --}}
        {{-- Météo récupérée côté navigateur (Open-Meteo, gratuit, sans clé). --}}
        <div x-data="javapaxMeteo()" x-init="load()" class="mb-8">
            {{-- Chargement --}}
            <template x-if="state === 'loading'">
                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
                    <template x-for="n in 7" :key="n">
                        <div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-4 h-40 animate-pulse">
                            <div class="h-3 w-12 bg-stone-200 rounded mx-auto mb-3"></div>
                            <div class="h-8 w-8 bg-stone-200 rounded-full mx-auto mb-3"></div>
                            <div class="h-3 w-16 bg-stone-200 rounded mx-auto mb-2"></div>
                            <div class="h-4 w-14 bg-stone-200 rounded mx-auto"></div>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Données --}}
            <template x-if="state === 'ok'">
                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
                    <template x-for="(d, i) in days" :key="i">
                        <div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-4 text-center hover:shadow-lg hover:-translate-y-1 transition" :class="i === 0 ? 'ring-2 ring-sea/40' : ''">
                            <div class="text-xs font-bold uppercase tracking-wide" :class="i === 0 ? 'text-sea' : 'text-stone-600'" x-text="i === 0 ? &quot;Aujourd'hui&quot; : d.jour"></div>
                            <div class="my-2 flex justify-center h-12 items-center" x-html="wicon(d.icon)"></div>
                            <div class="text-[11px] text-stone-600 leading-tight mb-2 h-7" x-text="d.label"></div>
                            <div class="font-bold text-navy"><span class="text-lg" x-text="d.tmax + '°'"></span> <span class="text-stone-600 text-sm" x-text="d.tmin + '°'"></span></div>
                            <div class="mt-2 flex justify-center gap-3 text-[11px] text-stone-500">
                                <span class="inline-flex items-center gap-1" title="Probabilité de pluie">
                                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="#bae6fd" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.7s5.5 6 5.5 9.8a5.5 5.5 0 1 1-11 0C6.5 8.7 12 2.7 12 2.7Z"/></svg>
                                    <span x-text="(d.pluie ?? 0) + '%'"></span>
                                </span>
                                <span class="inline-flex items-center gap-1" title="Vent (km/h)">
                                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.8 19.6A2 2 0 1 0 14 16H2M17.5 8a2.5 2.5 0 1 1 2 4H2M9.8 4.4A2 2 0 1 1 11 8H2"/></svg>
                                    <span x-text="d.vent"></span>
                                </span>
                            </div>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Erreur --}}
            <template x-if="state === 'error'">
                <div class="bg-stone-50 border border-stone-100 rounded-2xl p-6 text-center text-stone-600 text-sm">Météo momentanément indisponible - réessayez plus tard.</div>
            </template>
        </div>

        @once
        @push('scripts')
        <script>
        function javapaxMeteo () {
            return {
                state: 'loading',
                days: [],
                wmo (c) {
                    if (c === 0) return ['sun', 'Ensoleillé'];
                    if (c === 1 || c === 2) return ['partly', 'Éclaircies'];
                    if (c === 3) return ['cloud', 'Couvert'];
                    if (c === 45 || c === 48) return ['fog', 'Brouillard'];
                    if ([51, 53, 55, 56, 57].includes(c)) return ['drizzle', 'Bruine'];
                    if ([61, 63, 65, 80, 81, 82].includes(c)) return ['rain', 'Pluie'];
                    if (c === 66 || c === 67) return ['rain', 'Pluie verglaçante'];
                    if ([71, 73, 75, 77, 85, 86].includes(c)) return ['snow', 'Neige'];
                    if ([95, 96, 99].includes(c)) return ['storm', 'Orage'];
                    return ['partly', 'Variable'];
                },
                wicon (k) {
                    const W = {
                        sun: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4" fill="#fef3c7"/><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"/></svg>',
                        partly: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g stroke="#f59e0b"><path d="M11 1.5v1.6M3.9 4.9l1.1 1.1M1.5 12h1.6M3.9 19.1l1.1-1.1M18.1 4.9l-1.1 1.1M21.5 12h-1.2"/><circle cx="11" cy="11" r="3.4" fill="#fef3c7"/></g><path d="M14 22H7a4.5 4.5 0 1 1 .9-8.9A5.5 5.5 0 0 1 18.5 14 4 4 0 0 1 18 22Z" fill="#f1f5f9" stroke="#94a3b8"/></svg>',
                        cloud: '<svg width="44" height="44" viewBox="0 0 24 24" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>',
                        fog: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5A4 4 0 0 1 6 6a6 6 0 0 1 11.5-1A4.5 4.5 0 0 1 18 13.5" fill="#f1f5f9" stroke="#94a3b8"/><path d="M16 17H7M17 21H9" stroke="#cbd5e1"/></svg>',
                        drizzle: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5A4 4 0 0 1 6 6a6 6 0 0 1 11.5-1A4.5 4.5 0 0 1 18 13.5" fill="#f1f5f9" stroke="#94a3b8"/><g stroke="#7dd3fc"><path d="M8 18v1.6M12 18.5v2M16 18v1.6"/></g></svg>',
                        rain: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5A4 4 0 0 1 6 6a6 6 0 0 1 11.5-1A4.5 4.5 0 0 1 18 13.5" fill="#f1f5f9" stroke="#94a3b8"/><g stroke="#38bdf8"><path d="M8 17.5v3.5M12 18v4M16 17.5v3.5"/></g></svg>',
                        snow: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5A4 4 0 0 1 6 6a6 6 0 0 1 11.5-1A4.5 4.5 0 0 1 18 13.5" fill="#f1f5f9" stroke="#94a3b8"/><g stroke="#7dd3fc"><path d="M8 18h.01M8 21h.01M12 19h.01M12 22h.01M16 18h.01M16 21h.01"/></g></svg>',
                        storm: '<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5A4 4 0 0 1 6 6a6 6 0 0 1 11.5-1A4.5 4.5 0 0 1 18 13.5" fill="#e2e8f0" stroke="#94a3b8"/><path d="m12 13-2.5 4.5H13L10.5 22" stroke="#f59e0b" stroke-width="2.2"/></svg>'
                    };
                    return W[k] || W.partly;
                },
                async load () {
                    const jours = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
                    const url = 'https://api.open-meteo.com/v1/forecast?latitude=44.66&longitude=-1.16'
                        + '&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max,wind_speed_10m_max'
                        + '&timezone=Europe%2FParis&forecast_days=7';
                    try {
                        const res = await fetch(url);
                        if (!res.ok) throw new Error('http ' + res.status);
                        const j = await res.json();
                        const d = j.daily;
                        if (!d || !d.time) throw new Error('no data');
                        this.days = d.time.map((t, i) => {
                            const [icon, label] = this.wmo(d.weather_code[i]);
                            const dt = new Date(t + 'T12:00:00');
                            return {
                                jour: jours[dt.getDay()],
                                icon, label,
                                tmax: Math.round(d.temperature_2m_max[i]),
                                tmin: Math.round(d.temperature_2m_min[i]),
                                pluie: d.precipitation_probability_max[i],
                                vent: Math.round(d.wind_speed_10m_max[i]),
                            };
                        });
                        this.state = 'ok';
                    } catch (e) {
                        this.state = 'error';
                    }
                },
            };
        }
        </script>
        @endpush
        @endonce