@php $split = $direct_vs_referral ?? ['direct' => 0, 'referral' => 0, 'utm' => 0]; @endphp

<div class="analytics-kpi-grid">
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Direct</p>
        <p class="analytics-kpi__value">{{ number_format($split['direct'] ?? 0) }}</p>
        <p class="analytics-kpi__hint">Sessions without referrer/UTM</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Referral</p>
        <p class="analytics-kpi__value">{{ number_format($split['referral'] ?? 0) }}</p>
        <p class="analytics-kpi__hint">Inbound referrer present</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Campaign (UTM)</p>
        <p class="analytics-kpi__value">{{ number_format($split['utm'] ?? 0) }}</p>
        <p class="analytics-kpi__hint">utm_source present</p>
    </div>
</div>

<div class="seo-hub__grid seo-hub__grid--three analytics-hub__grid mt-4">
    <section class="home-seo-card">
        <div class="seo-hub__card-head"><div><h3 class="text-sm font-semibold text-slate-900">UTM sources</h3></div></div>
        <ul class="seo-hub__list">
            @forelse($utm_sources ?? [] as $row)
                <li><strong>{{ $row->label }}</strong><span>{{ number_format($row->events) }}</span></li>
            @empty
                <li class="is-empty">No UTM sources.</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">UTM mediums</h3></div></div>
        <ul class="seo-hub__list">
            @forelse($utm_mediums ?? [] as $row)
                <li><strong>{{ $row->label }}</strong><span>{{ number_format($row->events) }}</span></li>
            @empty
                <li class="is-empty">No UTM mediums.</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">UTM campaigns</h3></div></div>
        <ul class="seo-hub__list">
            @forelse($utm_campaigns ?? [] as $row)
                <li><strong>{{ $row->label }}</strong><span>{{ number_format($row->events) }}</span></li>
            @empty
                <li class="is-empty">No UTM campaigns.</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">Referrers</h3>
            <p class="text-xs text-slate-500">External hosts sending traffic</p>
        </div>
    </div>
    <div class="content-table-wrap">
        <table class="content-table">
            <thead>
                <tr>
                    <th>Host</th>
                    <th>Full referrer</th>
                    <th>Events</th>
                    <th>Sessions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($referrers ?? [] as $row)
                    <tr>
                        <td class="content-table__primary">{{ $row->host }}</td>
                        <td class="text-xs text-slate-500 truncate max-w-md">{{ Str::limit($row->referrer, 80) }}</td>
                        <td>{{ number_format($row->events) }}</td>
                        <td>{{ number_format($row->sessions) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="content-table__empty">No referrers captured yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>