@php $maxGeo = max(1, collect($geo_map ?? [])->max('events') ?: 1); @endphp

<div class="seo-hub__grid seo-hub__grid--three analytics-hub__grid">
    <section class="home-seo-card">
        <div class="seo-hub__card-head">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Countries</h3>
                <p class="text-xs text-slate-500">Event volume by country</p>
            </div>
        </div>
        <ul class="seo-hub__list">
            @forelse($countries ?? [] as $row)
                <li>
                    <strong>{{ $row->label }}</strong>
                    <span>{{ number_format($row->total) }}</span>
                </li>
            @empty
                <li class="is-empty">No country data yet.</li>
            @endforelse
        </ul>
    </section>

    <section class="home-seo-card">
        <div class="seo-hub__card-head">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Regions / states</h3>
                <p class="text-xs text-slate-500">Area-level concentration</p>
            </div>
        </div>
        <ul class="seo-hub__list">
            @forelse($regions ?? [] as $row)
                <li>
                    <strong>{{ $row->label }}</strong>
                    <span>{{ number_format($row->total) }}</span>
                </li>
            @empty
                <li class="is-empty">Region lookup fills when public IP geo is available.</li>
            @endforelse
        </ul>
    </section>

    <section class="home-seo-card">
        <div class="seo-hub__card-head">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Cities</h3>
                <p class="text-xs text-slate-500">Local market hotspots</p>
            </div>
        </div>
        <ul class="seo-hub__list">
            @forelse($cities ?? [] as $row)
                <li>
                    <strong>{{ $row->label }}</strong>
                    <span>{{ number_format($row->total) }}</span>
                </li>
            @empty
                <li class="is-empty">City data pending enriched events.</li>
            @endforelse
        </ul>
    </section>
</div>

<section class="home-seo-card mt-4">
    <div class="seo-hub__card-head">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Geographic map table</h3>
            <p class="text-xs text-slate-500">Country · events · sessions · unique IPs</p>
        </div>
    </div>
    <div class="content-table-wrap">
        <table class="content-table">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Code</th>
                    <th>Share</th>
                    <th>Events</th>
                    <th>Sessions</th>
                    <th>Visitors</th>
                </tr>
            </thead>
            <tbody>
                @forelse($geo_map ?? [] as $row)
                    <tr>
                        <td class="content-table__primary">{{ $row->country }}</td>
                        <td><span class="content-badge">{{ $row->country_code ?: '—' }}</span></td>
                        <td style="min-width:8rem;">
                            <div class="analytics-meter">
                                <span style="width: {{ round(($row->events / $maxGeo) * 100) }}%"></span>
                            </div>
                        </td>
                        <td>{{ number_format($row->events) }}</td>
                        <td>{{ number_format($row->sessions) }}</td>
                        <td>{{ number_format($row->visitors) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="content-table__empty">No geography recorded.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>