{{-- Premium hero (light theme) + 8 KPI metrics --}}
@php
    $userName = auth()->user()->name ?? 'Admin';
@endphp

<section
    class="dashboard-hero relative overflow-hidden rounded-2xl border border-violet-200/70 bg-gradient-to-br from-white via-violet-50/90 to-indigo-100/80 p-6 shadow-md shadow-violet-200/30 ring-1 ring-violet-100 sm:p-8"
    aria-labelledby="dashboard-hero-heading"
>
    {{-- Soft color orbs on tinted ground --}}
    <div class="pointer-events-none absolute -right-16 -top-20 h-56 w-56 rounded-full bg-violet-200/40 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 left-1/3 h-48 w-48 rounded-full bg-indigo-200/35 blur-3xl"></div>
    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_100%_0%,rgba(139,92,246,0.12),transparent_55%)]"></div>

    <div class="relative flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between lg:gap-10">
        <div class="max-w-xl space-y-3">
            <p class="text-sm font-semibold uppercase tracking-wide text-violet-600">{{ $greeting }}</p>
            <h2 id="dashboard-hero-heading" class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
                Welcome back, <span class="text-violet-700">{{ $userName }}</span>
            </h2>
            <p class="text-base leading-relaxed text-slate-600">
                Track invoices, payments, and business performance in one place.
            </p>
            <div class="flex flex-wrap items-center gap-3 pt-1 text-sm text-slate-700">
                <span class="inline-flex items-center gap-2 rounded-xl border border-violet-100 bg-white px-3 py-2 shadow-sm">
                    <span class="material-symbols-outlined text-[20px] text-violet-600" aria-hidden="true">calendar_today</span>
                    <span class="font-medium tabular-nums">{{ now()->format('l, M j, Y') }}</span>
                </span>
                <span class="inline-flex items-center gap-2 rounded-xl border border-violet-100 bg-white px-3 py-2 shadow-sm tabular-nums" id="dashboard-live-clock">
                    <span class="material-symbols-outlined text-[20px] text-violet-600" aria-hidden="true">schedule</span>
                    <span class="font-medium">{{ now()->format('g:i A') }}</span>
                </span>
            </div>
        </div>

        {{-- Illustration panel: solid fill + inline vector --}}
        <div class="flex w-full shrink-0 justify-center lg:w-auto lg:justify-end">
            <div
                class="relative flex h-44 w-full max-w-[280px] items-center justify-center overflow-hidden rounded-2xl border border-violet-200/80 bg-gradient-to-br from-violet-100 via-indigo-50 to-white p-6 shadow-inner ring-1 ring-white/80 sm:h-48 sm:max-w-[300px]"
                aria-hidden="true"
            >
                <div class="absolute inset-y-0 left-0 w-[291px] bg-[linear-gradient(135deg,rgba(255,255,255,0.9)_0%,transparent_45%,rgba(99,102,241,0.08)_100%)]"></div>
                <svg class="relative z-[1] h-32 w-full max-w-[220px] text-violet-600" viewBox="0 0 220 140" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
                    <title>Dashboard overview</title>
                    <rect x="8" y="12" width="120" height="88" rx="10" class="fill-white stroke-violet-200" stroke-width="1.5" />
                    <rect x="20" y="26" width="36" height="8" rx="2" class="fill-violet-200/80" />
                    <rect x="20" y="42" width="52" height="6" rx="2" class="fill-slate-200" />
                    <rect x="20" y="54" width="44" height="6" rx="2" class="fill-slate-200" />
                    <path d="M20 78 L38 58 L56 68 L74 48 L92 62" class="stroke-violet-500" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                    <circle cx="38" cy="58" r="3" class="fill-violet-500" />
                    <circle cx="56" cy="68" r="3" class="fill-violet-500" />
                    <circle cx="74" cy="48" r="3" class="fill-violet-500" />
                    <circle cx="92" cy="62" r="3" class="fill-violet-500" />
                    <rect x="136" y="24" width="76" height="104" rx="10" class="fill-violet-600/10 stroke-violet-300" stroke-width="1.5" />
                    <rect x="150" y="42" width="16" height="40" rx="3" class="fill-violet-400/90" />
                    <rect x="172" y="54" width="16" height="28" rx="3" class="fill-indigo-400/90" />
                    <rect x="194" y="34" width="16" height="48" rx="3" class="fill-violet-300/90" />
                    <rect x="150" y="94" width="48" height="10" rx="2" class="fill-violet-200/90" />
                    <circle cx="174" cy="108" r="18" class="fill-white stroke-violet-300" stroke-width="1.5" />
                    <path d="M174 98 v12 M168 104 h12" class="stroke-violet-600" stroke-width="2" stroke-linecap="round" />
                </svg>
            </div>
        </div>
    </div>
</section>

@include('admin.dashboard.partials.kpi-stat-cards')