@php
    // Demo dashboard — numbers are fake (User count is real). Sparkline
    // points are SVG viewBox 0..100 wide, 0..30 tall (top→bottom).
    $stats = [
        [
            'key'   => 'users',
            'icon'  => 'users',
            'label' => __('dashboard::dashboard.home.stats.users'),
            'value' => number_format(\App\Models\User::count()),
            'delta' => '+12.4%',
            'up'    => true,
            'spark' => '0,24 10,22 20,20 30,18 40,15 50,12 60,14 70,10 80,8 90,6 100,4',
        ],
        [
            'key'   => 'revenue',
            'icon'  => 'banknotes',
            'label' => __('dashboard::dashboard.home.stats.revenue'),
            'value' => '$48,392',
            'delta' => '+8.1%',
            'up'    => true,
            'spark' => '0,22 10,18 20,20 30,12 40,15 50,8 60,10 70,6 80,8 90,4 100,5',
        ],
        [
            'key'   => 'orders',
            'icon'  => 'shopping-bag',
            'label' => __('dashboard::dashboard.home.stats.orders'),
            'value' => number_format(1284),
            'delta' => '-2.3%',
            'up'    => false,
            'spark' => '0,8 10,10 20,7 30,12 40,9 50,14 60,11 70,16 80,13 90,18 100,15',
        ],
        [
            'key'   => 'sessions',
            'icon'  => 'bolt',
            'label' => __('dashboard::dashboard.home.stats.sessions'),
            'value' => number_format(342),
            'delta' => '+24%',
            'up'    => true,
            'spark' => '0,20 10,16 20,18 30,10 40,12 50,6 60,8 70,4 80,6 90,2 100,3',
        ],
    ];

    $activity = [
        ['icon' => 'user-plus',           'message' => __('dashboard::dashboard.home.activity.events.new_user', ['name' => 'Sara M.']),     'time' => __('dashboard::dashboard.home.activity.time.minutes_ago', ['count' => 2])],
        ['icon' => 'check-circle',        'message' => __('dashboard::dashboard.home.activity.events.order_paid', ['order' => '1248']),     'time' => __('dashboard::dashboard.home.activity.time.minutes_ago', ['count' => 12])],
        ['icon' => 'shield-exclamation',  'message' => __('dashboard::dashboard.home.activity.events.failed_login', ['ip' => '102.41.8.21']), 'time' => __('dashboard::dashboard.home.activity.time.hours_ago', ['count' => 1])],
        ['icon' => 'cog-6-tooth',         'message' => __('dashboard::dashboard.home.activity.events.settings_updated'),                    'time' => __('dashboard::dashboard.home.activity.time.hours_ago', ['count' => 3])],
        ['icon' => 'arrow-uturn-left',    'message' => __('dashboard::dashboard.home.activity.events.payment_refunded', ['order' => '1196']), 'time' => __('dashboard::dashboard.home.activity.time.yesterday')],
    ];
@endphp

<div class="space-y-6">
    {{-- Heading --}}
    <div class="flex items-end justify-between">
        <div>
            <h1 class="dash-page-heading">
                {{ __('dashboard::dashboard.home.welcome', ['name' => auth()->user()?->getDisplayName() ?? '']) }}
            </h1>
            <p class="dash-page-subheading">
                {{ __('dashboard::dashboard.home.subtitle') }}
            </p>
        </div>
    </div>

    {{-- KPI grid --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ($stats as $stat)
            <div class="dash-card dash-stat-card">
                <div class="flex items-start justify-between">
                    <span class="dash-stat-icon">
                        <flux:icon :icon="$stat['icon']" class="size-5"/>
                    </span>
                    <span class="dash-stat-delta {{ $stat['up'] ? 'dash-stat-delta--up' : 'dash-stat-delta--down' }}">
                        <flux:icon :icon="$stat['up'] ? 'arrow-trending-up' : 'arrow-trending-down'" class="size-3"/>
                        {{ $stat['delta'] }}
                    </span>
                </div>

                <p class="dash-stat-label mt-5">{{ $stat['label'] }}</p>
                <p class="dash-stat-value">{{ $stat['value'] }}</p>

                <svg class="dash-stat-sparkline"
                     viewBox="0 0 100 30"
                     preserveAspectRatio="none"
                     aria-hidden="true">
                    <defs>
                        <linearGradient id="dash-spark-{{ $stat['key'] }}" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%"   stop-color="currentColor" stop-opacity="0.35"/>
                            <stop offset="100%" stop-color="currentColor" stop-opacity="0"/>
                        </linearGradient>
                    </defs>
                    <polygon points="0,30 {{ $stat['spark'] }} 100,30"
                             fill="url(#dash-spark-{{ $stat['key'] }})"/>
                    <polyline points="{{ $stat['spark'] }}"
                              fill="none"
                              stroke="currentColor"
                              stroke-width="2"
                              stroke-linecap="round"
                              stroke-linejoin="round"/>
                </svg>

                <p class="mt-1 text-[11px]" style="color: var(--muted-foreground);">
                    {{ __('dashboard::dashboard.home.stats.vs_last_week') }}
                </p>
            </div>
        @endforeach
    </div>

    {{-- Activity feed --}}
    <div class="dash-card">
        <div class="flex items-center justify-between">
            <h2 class="text-base font-semibold tracking-tight"
                style="color: var(--surface-foreground);">
                {{ __('dashboard::dashboard.home.activity.title') }}
            </h2>
            <a href="#" class="dash-auth-link group">
                <span class="dash-auth-link-underline text-xs">
                    {{ __('dashboard::dashboard.home.activity.view_all') }}
                </span>
            </a>
        </div>

        <ul class="dash-activity-list mt-2">
            @foreach ($activity as $event)
                <li class="dash-activity-item">
                    <span class="dash-activity-icon">
                        <flux:icon :icon="$event['icon']" class="size-4"/>
                    </span>
                    <div class="min-w-0 flex-1">
                        <p class="dash-activity-message truncate">{{ $event['message'] }}</p>
                        <p class="dash-activity-time">{{ $event['time'] }}</p>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</div>