{{--
  WIDGET NRES — Dashboard: Cuaca · APIMS · Amaran · Statistik
  ---------------------------------------------------------------------------
  Data SEBENAR (bukan demo):
    /widget/weather          → data.gov.my (MET Malaysia)
    /widget/air-quality      → APIMS · DOE (proksi, kerana CORS)
    /widget/weather-warning  → data.gov.my amaran cuaca
    /widget/visitor-stats    → visitor_page_views (statistik lawatan)
--}}
<div class="container-xl">
    <section class="environment-section mb-5" id="alam-sekitar"
        aria-label="Cuaca, kualiti udara dan statistik"
        data-weather="{{ url('/widget/weather') }}"
        data-air="{{ url('/widget/air-quality') }}"
        data-warning="{{ url('/widget/weather-warning') }}"
        data-stats="{{ url('/widget/visitor-stats') }}">

        <div class="weather-demo-label">
            Data langsung · MET Malaysia (cuaca) · JAS/DOE (IPU) · statistik lawatan laman
        </div>

        <div class="weather-dashboard">

            {{-- 1. CUACA --}}
            <article class="weather-tile">
                <h2>CUACA HARI INI — <span id="wxPlace">PUTRAJAYA</span></h2>
                <p class="weather-source">Sumber: MET Malaysia · data.gov.my</p>

                <div class="weather-reading">
                    <span class="storm-icon" id="wxIcon" aria-hidden="true">☀️</span>
                    <div>
                        <strong id="wxTemp">–</strong>
                        <span id="wxSummary">Memuatkan…</span>
                    </div>
                </div>

                <div class="weather-range" id="wxRange">H: – &nbsp; L: –</div>
                <p class="weather-updated" id="wxUpdated">Memuatkan data…</p>
            </article>

            {{-- 2. INDEKS PENCEMARAN UDARA --}}
            <article class="weather-tile">
                <h2>INDEKS PENCEMAR UDARA (APIMS)</h2>
                <p class="weather-source">Sumber: JAS · DOE (APIMS)</p>

                <div class="air-gauge">
                    <svg viewBox="0 0 220 120" aria-hidden="true">
                        <path d="M20 105a90 90 0 0 1 180 0" fill="none" stroke="#e5d039" stroke-width="14" />
                        <path d="M20 105a90 90 0 0 1 67-87" fill="none" stroke="#54a96a" stroke-width="14" />
                        <path d="M87 18a90 90 0 0 1 23-3" fill="none" stroke="#88b748" stroke-width="14" />
                        <line id="airNeedle" x1="110" y1="105" x2="110" y2="32" stroke="#14413a" stroke-width="3"
                            stroke-linecap="round" />
                        <circle cx="110" cy="105" r="6" fill="#14413a" />
                    </svg>

                    <div>
                        <strong id="airValue">–</strong>
                        <b id="airClass">Memuatkan…</b>
                    </div>
                </div>

                <p class="air-caption" id="airCaption">Memuatkan data IPU…</p>
                <p class="weather-updated" id="airUpdated">Stesen –</p>
            </article>

            {{-- 3. AMARAN CUACA / JEREBU --}}
            <article class="weather-tile">
                <h2>AMARAN CUACA / JEREBU SEMASA</h2>
                <p class="weather-source">Sumber: MET Malaysia · data.gov.my</p>

                <span class="warning-check" id="warnIcon" aria-hidden="true">✓</span>
                <h3 id="warnTitle">Memuatkan…</h3>
                <p class="warning-copy" id="warnText">Menyemak status amaran semasa…</p>
                <p class="weather-updated" id="warnUpdated"></p>
                <a class="warning-link" href="https://www.met.gov.my/" target="_blank" rel="noopener">Lihat Peta Amaran ›</a>
            </article>

            {{-- 4. STATISTIK LAWATAN --}}
            <article class="weather-tile">
                <h2>STATISTIK PERKHIDMATAN<br>ATAS TALIAN <span id="statYear">2026</span></h2>
                <p class="weather-source">Sumber: statistik lawatan laman</p>

                <strong class="transaction-total" id="statTotal">–</strong>
                <span class="transaction-label">Jumlah Lawatan Halaman</span>
                <p class="transaction-growth" id="statGrowth"></p>

                <div class="transaction-breakdown">
                    <div><span>Hari Ini</span><b id="statToday">–</b></div>
                    <div><span>Bulan Ini</span><b id="statMonth">–</b></div>
                    <div><span>Tahun Ini</span><b id="statYearTotal">–</b></div>
                </div>
            </article>

        </div>
    </section>
</div>

<style>
    /* ── label ─────────────────────────────────────────────────────── */
    .weather-demo-label {
        margin-bottom: 14px;
        padding: 9px 14px;
        border-radius: 10px;
        background: #eef7f8;
        color: #0c6a77;
        font-size: .78rem;
        font-weight: 600;
    }

    /* ── dashboard ─────────────────────────────────────────────────── */
    .weather-dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }

    .weather-tile {
        display: flex;
        flex-direction: column;
        padding: 18px 20px;
        border: 1px solid #dbe7e9;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(16, 62, 56, .06);
    }

    .weather-tile h2 {
        margin: 0 0 4px;
        color: #14413a;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1.35;
        text-transform: uppercase;
    }

    .weather-source {
        margin: 0 0 14px;
        color: #8aa0a0;
        font-size: .72rem;
        font-weight: 600;
    }

    .weather-reading {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .storm-icon {
        font-size: 2.4rem;
        line-height: 1;
    }

    .weather-reading strong {
        display: block;
        color: #11808f;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .weather-reading span {
        color: #5c6b6b;
        font-size: .84rem;
        font-weight: 600;
    }

    .weather-range {
        margin-top: 12px;
        padding: 8px 12px;
        border-radius: 10px;
        background: #f6fbfb;
        color: #24443f;
        font-size: .82rem;
        font-weight: 700;
    }

    .weather-updated {
        margin: auto 0 0;
        padding-top: 12px;
        color: #9aacab;
        font-size: .72rem;
    }

    /* ── tolok IPU ─────────────────────────────────────────────────── */
    .air-gauge {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .air-gauge svg {
        width: 132px;
        height: 74px;
        flex-shrink: 0;
    }

    .air-gauge strong {
        display: block;
        color: #14413a;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .air-gauge b {
        color: #11808f;
        font-size: .84rem;
        font-weight: 700;
    }

    .air-caption {
        margin: 12px 0 0;
        color: #5c6b6b;
        font-size: .82rem;
    }

    /* ── amaran ────────────────────────────────────────────────────── */
    .warning-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #e6f6ec;
        color: #1f9d55;
        font-size: 1.4rem;
        font-weight: 800;
    }

    .warning-check.is-alert {
        background: #fdeaea;
        color: #d92d20;
    }

    .weather-tile h3 {
        margin: 12px 0 6px;
        color: #14413a;
        font-size: 1rem;
        font-weight: 800;
    }

    .warning-copy {
        margin: 0;
        color: #5c6b6b;
        font-size: .84rem;
        line-height: 1.5;
    }

    .warning-link {
        margin-top: 12px;
        color: #0c6a77;
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
    }

    .warning-link:hover {
        text-decoration: underline;
    }

    /* ── statistik ─────────────────────────────────────────────────── */
    .transaction-total {
        display: block;
        color: #11808f;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .transaction-label {
        color: #8aa0a0;
        font-size: .76rem;
        font-weight: 700;
    }

    .transaction-growth {
        margin: 10px 0 0;
        color: #5c6b6b;
        font-size: .82rem;
    }

    .transaction-growth b {
        color: #1f9d55;
    }

    .transaction-breakdown {
        display: grid;
        gap: 6px;
        margin-top: 14px;
    }

    .transaction-breakdown div {
        display: flex;
        justify-content: space-between;
        padding: 7px 10px;
        border-radius: 9px;
        background: #f6fbfb;
        font-size: .8rem;
    }

    .transaction-breakdown span {
        color: #4a6b66;
        font-weight: 600;
    }

    .transaction-breakdown b {
        color: #14413a;
        font-weight: 800;
    }

</style>