@if(!empty($pageMessages ?? []))
    <div class="mb-4 rounded border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
        {{ implode(' ', $pageMessages) }}
    </div>
@endif

{{-- ===== IFI STAT CARDS ===== --}}
<div class="sphf-ifi-stat-grid">
    @php
    $ifiStats = [
        ['label' => 'WORLD BANK', 'value' => '95,200', 'pct' => '38.3%', 'tone' => 'tone-blue'],
        ['label' => 'ADB',        'value' => '78,400', 'pct' => '48.4%', 'tone' => 'tone-purple'],
        ['label' => 'ISDB',       'value' => '42,600', 'pct' => '28.8%', 'tone' => 'tone-green'],
        ['label' => 'EIB',        'value' => '21,800', 'pct' => '25.6%', 'tone' => 'tone-orange'],
        ['label' => 'GOS / GOP',  'value' => '10,320', 'pct' => '18.8%', 'tone' => 'tone-cyan'],
    ];
    @endphp
    @foreach($ifiStats as $stat)
    <div class="sphf-ifi-stat-card {{ $stat['tone'] }}">
        <span class="sphf-ifi-stat-card__label">{{ $stat['label'] }}</span>
        <span class="sphf-ifi-stat-card__value">{{ $stat['value'] }}</span>
        <div class="sphf-ifi-stat-card__footer">
            <span class="sphf-ifi-stat-card__footer-label">Progress</span>
            <span class="sphf-ifi-pct-badge">{{ $stat['pct'] }}</span>
        </div>
    </div>
    @endforeach
</div>

{{-- ===== CHART + TABLE GRID ===== --}}
<div class="sphf-ifi-main-grid">

    {{-- IFI Completion Trend (Cumulative) --}}
    <article class="sphf-card sphf-card--wide" id="sphfIfiTrendCard">
        <div class="sphf-card__header">
            <h3>IFI Completion Trend (Cumulative)</h3>
        </div>
        <div id="sphfIfiTrendChart" class="sphf-chart sphf-chart--line" style="min-height:280px;"></div>
    </article>

    {{-- IFI Disbursement vs Completion --}}
    <article class="sphf-card sphf-card--wide" id="sphfIfiDisbCard" style="display:flex;flex-direction:column;">
        <div class="sphf-card__header">
            <h3>IFI Disbursement vs Completion</h3>
        </div>
        <div style="flex:1;overflow:auto;">
            <table class="sphf-ifi-disb-table">
                <thead>
                    <tr>
                        <th>IFI</th>
                        <th>ALLOCATED</th>
                        <th>COMPLETED</th>
                        <th>DISB.</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $disbRows = [
                        ['ifi' => 'World Bank', 'allocated' => '248,400', 'completed' => '95,200', 'pct' => '38%', 'color' => '#dbeafe', 'text' => '#1d4ed8'],
                        ['ifi' => 'ADB',        'allocated' => '162,000', 'completed' => '78,400', 'pct' => '48%', 'color' => '#fef9c3', 'text' => '#a16207'],
                        ['ifi' => 'IsDB',       'allocated' => '148,000', 'completed' => '42,600', 'pct' => '29%', 'color' => '#dcfce7', 'text' => '#15803d'],
                        ['ifi' => 'EIB',        'allocated' => '85,000',  'completed' => '21,800', 'pct' => '26%', 'color' => '#fef2f2', 'text' => '#dc2626'],
                        ['ifi' => 'GoS/GoP',    'allocated' => '55,045',  'completed' => '10,320', 'pct' => '19%', 'color' => '#f3e8ff', 'text' => '#7c3aed'],
                    ];
                    @endphp
                    @foreach($disbRows as $row)
                    <tr>
                        <td><strong>{{ $row['ifi'] }}</strong></td>
                        <td>{{ $row['allocated'] }}</td>
                        <td>{{ $row['completed'] }}</td>
                        <td>
                            <span class="sphf-ifi-disb-pct" style="background:{{ $row['color'] }};color:{{ $row['text'] }};">
                                {{ $row['pct'] }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="sphf-ifi-disb-footer">
            <span>Values in USD millions</span>
            <a href="#">View Detailed Report &rarr;</a>
        </div>
    </article>

</div>