@props([
    'title',
    'subtitle' => null,
    'icon'     => 'fa-tachometer-alt',
])

@php
    /*
     * ── Greeting ──────────────────────────────────────────────────────────
     * Time-aware greeting based on server hour.
     */
    $hour = now()->hour;
    if ($hour < 12) {
        $greeting     = 'Good morning';
        $greetingIcon = 'fa-sun';
    } elseif ($hour < 17) {
        $greeting     = 'Good afternoon';
        $greetingIcon = 'fa-cloud-sun';
    } else {
        $greeting     = 'Good evening';
        $greetingIcon = 'fa-moon';
    }

    /*
     * ── User data ─────────────────────────────────────────────────────────
     */
    $authUser  = auth()->user();
    $userName  = $authUser?->name  ?? 'User';
    $roleName  = $authUser?->roles->first()?->name ?? 'User';
    $avatarUrl = $authUser?->avatar_url ?? null;

    $initials = collect(explode(' ', $userName))
                    ->map(fn($w) => strtoupper(substr($w, 0, 1)))
                    ->take(2)
                    ->implode('');

    /*
     * ── Role descriptions (≤10 words each) ───────────────────────────────
     * One concise sentence per role describing the dashboard purpose.
     */
    $roleDescriptions = [
        'Super Manager'   => 'Full system control, users, roles, and all configurations.',
        'Manager'         => 'Oversee operations, members, training, and organisation activity.',
        'Members'         => 'Track membership, contributions, loans, and renewal status.',
        'Trainers'        => 'Manage sessions, attendance, registrations, and training materials.',
        'Trainees'        => 'Follow your learning journey, sessions, and certificates.',
        'Mentor'          => 'Guide mentees, manage sessions, assignments, and progress.',
        'Mentee'          => 'Connect with mentors, track sessions, and grow your skills.',
        'Partners'        => 'Collaborate, manage partnerships, forum activity, and payments.',
        'Contributor'     => 'Create discussions, share knowledge, and track contributions.',
        'Health Marketor' => 'Register institutions, manage machines, and track campaigns.',
    ];
    $roleDescription = $roleDescriptions[$roleName] ?? 'Access your personalised dashboard and manage your activities.';

    /*
     * ── Colour palette ────────────────────────────────────────────────────
     * Hero background : #f1f5f9  (slate-100) — light grey, visible, white-compatible
     * Primary text    : #1e293b  (slate-800) — near-black, strong contrast
     * Secondary text  : #475569  (slate-600) — dark grey for descriptions
     * Tertiary text   : #64748b  (slate-500) — muted grey for date/time
     * Accent          : #1a4731  (forest green) — brand colour for icons/accents
     */
@endphp

{{-- ============================================================
     DASHBOARD HERO
     Light-grey background (#f1f5f9), three-column layout:
       Col 1 — Greeting + user name + date/time
       Col 2 — Role dashboard title + 10-word description
       Col 3 — Oval user avatar only (no name, no role, no toggle)
     ============================================================ --}}
<div class="w-full" style="background-color: #f1f5f9; border-bottom: 1px solid #e2e8f0;">

    <div class="px-6 py-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 items-center">

            {{-- ── COLUMN 1: Greeting + name + date/time ──────────────── --}}
            <div class="flex flex-col justify-center min-w-0">

                {{-- Greeting line --}}
                <p class="flex items-center gap-1.5 text-xs font-medium mb-0.5"
                   style="color: #64748b;">
                    <i class="fas {{ $greetingIcon }} text-xs"
                       style="color: {{ $hour < 12 ? '#f59e0b' : ($hour < 17 ? '#0ea5e9' : '#6366f1') }};"></i>
                    {{ $greeting }}
                </p>

                {{-- User name — prominent --}}
                <h2 class="text-xl font-bold leading-tight truncate"
                    style="color: #1e293b;">
                    {{ $userName }}
                </h2>

                {{-- Date + live clock --}}
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5">
                    <span class="inline-flex items-center gap-1 text-xs"
                          style="color: #64748b;">
                        <i class="fas fa-calendar-day text-xs" style="color: #1a4731;"></i>
                        {{ now()->format('D, d M Y') }}
                    </span>
                    <span class="inline-flex items-center gap-1 text-xs"
                          style="color: #64748b;"
                          x-data="{ t: '' }"
                          x-init="
                              const p = n => String(n).padStart(2,'0');
                              const tick = () => {
                                  const d = new Date();
                                  const h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
                                  t = p(h % 12 || 12) + ':' + p(m) + ':' + p(s) + ' ' + (h >= 12 ? 'PM' : 'AM');
                              };
                              tick(); setInterval(tick, 1000);
                          ">
                        <i class="fas fa-clock text-xs" style="color: #1a4731;"></i>
                        <span x-text="t"></span>
                    </span>
                </div>
            </div>

            {{-- ── COLUMN 2: Dashboard title + role description ────────── --}}
            <div class="flex flex-col justify-center min-w-0 md:border-l md:border-r md:px-6"
                 style="border-color: #cbd5e1;">

                {{-- Small icon + dashboard label --}}
                <div class="flex items-center gap-2 mb-1">
                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg flex-shrink-0"
                          style="background-color: #1a4731;">
                        <i class="fas {{ $icon }} text-white text-xs"></i>
                    </span>
                    <h1 class="text-base font-bold leading-tight truncate"
                        style="color: #1e293b;">
                        {{ $title }}
                    </h1>
                </div>

                {{-- Role description — ≤10 words --}}
                <p class="text-xs leading-relaxed"
                   style="color: #475569;">
                    {{ $roleDescription }}
                </p>
            </div>

            {{-- ── COLUMN 3: Oval user avatar only ─────────────────────── --}}
            <div class="flex items-center justify-center md:justify-end">

                {{-- Oval avatar — wider than tall, fits the column space --}}
                <div class="relative overflow-hidden flex-shrink-0"
                     style="
                         width: 88px;
                         height: 72px;
                         border-radius: 50%;
                         background: linear-gradient(135deg, #276749 0%, #1a4731 100%);
                         box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #1a4731, 0 4px 12px rgba(26,71,49,0.25);
                     ">
                    @if($avatarUrl)
                        <img src="{{ $avatarUrl }}"
                             alt="{{ $userName }}"
                             class="w-full h-full object-cover"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <span class="absolute inset-0 hidden items-center justify-center
                                     text-white font-bold text-lg">{{ $initials }}</span>
                    @else
                        <span class="absolute inset-0 flex items-center justify-center
                                     text-white font-bold text-lg">{{ $initials }}</span>
                    @endif
                </div>
            </div>

        </div>
    </div>

    {{-- Brand accent bar — green → red gradient --}}
    <div class="h-[3px] w-full"
         style="background: linear-gradient(90deg, #1a4731 0%, #276749 40%, #c53030 100%);"></div>

</div>
