@extends('dashboard.app')

@section('title', $title)
@section('page_title', $title)
@section('page_subtitle', $subtitle)

@section('dashboard_content')
<div class="grid gap-6 lg:grid-cols-3">
    @foreach ($kpis as $kpi)
        <div class="rounded-3xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.25em] text-gray-400">{{ $kpi['label'] }}</div>
            <div class="mt-3 text-3xl font-semibold text-white">{{ $kpi['value'] }}</div>
            <div class="mt-2 text-sm text-gray-400">{{ $kpi['note'] }}</div>
        </div>
    @endforeach
</div>

<div class="mt-8 rounded-3xl glass-card p-6">
    <div class="flex items-center justify-between">
        <div>
            <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Summary</div>
            <div class="mt-2 text-xl font-semibold text-white">{{ $summaryTitle }}</div>
        </div>
        <span class="rounded-full border border-white/10 px-3 py-1 text-xs text-gray-300 theme-surface">{{ $summaryTag }}</span>
    </div>
    <p class="mt-4 text-sm text-gray-300">{{ $summaryBody }}</p>

    <div class="mt-6 grid gap-4 md:grid-cols-2">
        @foreach ($highlights as $highlight)
            <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                <div class="text-sm font-semibold text-gray-200">{{ $highlight['title'] }}</div>
                <div class="mt-2 text-2xl font-semibold text-white">{{ $highlight['value'] }}</div>
                <div class="mt-1 text-xs text-gray-400">{{ $highlight['note'] }}</div>
            </div>
        @endforeach
    </div>

    <div class="mt-6 rounded-2xl border border-dashed border-white/10 p-4 text-sm text-gray-300">
        {{ $footerNote }}
    </div>
</div>
@endsection