@extends('layouts.app')
@section('title', $member->name . ' — KiruDev Technologies')

@section('content')

<section style="padding:5rem 0 3rem;background:#fff;border-bottom:1px solid #e5e7eb;">
    <div class="max-w-5xl mx-auto px-6 lg:px-8">
        <a href="{{ route('team.index') }}" style="font-size:0.78rem;color:#9ca3af;text-decoration:none;display:inline-flex;align-items:center;gap:0.3rem;margin-bottom:2rem;" onmouseover="this.style.color='#2d3aff'" onmouseout="this.style.color='#9ca3af'">
            ← Meet the Team
        </a>

        <div style="display:flex;flex-direction:column;gap:2rem;" class="sm:flex-row sm:items-start">
            {{-- Avatar --}}
            @if($member->photo)
            <img src="{{ $member->photo }}" alt="{{ $member->name }}"
                 style="width:7rem;height:7rem;border-radius:16px;object-fit:cover;border:1px solid #e5e7eb;flex-shrink:0;">
            @else
            @php $deptColors=['executive'=>'indigo','technical'=>'blue','marketing'=>'emerald','support'=>'amber']; @endphp
            <div class="avatar avatar-{{ $deptColors[$member->department] ?? 'slate' }}"
                 style="width:7rem;height:7rem;border-radius:16px;font-size:1.75rem;flex-shrink:0;">
                {{ strtoupper(substr($member->name,0,1)) }}{{ strtoupper(substr(explode(' ',$member->name)[1]??'',0,1)) }}
            </div>
            @endif

            {{-- Info --}}
            <div class="flex-1">
                @php $deptLabels=['executive'=>'Executive Management','technical'=>'Technical & Security','marketing'=>'Marketing & Growth','support'=>'Customer Care & Support']; @endphp
                <p class="eyebrow mb-2">{{ $deptLabels[$member->department] ?? ucfirst($member->department) }}</p>
                <h1 style="font-family:'Fraunces',serif;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:#0f0f14;letter-spacing:-0.02em;line-height:1.1;margin-bottom:0.4rem;">{{ $member->name }}</h1>
                <p style="font-size:1rem;color:#6b7280;font-weight:500;margin-bottom:1.25rem;">{{ $member->role }}</p>

                @if($member->bio)
                <p style="font-size:0.95rem;color:#2a2a35;line-height:1.8;max-width:40rem;margin-bottom:1.5rem;">{{ $member->bio }}</p>
                @endif

                {{-- Skills --}}
                @if($member->skills && count($member->skills))
                <div style="display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem;">
                    @foreach($member->skills as $skill)
                    <span class="tag">{{ $skill }}</span>
                    @endforeach
                </div>
                @endif

                {{-- Social links --}}
                <div style="display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;">
                    @if($member->email)
                    <a href="mailto:{{ $member->email }}" class="btn btn-outline" style="font-size:0.78rem;padding:0.45rem 1rem;">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:0.9rem;height:0.9rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
                        Email
                    </a>
                    @endif
                    @if($member->linkedin)
                    <a href="{{ $member->linkedin }}" target="_blank" rel="noopener" class="btn btn-outline" style="font-size:0.78rem;padding:0.45rem 1rem;">LinkedIn ↗</a>
                    @endif
                    @if($member->github)
                    <a href="https://github.com/{{ $member->github }}" target="_blank" rel="noopener" class="btn btn-outline" style="font-size:0.78rem;padding:0.45rem 1rem;">GitHub ↗</a>
                    @endif
                    @if($member->twitter)
                    <a href="https://twitter.com/{{ ltrim($member->twitter,'@') }}" target="_blank" rel="noopener" class="btn btn-outline" style="font-size:0.78rem;padding:0.45rem 1rem;">Twitter ↗</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Blog posts by this member --}}
@if($posts->count())
<section style="padding:4rem 0 5rem;background:#f8f8fa;">
    <div class="max-w-5xl mx-auto px-6 lg:px-8">
        <h2 style="font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:#0f0f14;margin-bottom:1.5rem;">Articles by {{ $member->name }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            @foreach($posts as $post)
            <a href="{{ route('blog.show', $post) }}" class="card" style="text-decoration:none;padding:1.25rem;display:block;">
                @if($post->category)<span class="tag tag-accent" style="display:inline-flex;margin-bottom:0.75rem;">{{ $post->category }}</span>@endif
                <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;color:#0f0f14;line-height:1.35;margin-bottom:0.4rem;">{{ $post->title }}</h3>
                <p style="font-size:0.78rem;color:#9ca3af;">{{ $post->read_time }} min · {{ $post->published_at->format('d M Y') }}</p>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection