@php
    $maxTrend = max(1, collect($trend ?? [])->max('events') ?: 1);
    $maxHourly = max(1, collect($hourly ?? [])->max('total') ?: 1);
@endphp

<div class="analytics-kpi-grid">
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Events</p>
        <p class="analytics-kpi__value">{{ number_format($kpis['events'] ?? 0) }}</p>
        <p class="analytics-kpi__hint">{{ number_format($kpis['today_events'] ?? 0) }} today</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Page views</p>
        <p class="analytics-kpi__value">{{ number_format($kpis['page_views'] ?? 0) }}</p>
        <p class="analytics-kpi__hint">{{ number_format($kpis['today_page_views'] ?? 0) }} today</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Avg engagement</p>
        <p class="analytics-kpi__value">{{ number_format($kpis['avg_engagement'] ?? 0, 0) }}s</p>
        <p class="analytics-kpi__hint">Per instrumented hit</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Conversions</p>
        <p class="analytics-kpi__value">{{ number_format($kpis['conversions'] ?? 0) }}</p>
        <p class="analytics-kpi__hint">{{ number_format($kpis['converted_sessions'] ?? 0) }} sessions</p>
    </div>
</div>

<div class="seo-hub__grid analytics-hub__grid">
    <section class="home-seo-card">
        <div class="seo-hub__card-head">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Traffic trend</h3>
                <p class="text-xs text-slate-500">Events, page views, and conversions over the selected window.</p>
            </div>
        </div>
        <div class="analytics-bars">
            @foreach($trend as $day)
                <div class="analytics-bars__col" title="{{ $day['date'] }}: {{ $day['events'] }} events">
                    <div class="analytics-bars__stack">
                        <span class="analytics-bars__fill analytics-bars__fill--events" style="height: {{ round(($day['events'] / $maxTrend) * 100) }}%"></span>
                    </div>
                    <span class="analytics-bars__label">{{ $day['label'] }}</span>
                </div>
            @endforeach
        </div>
        <div class="analytics-legend">
            <span><i class="analytics-dot analytics-dot--teal"></i> Events peak {{ number_format($maxTrend) }}</span>
            <span>PV {{ number_format(collect($trend)->sum('page_views')) }} · Conv {{ number_format(collect($trend)->sum('conversions')) }}</span>
        </div>
    </section>

    <section class="home-seo-card">
        <div class="seo-hub__card-head">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Hourly heat</h3>
                <p class="text-xs text-slate-500">When activity clusters across a 24-hour clock.</p>
            </div>
        </div>
        <div class="analytics-bars analytics-bars--hourly">
            @foreach($hourly as $hour)
                <div class="analytics-bars__col" title="{{ $hour['label'] }}: {{ $hour['total'] }}">
                    <div class="analytics-bars__stack">
                        <span class="analytics-bars__fill" style="height: {{ round(($hour['total'] / $maxHourly) * 100) }}%"></span>
                    </div>
                    @if($hour['hour'] % 3 === 0)
                        <span class="analytics-bars__label">{{ $hour['hour'] }}</span>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
</div>

<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">Top pages</h3>
                <p class="text-xs text-slate-500">Highest traffic paths</p>
            </div>
        </div>
        <ul class="seo-hub__list">
            @forelse($top_pages ?? [] as $row)
                <li>
                    <strong class="truncate" title="{{ $row->path }}">{{ Str::limit($row->path, 36) }}</strong>
                    <span>{{ number_format($row->page_views ?: $row->events) }}</span>
                </li>
            @empty
                <li class="is-empty">No page data yet — new page views will appear here.</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">Top countries</h3>
                <p class="text-xs text-slate-500">Geographic concentration</p>
            </div>
        </div>
        <ul class="seo-hub__list">
            @forelse($top_countries ?? [] as $row)
                <li>
                    <strong>{{ $row->label }}</strong>
                    <span>{{ number_format($row->total) }}</span>
                </li>
            @empty
                <li class="is-empty">Geo enrichment starts with new traffic.</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">Devices</h3>
                <p class="text-xs text-slate-500">Desktop / mobile / tablet</p>
            </div>
        </div>
        <ul class="seo-hub__list">
            @forelse($top_devices ?? [] as $row)
                <li>
                    <strong class="capitalize">{{ $row->label }}</strong>
                    <span>{{ number_format($row->total) }}</span>
                </li>
            @empty
                <li class="is-empty">Device signals populate on new events.</li>
            @endforelse
        </ul>
    </section>
</div>

<div class="seo-hub__grid analytics-hub__grid">
    <section class="home-seo-card">
        <div class="seo-hub__card-head">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">Top event types</h3>
                <p class="text-xs text-slate-500">Behavioural mix for this period</p>
            </div>
        </div>
        <ul class="seo-hub__rank-list">
            @forelse($top_events ?? [] as $i => $row)
                <li>
                    <span class="analytics-rank">{{ $i + 1 }}</span>
                    <strong>{{ $row->label }}</strong>
                    <span>{{ number_format($row->total) }}</span>
                </li>
            @empty
                <li class="is-empty">No events in range.</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">Live pulse</h3>
                <p class="text-xs text-slate-500">Last 30 minutes</p>
            </div>
        </div>
        <ul class="dash-feed">
            @forelse($live ?? [] as $event)
                <li class="dash-feed__item">
                    <span class="dash-feed__dot"></span>
                    <div class="dash-feed__body">
                        <strong>{{ $event->event_type }}</strong>
                        <em>{{ $event->path ?: Str::limit($event->url, 48) }} · {{ $event->city ?: $event->country ?: '—' }} · {{ $event->occurred_at?->diffForHumans() }}</em>
                    </div>
                </li>
            @empty
                <li class="dash-feed__empty">Quiet right now — waiting for fresh hits.</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">Recent stream</h3>
            <p class="text-xs text-slate-500">Latest instrumented behaviours</p>
        </div>
        <a href="{{ route('admin.analytics.index', ['tab' => 'log', 'days' => $days]) }}" class="content-link">Open full log</a>
    </div>
    <div class="content-table-wrap">
        <table class="content-table">
            <thead>
                <tr>
                    <th>Event</th>
                    <th>Path</th>
                    <th>Location</th>
                    <th>Device</th>
                    <th>IP</th>
                    <th>When</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recent ?? [] as $event)
                    <tr>
                        <td>
                            <span class="content-badge">{{ $event->event_type }}</span>
                        </td>
                        <td class="text-slate-600">{{ Str::limit($event->path ?: $event->url, 40) }}</td>
                        <td>{{ $event->locationLabel() }}</td>
                        <td class="capitalize">{{ $event->device_type ?: '—' }}</td>
                        <td class="font-mono text-xs">{{ $event->displayIp() }}</td>
                        <td class="text-slate-500">{{ $event->occurred_at?->diffForHumans() }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="content-table__empty">No recent events.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>