require_once dirname(__DIR__) . '/include/structured-data-v9.php';
$cfg = (function_exists('get_river_config')) ? (get_river_config('semois') ?: []) : [];
global $cfg;
require_once dirname(__DIR__) . '/include/dataset_api_optimise_bdd2.php';
require_once dirname(__DIR__) . '/include/debit-predictor.php';

$sD = $RIVER_DATA['rivers']['semois'] ?? null;
$debit_actuel = isset($sD['debit']) ? (float)$sD['debit'] : 0;
$hauteur_eau = isset($sD['hauteur']) ? (float)$sD['hauteur'] : 0;
$temperature_eau_float = isset($sD['temp_eau']) ? (float)$sD['temp_eau'] : 15;
$nav_status = isset($sD['nav']) ? (int)$sD['nav'] : 0;

if ($debit_actuel > 50 || $debit_actuel < 2.2) {
    $nav_status = 0;
}

$api_dataset_json = generate_dataset_api_json_ld($pdo);
$api_dataset_nodes = json_decode($api_dataset_json, true) ?: [];

$ssr_temp_air  = 15; // Valeur par défaut si non trouvé
$ssr_vent      = 5;
$ssr_windchill = round(calculate_windchill($ssr_temp_air, $ssr_vent), 1);
$ssr_depth     = estimate_water_depth('semois', $debit_actuel);
$ssr_advice    = get_river_safety_advice($ssr_windchill, $temperature_eau_float, 'en');

$forecast_json = dirname(__DIR__) . '/cache/json/weather_forecast.json';
$forecast_data = file_exists($forecast_json) ? json_decode(file_get_contents($forecast_json), true) : [];
$debit_pred    = predict_future_debit($pdo, 'semois', $debit_actuel, $forecast_data);

$best_score = -100;
$ssr_best_day = null;
foreach ($forecast_data as $i => $f) {
    $p_debit   = $debit_pred['predictions'][$i]['debit'] ?? null;
    $p_hauteur = ($p_debit !== null) ? estimate_water_depth('semois', $p_debit) : null;
    $res = calculate_day_forecast_details($f, $p_debit, $p_hauteur, 'en');
    if ($res['score'] > $best_score) {
        $best_score = $res['score'];
        $ssr_best_day = $res;
    }
}

$schema_faq_river = render_river_faq('semois', $debit_actuel, $nav_status, $temperature_eau_float, $hauteur_eau, $ssr_best_day, 'en', 'array');
$extra_nodes = array_merge([$schema_faq_river], $api_dataset_nodes);

$rt_date_hum = isset($sD['date']) ? date('m/d/Y \a\t H:i', strtotime($sD['date'])) : '--';
$rt_date_iso = $sD['date'] ?? date('c');

$schema_graph_to_inject = build_river_schemas('semois', $debit_actuel, $hauteur_eau, $temperature_eau_float, $nav_status, $rt_date_iso, $rt_date_hum, $sD, false, 'en', true, true, $extra_nodes);

// Position of the gauge (base 1.0 to 40.0 m³/s for the Semois)
$gauge_pct_semois = (($debit_actuel - 1) / (40 - 1)) * 100;
$gauge_pct_semois = min(100, max(0, $gauge_pct_semois));

$gauge_label_semois = "Peaceful";
$gauge_color_semois = "#1b5e20";
if ($debit_actuel < 2.5) { $gauge_label_semois = "Very Calm"; $gauge_color_semois = "#01579b"; }
elseif ($debit_actuel > 12) { $gauge_label_semois = "Dynamic"; $gauge_color_semois = "#b45309"; }
elseif ($debit_actuel > 25) { $gauge_label_semois = "Sporty"; $gauge_color_semois = "#b71c1c"; }

$page_info = [
    'title' => 'Semois Water Level: Real-time Gauge and Flow Rate Today',
    'desc' => "Live Semois flow rate: {$debit_actuel} m³/s, level {$hauteur_eau} m. Kayaking today " . ($nav_status ? 'Authorized' : 'Prohibited') . ".",
    'canonical' => BASE_URL . '/eng/niveau-d-eau-semois',
    'breadcrumb' => 'Water Level Semois'
];

$extra_head = '';
require_once dirname(__DIR__) . '/include/head.php';
require_once dirname(__DIR__) . '/menu.php';
<style nonce="">
.flow-status-badge-semois { display: inline-block; padding: 4px 12px; border-radius: 20px; border: 1.5px solid currentColor; font-weight: 700; font-size: 0.9rem; margin: 10px 0; }
.semois-flow-gauge-wrapper { width: 100%; max-width: 450px; margin: 15px auto; background: #ffffff; padding: 15px; border-radius: 12px; border: 1px solid #c8e6c9; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.semois-flow-gauge-bar { height: 12px; width: 100%; background: linear-gradient(to right, #bbdefb, #c8e6c9, #fff9c4, #ffe0b2, #ffcdd2); border-radius: 10px; position: relative; }
.semois-flow-gauge-pointer { position: absolute; top: -8px; width: 4px; height: 28px; background: #333; border-radius: 2px; transition: left 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.semois-flow-gauge-pointer::after { content: ''; position: absolute; top: -10px; left: -8px; width: 20px; height: 20px; background: #333; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.semois-flow-gauge-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: #666; font-weight: 600; }
</style>
<header style="background: linear-gradient(135deg, #0d3b4a, #1a5c6e); color:white; text-align:center; padding:10px 5px; box-shadow:0 8px 30px rgba(0,0,0,0.2);">
    <h1 style="font-size:3rem; margin:0; font-weight:700; letter-spacing:-1px;">🌊 Real-time Water Level and Flow rate of the Semois 🌊</h1>
</header>
<main>
    <section style="max-width:1920px; margin:auto; padding:60px 20px; background:#f8fdf9; border-top:3px solid #1e7e34; border-bottom:1px solid #c8e6c9; text-align: center;">
        <style nonce="/FRE8K6H1CxUEE+qZMgOoA==">:root{--navy-bg:#2c3e50;--card-bg:#fff;--metric-gray:#f1f3f4;--accent-blue:#0061c1;--accent-gold:#896f08ff;--status-red-bg:#fdf2f2;--status-red-text:#b02a1e;--text-label:#495057;--text-value:#1a252f}
.dashboard-outer{background-color:var(--navy-bg);padding:15px 10px;border-radius:15px;font-family:'Segoe UI',Roboto,sans-serif}
.dashboard-inner{background:var(--card-bg);border-radius:20px;padding:15px;margin:0 auto;max-width:1200px}
.header-flex-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;margin-bottom:20px}
.station-title{display:flex;flex-direction:column;align-items:center;gap:5px;color:#2c3e50;font-weight:700;width:auto}
.station-main-text{color:#0d3b4a;font-size:1.5rem;margin:0;text-align:center}
.station-date-text{color:#0d3b4a;font-size:1.2rem;margin:0;text-align:center}
.alert-btn{background:#e7f1ff;border:1px solid #b3d7ff;color:#0056b3;padding:5px 15px;border-radius:20px;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .2s;white-space:nowrap}
.alert-btn:hover{background:#d0e4ff}
.title-divider{border-top:1px solid #ddd;margin:10px 0 20px}
.section-header{font-weight:600;font-size:1.1rem;padding-bottom:8px;margin-bottom:15px;border-bottom:2px solid #eee;width:100%;text-align:center;color:#000}
.section-header.hydrologie{color:var(--accent-blue);border-bottom-color:var(--accent-blue)}
.section-header.conditions{color:var(--accent-gold);border-bottom-color:var(--accent-gold)}
.metrics-row{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap}
.metric-card{background:var(--metric-gray);border-radius:10px;padding:12px;flex:1 1 100%;min-width:100px;text-align:center;color:var(--text-value);border:1px solid #dee2e6}
.metric-card .label{font-size:.75rem;color:var(--text-label);font-weight:700;text-transform:uppercase;display:block}
.metric-card .value{font-size:1.1rem;font-weight:700;color:#2c3e50}
.status-badge{border-radius:10px;padding:8px;flex:1 1 100%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.status-no{background:var(--status-red-bg);color:var(--status-red-text);border:1px solid #f5c6cb}
.status-ok{background:#f0fff4;color:#055928ff;border:1px solid #c6f6d5}
.graph-box{height:280px;margin-top:15px;position:relative}
#graph-wrapper{width:100%;height:100%;background:#fafafa;border-radius:12px;border:1px solid #eee;overflow:visible}
#tooltip{position:absolute;background:rgba(0,0,0,0.8);color:#fff;padding:5px 10px;border-radius:5px;font-size:12px;display:none;pointer-events:none;z-index:10}

@media (min-width: 481px) {
    .metric-card { flex: 1 1 calc(50% - 8px); }
}

@media (min-width: 769px) {
    .dashboard-outer { padding: 30px 15px; }
    .dashboard-inner { padding: 25px; }
    .metric-card { flex: 1 1 calc(33.333% - 10px); }
    .metrics-row { gap: 10px; }
    .status-badge { font-size: 1rem; padding: 10px; }
    .section-header.hydrologie, .section-header.conditions { width: 40%; text-align: left; }
    .graph-box { height: 320px; }
}

@media (min-width: 992px) {
    .dashboard-outer { width: 80%; margin-right: 10%; margin-left: 10%; }
    .dashboard-inner { max-width: 100%; }
    .header-flex-container { flex-direction: row; justify-content: center; gap: 20px; }
    .station-title { flex-direction: row; align-items: baseline; gap: 15px; white-space: nowrap; }
    .station-main-text { font-size: 1.3rem; }
    .station-date-text { font-size: 1.1rem; }
    .section-header { width: 100%; text-align: center; }
    .section-header.hydrologie { width: 500px; }
    .section-header.conditions { width: 430px; }
}
</style>

<div class="dashboard-outer">

    <div class="dashboard-inner">
        
        <div class="header-flex-container">
            
            <div class="station-title">
                <p class="station-main-text">📡 Station 📍</p>
                <p class="station-date-text">Last Update : 10/05 pm31 23:00</p>
            </div>
            
            <button type="button" 
                class="alert-btn open-alert-modal" 
                data-modal-url="https://www.kayaksemois-ardenne.be/include/modal_alert_semois.php"
                data-modal-id="alertSemoisModal">
                🔔 Alert me on status change            </button>

        </div>

        <hr class="title-divider">

        <div class="row g-4 align-items-stretch">
            <div class="col-lg-6 pe-lg-4 border-end-desktop d-flex flex-column">
                <div class="section-header hydrologie"><span>💧 Hydrological Data</span></div>
                
                <div class="metrics-row" style="color: black;">
                    
                    <div class="metric-card">
                        <span class="label">Current Flow</span>
                        <span class="value">
                            <strong>8,37</strong> 
                            <span>m³/s</span>
                        </span>
                    </div>

                    <div class="metric-card">
                        <span class="label">Current Height</span>
                        <span class="value">
                            <strong>0,44</strong> 
                            <span>m</span>
                        </span>
                    </div>

                    <div class="metric-card"> 
                        <span class="label">Water Temp</span>
                        <span class="value">
                           <strong>11,6</strong>
                            <span>°C</span>
                        </span>
                    </div>

                    <div class="status-badge status-ok">
                        <span style="margin-right:8px">✅ NAVIGATION </span> 
                        <strong>AUTHORIZED                        ✅</strong>
                    </div>
                </div>

                <div class="graph-box flex-grow-1">
                    <div id="graph-wrapper">
                        <div id="tooltip"></div>
               <svg id="svgGraph" width="100%" height="100%" viewBox="0 0 1000 400" preserveAspectRatio="none" style="overflow:visible">
            <defs>
                <linearGradient id="debitGrad" x1="0%" y1="100%" x2="0%" y2="0%">
                    <stop offset="0%" style="stop-color:#007bff; stop-opacity:0.6" />
                    <stop offset="50%" style="stop-color:#ffc107; stop-opacity:0.7" />
                    <stop offset="100%" style="stop-color:#dc3545; stop-opacity:0.8" />
                </linearGradient>
            </defs>

            <g id="gridLayer"></g>
            
            <path id="debitArea" fill="url(#debitGrad)" />
            
            <line id="limitLine" x1="0" x2="1000" stroke="red" stroke-dasharray="8,4" stroke-width="2" />
            
            <polyline id="debitPath" fill="none" stroke="#0056b3" stroke-width="3" />
            <polyline id="predictionPathSemois" fill="none" stroke="#0d6efd" stroke-width="3" stroke-dasharray="6,4" opacity="0.7" />
            <circle id="focusPoint" r="6" fill="#fff" stroke="#007bff" stroke-width="3" style="display:none;" />
        </svg>             </div>
                </div>
            </div>

            <div class="col-lg-6 ps-lg-4 d-flex flex-column">
                <div class="section-header conditions"><span>🌤️ Conditions & Difficulty</span></div>
                <div class="metrics-row" style="color: black;">
                    <div class="metric-card"><span class="label">Air Temperature</span><span class="value">11.1°C</span></div>
                    <div class="metric-card"><span class="label">Wind Speed</span><span class="value">2.48 km/h</span></div>
                    <div class="metric-card"><span class="label">Humidity</span><span class="value">93%</span></div>
      
                    <div class="metric-card">
                        <span class="label">Difficulty Score</span>
                        <span class="value h3 mb-0">
                            <span>19</span>/100
                        </span>
                    </div>

          
                     <div class="metric-card"><span class="label">Condition</span><span class="value">pluie modérée</span></div>
                </div>
                <div class="analysis-box flex-grow-1">
                    <div class="fw-bold mb-3" style="text-align: center;">🔍 Analysis :</div>
                    <ul class="analysis-list" id="factors-list">
                                            </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script nonce="/FRE8K6H1CxUEE+qZMgOoA==">
(function() {
    const run = () => {
    let rawData = [{"d":8.25,"t":"10\/05 13:15"},{"d":8.25,"t":"10\/05 13:15"},{"d":8.25,"t":"10\/05 13:30"},{"d":8.25,"t":"10\/05 13:30"},{"d":8.25,"t":"10\/05 13:30"},{"d":8.25,"t":"10\/05 13:45"},{"d":8.25,"t":"10\/05 13:45"},{"d":8.25,"t":"10\/05 14:00"},{"d":8.25,"t":"10\/05 14:00"},{"d":8.25,"t":"10\/05 14:00"},{"d":8.25,"t":"10\/05 14:15"},{"d":8.25,"t":"10\/05 14:15"},{"d":8.25,"t":"10\/05 14:30"},{"d":8.25,"t":"10\/05 14:30"},{"d":8.25,"t":"10\/05 14:30"},{"d":8.25,"t":"10\/05 14:45"},{"d":8.25,"t":"10\/05 14:45"},{"d":8.25,"t":"10\/05 15:00"},{"d":8.25,"t":"10\/05 15:00"},{"d":8.25,"t":"10\/05 15:00"},{"d":8.25,"t":"10\/05 15:15"},{"d":8.25,"t":"10\/05 15:15"},{"d":8.17,"t":"10\/05 15:30"},{"d":8.17,"t":"10\/05 15:30"},{"d":8.17,"t":"10\/05 15:30"},{"d":8.17,"t":"10\/05 15:45"},{"d":8.17,"t":"10\/05 15:45"},{"d":8.17,"t":"10\/05 16:00"},{"d":8.17,"t":"10\/05 16:00"},{"d":8.17,"t":"10\/05 16:00"},{"d":8.17,"t":"10\/05 16:15"},{"d":8.17,"t":"10\/05 16:15"},{"d":8.13,"t":"10\/05 16:30"},{"d":8.13,"t":"10\/05 16:30"},{"d":8.13,"t":"10\/05 16:30"},{"d":8.13,"t":"10\/05 16:45"},{"d":8.13,"t":"10\/05 16:45"},{"d":8.09,"t":"10\/05 17:00"},{"d":8.09,"t":"10\/05 17:00"},{"d":8.09,"t":"10\/05 17:00"},{"d":8.09,"t":"10\/05 17:15"},{"d":8.09,"t":"10\/05 17:15"},{"d":8.09,"t":"10\/05 17:30"},{"d":8.09,"t":"10\/05 17:30"},{"d":8.09,"t":"10\/05 17:30"},{"d":8.09,"t":"10\/05 17:45"},{"d":8.09,"t":"10\/05 17:45"},{"d":8.09,"t":"10\/05 18:00"},{"d":8.09,"t":"10\/05 18:00"},{"d":8.09,"t":"10\/05 18:00"},{"d":8.09,"t":"10\/05 18:15"},{"d":8.09,"t":"10\/05 18:15"},{"d":8.09,"t":"10\/05 18:30"},{"d":8.09,"t":"10\/05 18:30"},{"d":8.09,"t":"10\/05 18:30"},{"d":8.09,"t":"10\/05 18:45"},{"d":8.09,"t":"10\/05 18:45"},{"d":8.09,"t":"10\/05 19:00"},{"d":8.09,"t":"10\/05 19:00"},{"d":8.09,"t":"10\/05 19:00"},{"d":8.09,"t":"10\/05 19:15"},{"d":8.09,"t":"10\/05 19:15"},{"d":8.09,"t":"10\/05 19:30"},{"d":8.09,"t":"10\/05 19:30"},{"d":8.09,"t":"10\/05 19:30"},{"d":8.09,"t":"10\/05 19:45"},{"d":8.09,"t":"10\/05 19:45"},{"d":8.17,"t":"10\/05 20:00"},{"d":8.17,"t":"10\/05 20:00"},{"d":8.17,"t":"10\/05 20:00"},{"d":8.17,"t":"10\/05 20:15"},{"d":8.17,"t":"10\/05 20:15"},{"d":8.17,"t":"10\/05 20:30"},{"d":8.17,"t":"10\/05 20:30"},{"d":8.17,"t":"10\/05 20:30"},{"d":8.17,"t":"10\/05 20:45"},{"d":8.17,"t":"10\/05 20:45"},{"d":8.17,"t":"10\/05 21:00"},{"d":8.17,"t":"10\/05 21:00"},{"d":8.17,"t":"10\/05 21:00"},{"d":8.17,"t":"10\/05 21:15"},{"d":8.17,"t":"10\/05 21:15"},{"d":8.21,"t":"10\/05 21:30"},{"d":8.21,"t":"10\/05 21:30"},{"d":8.21,"t":"10\/05 21:30"},{"d":8.21,"t":"10\/05 21:45"},{"d":8.21,"t":"10\/05 21:45"},{"d":8.25,"t":"10\/05 22:00"},{"d":8.25,"t":"10\/05 22:00"},{"d":8.25,"t":"10\/05 22:00"},{"d":8.25,"t":"10\/05 22:15"},{"d":8.25,"t":"10\/05 22:15"},{"d":8.09,"t":"10\/05 22:30"},{"d":8.09,"t":"10\/05 22:30"},{"d":8.09,"t":"10\/05 22:30"},{"d":8.33,"t":"10\/05 22:45"},{"d":8.33,"t":"10\/05 22:45"},{"d":8.37,"t":"10\/05 23:00"},{"d":8.37,"t":"10\/05 23:00"},{"d":8.37,"t":"10\/05 23:00"}];
        const predData = [];
    
    // Fallback : si pas de données historiques
    if (!rawData || rawData.length === 0) {
        const curDebit = 8.37;
        rawData = [
            {d: curDebit, t: 'Il y a 3h'},
            {d: curDebit, t: 'Maintenant'}
        ];
    }

    const svg = document.getElementById('svgGraph');
    const path = document.getElementById('debitPath');
    const area = document.getElementById('debitArea');
    const focus = document.getElementById('focusPoint');
    const tooltip = document.getElementById('tooltip');
    const wrapper = document.getElementById('graph-wrapper');
    const gridLayer = document.getElementById('gridLayer');
    const limitLine = document.getElementById('limitLine');

    const VIEW_W = 1000;
    const VIEW_H = 400;

    const allVals = rawData.map(pt => parseFloat(pt.d));
    if (predData && predData.length > 0) {
        predData.forEach(pt => allVals.push(parseFloat(pt.d)));
    }
    const maxDataVal = Math.max(...allVals);

    let MAX_DEBIT;
    if (maxDataVal > 90)      MAX_DEBIT = 200;
    else if (maxDataVal > 45)  MAX_DEBIT = 100;
    else                       MAX_DEBIT = 50;

    const threshold = 50;
    const getY = (val) => VIEW_H - (val / MAX_DEBIT * VIEW_H);

    let gridHTML = '';
    // Ligne 0
    gridHTML += `<line x1="0" y1="${VIEW_H}" x2="${VIEW_W}" y2="${VIEW_H}" stroke="#e0e0e0" />
                  <text x="${VIEW_W-5}" y="${VIEW_H-5}" text-anchor="end" fill="#999" font-size="16">0 m³/s</text>`;
    // Ligne 50 (Limite Semois)
    gridHTML += `<line x1="0" y1="${getY(threshold)}" x2="${VIEW_W}" y2="${getY(threshold)}" stroke="#ffcdd2" stroke-width="1" />
                  <text x="${VIEW_W-5}" y="${getY(threshold)-5}" text-anchor="end" fill="#c62828" font-size="16" font-weight="bold">${threshold} (Limite)</text>`;

    if (MAX_DEBIT > 100) {
        gridHTML += `<line x1="0" y1="${getY(100)}" x2="${VIEW_W}" y2="${getY(100)}" stroke="#eee" />
                      <text x="${VIEW_W-5}" y="${getY(100)-5}" text-anchor="end" fill="#999" font-size="16">100</text>`;
    }
    
    gridLayer.innerHTML = gridHTML;

    limitLine.setAttribute('y1', getY(threshold));
    limitLine.setAttribute('y2', getY(threshold));

    const points = rawData.map((pt, i) => ({
        x: (i / (rawData.length - 1)) * VIEW_W,
        y: getY(pt.d), 
        val: pt.d,
        date: pt.t
    }));

    const pointsStr = points.map(p => `${p.x},${p.y}`).join(' ');
    path.setAttribute('points', pointsStr);
    
    // Correction de l'aire robuste
    const areaD = `M 0,${VIEW_H} ` + points.map(p => `L ${p.x},${p.y}`).join(' ') + ` L ${VIEW_W},${VIEW_H} Z`;
    area.setAttribute('d', areaD);

    // V10 — Tracé des prédictions (Dashed line)
    if (predData && predData.length > 0) {
        const predPath = document.getElementById('predictionPathSemois');
        const lastReal = points[points.length - 1];
        const predPoints = predData.map((pt, i) => ({
            x: lastReal.x + ((i + 1) / predData.length) * (VIEW_W * 0.4),
            y: getY(pt.d),
            val: pt.d,
            date: pt.t,
            isPred: true
        }));
        
        const allPred = [{ x: lastReal.x, y: lastReal.y }, ...predPoints];
        predPath.setAttribute('points', allPred.map(p => `${p.x},${p.y}`).join(' '));
        
        points.push(...predPoints);
        svg.setAttribute('viewBox', `0 0 ${VIEW_W * 1.4} ${VIEW_H}`);
        limitLine.setAttribute('x2', VIEW_W * 1.4);
    }

    let cachedRect = null;
    const getRect = () => cachedRect || (cachedRect = svg.getBoundingClientRect());
    window.addEventListener('resize', () => cachedRect = null);
    window.addEventListener('scroll', () => cachedRect = null);

    function showData(e) {
        const rect = getRect();
        const clientX = (e.touches ? e.touches[0].clientX : e.clientX);
        const clientY = (e.touches ? e.touches[0].clientY : e.clientY);
        const mouseX_raw = clientX - rect.left;
        const mouseY_raw = clientY - rect.top;
        
        const totalW = VIEW_W * (predData.length > 0 ? 1.4 : 1);
        const mouseX_svg = mouseX_raw * (totalW / rect.width);
        
        // Optimisation O(1) : Accès direct par index au lieu de reduce()
        const stepX = VIEW_W / (rawData.length - 1);
        let idx = Math.round(mouseX_svg / stepX);
        idx = Math.max(0, Math.min(points.length - 1, idx));
        const closest = points[idx];

        if (!closest) return;

        requestAnimationFrame(() => {
            focus.setAttribute('cx', closest.x);
            focus.setAttribute('cy', closest.y);
            focus.style.display = 'block';

            tooltip.style.display = 'block';
            tooltip.style.left = (mouseX_raw + 15) + 'px';
            tooltip.style.top = (mouseY_raw - 45) + 'px';
            tooltip.innerHTML = `<strong>${parseFloat(closest.val).toFixed(2)} m³/s</strong><br>${closest.date}`;
        });
    }

    wrapper.addEventListener('mousemove', showData, {passive: true});
    wrapper.addEventListener('touchstart', showData, {passive: true});
    wrapper.addEventListener('mouseenter', () => cachedRect = svg.getBoundingClientRect());
    wrapper.addEventListener('mouseleave', () => { focus.style.display = 'none'; tooltip.style.display = 'none'; });
    };
    const schedule = window.requestIdleCallback || ((cb) => setTimeout(cb, 100));
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => schedule(run, { timeout: 2000 }));
    } else {
        schedule(run, { timeout: 2000 });
    }
})();

const semoisData = {"debit":"8.37","hauteur":"0.444","temperature":"11.1","temp_eau":"11.6","vent_vitesse":"2.48","humidite":"93","conditions_meteo":"pluie mod\u00e9r\u00e9e","niveau_difficulte":"Facile","score_difficulte":19,"navigable":1,"status_hydro":"\u2705 D\u00c9BIT FAVORABLE - NAVIGABLE","date_mesure_hydro":"2026-05-10 22:40:00","facteurs_difficulte":"[]","created_at":"2026-05-10 23:00:06","id":18241,"status_restriction":"La circulation des kayaks est autoris\u00e9e","localisation_restriction":"La Semois (aval de Lingl\u00e9)","date_maj_restriction":"2026-05-10 22:45:04","meteo_updated_at":"2026-05-10 23:00:06","pression":"1007","vent_direction":null,"titre_column":"La circulation des kayaks est autoris\u00e9e","destination_website":"kayaksemois-ardenne.be","navigation":"AUTORIS\u00c9E","fiabilite":98};
const isDataStale = false;
const i18n = {"station":"Station","last_update":"Last Update","hydro_data":"Hydrological Data","debit":"Current Flow","hauteur":"Current Height","temp_eau":"Water Temp","navigation":"NAVIGATION","autorise":"AUTHORIZED","interdit":"FORBIDDEN","conditions":"Conditions & Difficulty","temp_air":"Air Temperature","vent":"Wind Speed","humidite":"Humidity","score":"Difficulty Score","condition":"Condition","analyse":"Analysis","debit_critique":"CRITICAL FLOW: Extreme danger.","debit_bas":"FLOW TOO LOW: Navigation impossible.","eau_froide":"COLD WATER: Risk of cold shock.","limite":"Limit","ferme":"CLOSED","ouvert":"OPEN","nav_allowed":"Paddling Allowed","nav_forbidden":"Paddling Forbidden","nav_desc":"Based on official SPW readings","view_full":"View full dashboard \u2192","source_spw":"SPW Hydrology","status_all":"All navigable","status_none":"None navigable","status_part":"navigable","niveau":"Level","eau":"Water","source":"Source","details":"Details","update":"Update","sentinel":"Sentinel System","hydrology_nav":"Hydrology & Navigation","nav_ok":"NAVIGATION AUTHORIZED.","nav_no":"NAVIGATION FORBIDDEN.","nav_status":"Navigation status","oxy_desc":"Optimal oxygen level for aquatic fauna.","schema_name":"River status - Kayak Semois","expert_job":"Kayak Expert, Developer & Creator of the KSA platform","expert_desc":"Expert in navigation in the Belgian Ardennes, creator of the real-time hydrological forecasting algorithm for the Semois and other rivers in the region.","desc_start":"High frequency hydrological dataset","desc_mid":"and real-time navigation statuses for the river","desc_end":" Hydrological expertise certified by Quentin Deligne.","alert_me":"Alert me on status change","js_danger":"CRITICAL FLOW: Extremely dangerous navigation.","js_strict_no":"STRICTLY FORBIDDEN.","js_low":"LOW FLOW: Risk of scraping the bottom.","js_cold":"COLD WATER: Risk of cold shock.","js_neo":"Wetsuit mandatory.","js_storm":"THUNDERSTORM RISK: Danger of lightning on the water.","js_evac":"Evacuate the river immediately.","js_hum":"HUMIDITY: Saturated air.","lv_facile":"Easy","lv_modere":"Moderate","lv_difficile":"Difficult","lv_tres_difficile":"Very Difficult","lv_inconnu":"Unknown","urls":{"kayak":"\/eng\/kayak-semois","camping":"\/eng\/camping-petit-ben-gneur","vtt":"\/","faq":"\/eng\/FAQ","home":"\/eng\/"}};
function calculateKayakDifficulty(data) {
    if (!data) {
        return { 
            score: 0, level: i18n.lv_inconnu, levelClass: 'unknown',
            factors: ['Données indisponibles.'], recommendations: ['Vérifiez les sources officielles.']
        };
    }
    let factors = [];
    let recommendations = [];
    const debit = parseFloat(data.debit) || 0;
    const tempEau = parseFloat(data.temp_eau) || 5; 
    const tempAir = parseFloat(data.temperature) || 0;
    const vent = parseFloat(data.vent_vitesse) || 0;
    const humidite = parseFloat(data.humidite) || 0;
    const conditions = (data.conditions_meteo || "").toLowerCase();

    let score = parseInt(data.score_difficulte) || 0;

    if (debit > 50) {
        factors.push(i18n.js_danger);
        recommendations.push(i18n.js_strict_no);
    } else if (debit < 2.2) {
        factors.push(i18n.js_low);
    }
    if (tempEau < 10) {
        factors.push(`${i18n.js_cold} (${tempEau}°C)`);
        recommendations.push(i18n.js_neo);
    }
    if (conditions.includes('orage') || conditions.includes('thunder')) {
        score = 100; // Danger maximum
        factors.push(i18n.js_storm);
        recommendations.push(i18n.js_evac);
    }
    
    if (humidite > 85) {
        factors.push(`${i18n.js_hum} (${humidite}%)`);
    }
    let levelText = i18n.lv_facile;
    let levelClass = 'beginner';

    if (score >= 80) { levelText = i18n.lv_tres_difficile; levelClass = 'expert'; }
    else if (score >= 60) { levelText = i18n.lv_difficile; levelClass = 'advanced'; }
    else if (score >= 40) { levelText = i18n.lv_modere; levelClass = 'intermediate'; }

    return { 
        score, 
        level: levelText, 
        levelClass: levelClass, 
        factors, 
        recommendations 
    };
}

(function() {
    const runDifficulty = () => {
        if (semoisData) {
            const analysis = calculateKayakDifficulty(semoisData);
            const scoreEl = document.getElementById('difficulty-score');
            if (scoreEl) scoreEl.textContent = analysis.score + '/100';

            const factorsEl = document.getElementById('factors-list');
            if (factorsEl) {
                factorsEl.innerHTML = analysis.factors.map(f => `<li>${f}</li>`).join('');
            }
        }
    };
    const schedule = window.requestIdleCallback || ((cb) => setTimeout(cb, 100));
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => schedule(runDifficulty, { timeout: 2000 }));
    } else {
        schedule(runDifficulty, { timeout: 2000 });
    }
})();

</script>
        <span style="color:#0d3b4a; text-align:center; margin-bottom:20px; font-size:1.8em;">💧<strong>Semois Water Level</strong> and <strong>Semois Flow Rate</strong></span>
       <p style="font-size:1.2rem; text-align:center; margin-bottom:40px; color:#555; line-height: 1.6;">
    The success of your descent essentially depends on the current flow rate.
    Our API allows you to follow the risks of prohibition in real-time. 
    These predictions are <strong>certified compliant</strong> and based on official data from:
    
    <cite style="font-style: normal; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
        <a href="https://hydrometrie.wallonie.be/" 
           title="Official source: Hydrométrie en Wallonie" 
           rel="noopener" 
           target="_blank"
           style="background: #e9ecef; padding: 10px 15px; border-radius: 5px; color: #2c3e50; font-weight: 600; text-decoration: none; border: 1px solid #ced4da; display: inline-flex; align-items: center; gap: 8px;">
           🏛️ Hydrometry Wallonia
        </a>
    </cite>
</p>
    
    <div style="max-width: 800px; margin: 20px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
        <div style="grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 5px;">
            <div style="height: 1px; background: #c8e6c9; flex: 1;"></div>
            <span style="text-transform: uppercase; font-size: 0.75rem; font-weight: 800; color: #1b5e20; letter-spacing: 1px;">💡 Outfit & Safety Advice</span>
            <div style="height: 1px; background: #c8e6c9; flex: 1;"></div>
        </div>
        <br />
<b>Warning</b>:  Undefined variable $kayak_advices in <b>/var/www/html/eng/niveau-d-eau-semois.php</b> on line <b>107</b><br />
<br />
<b>Fatal error</b>:  Uncaught TypeError: array_slice(): Argument #1 ($array) must be of type array, null given in /var/www/html/eng/niveau-d-eau-semois.php:107
Stack trace:
#0 /var/www/html/eng/niveau-d-eau-semois.php(107): array_slice()
#1 {main}
  thrown in <b>/var/www/html/eng/niveau-d-eau-semois.php</b> on line <b>107</b><br />