@extends('layouts.nova.content-layout')

@section('page-content')

<div class="max-w-3xl">
    <p class="text-sm text-white/40 mb-1">Last updated: <time datetime="2026-03-01">March 1, 2026</time></p>
    <p class="text-neutral-300 text-sm leading-relaxed mb-6">
        Our volunteer staff help keep Skinbase running — from moderation and technical maintenance to community support.
        If you need assistance, reach out to any team member listed below or use the <a href="/contact" class="text-sky-400 hover:underline">contact form</a>.
    </p>
</div>

@if ($staffByRole->isEmpty())
    <div class="max-w-md rounded-lg border border-neutral-800 bg-nova-900/50 px-8 py-10 text-center">
        <svg class="mx-auto mb-3 h-10 w-10 text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
        </svg>
        <p class="text-neutral-400 text-sm">We're building our team. Check back soon!</p>
    </div>
@else
    <div class="space-y-12">
        @foreach ($roleLabels as $roleSlug => $roleLabel)
            @if ($staffByRole->has($roleSlug))
            <section>
                <h2 class="text-base font-semibold uppercase tracking-widest text-accent border-b border-neutral-800 pb-2 mb-6">
                    {{ $roleLabel }}
                </h2>

                <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($staffByRole[$roleSlug] as $member)
                    @php
                        $avatarUrl = $member->profile?->avatar_url;
                        $profileUrl = '/@' . $member->username;
                    @endphp
                    <div class="flex gap-4 rounded-lg border border-neutral-800 bg-nova-900/50 p-5 hover:border-neutral-700 transition-colors">
                        {{-- Avatar --}}
                        <a href="{{ $profileUrl }}" class="flex-shrink-0">
                            @if ($avatarUrl)
                                <img src="{{ $avatarUrl }}"
                                     alt="{{ $member->username }}"
                                     class="h-16 w-16 rounded-full object-cover ring-2 ring-neutral-700">
                            @else
                                <div class="h-16 w-16 rounded-full bg-neutral-800 flex items-center justify-center ring-2 ring-neutral-700">
                                    <span class="text-xl font-semibold text-neutral-400 uppercase">
                                        {{ substr($member->username, 0, 1) }}
                                    </span>
                                </div>
                            @endif
                        </a>

                        {{-- Info --}}
                        <div class="min-w-0 flex-1">
                            <a href="{{ $profileUrl }}"
                               class="font-semibold text-white hover:text-accent transition-colors truncate block">
                                {{ $member->username }}
                            </a>
                            @if ($member->name && $member->name !== $member->username)
                            <p class="text-xs text-neutral-500 mt-0.5 truncate">{{ $member->name }}</p>
                            @endif
                            <span class="mt-2 inline-block rounded-full px-2 py-0.5 text-xs font-medium
                                {{ $roleSlug === 'admin' ? 'bg-accent/10 text-accent' : 'bg-neutral-800 text-neutral-400' }}">
                                {{ ucfirst($roleSlug) }}
                            </span>
                            @if ($member->profile?->bio)
                            <p class="mt-2 text-xs text-neutral-400 line-clamp-2">{{ $member->profile->bio }}</p>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </section>
            @endif
        @endforeach
    </div>
@endif

    {{-- Footer note: contact staff --}}
    <div class="mt-10 rounded-xl border border-white/10 bg-white/[0.03] p-4 text-sm text-neutral-400">
        Need help? Start with the <a href="/contact" class="text-sky-400 hover:underline">Contact / Apply</a> form or send a private message to any staff member.
    </div>

@endsection