{{-- resources/views/pages/team/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Meet the Team — KiruDev Technologies')

@section('content')

<section style="padding:6rem 0 3rem;background:#fff;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <p class="eyebrow mb-3">The People</p>
        <h1 style="font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#0f0f14;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;">Meet the Team</h1>
        <p style="font-size:1rem;color:#6b6b7a;max-width:36rem;line-height:1.75;">A multidisciplinary team united by the mission to engineer exceptional digital products from Nigeria for the world.</p>
    </div>
</section>

@php
$deptLabels = ['executive'=>'Executive Management','technical'=>'Technical & Security','marketing'=>'Marketing & Growth','support'=>'Customer Care & Support'];
$deptColors = ['executive'=>'indigo','technical'=>'blue','marketing'=>'emerald','support'=>'amber'];
@endphp

<section style="padding:3rem 0 5rem;background:#f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        @foreach($team as $dept => $members)
        <div class="mb-14 reveal">
            <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;">
                <div style="width:28px;height:1px;background:#e5e7eb;"></div>
                <h2 style="font-size:0.72rem;font-weight:600;color:#9ca3af;letter-spacing:0.14em;text-transform:uppercase;">
                    {{ $deptLabels[$dept] ?? ucfirst($dept) }} · {{ $members->count() }} {{ $members->count()===1?'member':'members' }}
                </h2>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                @foreach($members as $m)
                <a href="{{ route('team.show', $m) }}" class="card" style="text-decoration:none;padding:1.5rem;display:flex;flex-direction:column;align-items:flex-start;">
                    @if($m->photo)
                    <img src="{{ $m->photo }}" alt="{{ $m->name }}" style="width:3.5rem;height:3.5rem;border-radius:12px;object-fit:cover;margin-bottom:1rem;border:1px solid #e5e7eb;">
                    @else
                    <div class="avatar avatar-{{ $deptColors[$m->department] ?? 'slate' }}" style="margin-bottom:1rem;width:3.5rem;height:3.5rem;border-radius:12px;">
                        {{ strtoupper(substr($m->name,0,1)) }}{{ strtoupper(substr(explode(' ',$m->name)[1]??'',0,1)) }}
                    </div>
                    @endif
                    <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;color:#0f0f14;margin-bottom:0.25rem;line-height:1.2;">{{ $m->name }}</h3>
                    <p style="font-size:0.75rem;color:#6b7280;line-height:1.4;flex:1;margin-bottom:0.75rem;">{{ $m->role }}</p>
                    @if($m->skills && count($m->skills))
                    <div style="display:flex;flex-wrap:wrap;gap:0.3rem;">
                        @foreach(array_slice($m->skills,0,3) as $skill)
                        <span class="tag" style="font-size:0.62rem;">{{ $skill }}</span>
                        @endforeach
                    </div>
                    @endif
                </a>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</section>

@endsection