@extends('layouts.public')

@section('title', $member->name)
@section('meta_description', $member->short_bio ?: $member->designation)
@section('og_type', 'profile')

@section('content')
    <x-page-hero :eyebrow="$member->group?->name"
                 :title="$member->name"
                 :subtitle="$member->designation"
                 :breadcrumbs="[__('Our Team') => route('team.index'), $member->name => null]" />

    <section class="section">
        <div class="container-page grid gap-14 lg:grid-cols-12">

            <div class="lg:col-span-4">
                <x-image :src="$member->photo" :alt="$member->name" ratio="3/4" rounded="rounded-2xl"
                         :thumb="false" fallback="images/avatar-placeholder.svg" />

                <dl class="mt-8 space-y-4">
                    @foreach ([
                        __('Designation') => $member->designation,
                        __('Department') => $member->department,
                        __('Sector') => $member->sector?->name,
                        __('Qualification') => $member->qualification,
                        __('Experience') => $member->experience_years ? trans_choice(':count year|:count years', $member->experience_years, ['count' => $member->experience_years]) : null,
                    ] as $label => $value)
                        @if (filled($value))
                            <div class="border-b border-border pb-4 last:border-0 last:pb-0">
                                <dt class="meta-label">{{ $label }}</dt>
                                <dd class="mt-1 font-medium text-text">{{ $value }}</dd>
                            </div>
                        @endif
                    @endforeach
                </dl>

                <div class="mt-6 flex flex-wrap gap-2">
                    @if ($member->email)
                        <x-button variant="outline" size="sm" :href="'mailto:'.$member->email">
                            <x-icon name="mail" class="size-4" /> {{ __('Email') }}
                        </x-button>
                    @endif

                    @foreach (($member->social_links ?? []) as $network => $url)
                        @if (filled($url))
                            <x-button variant="outline" size="sm" :href="$url" target="_blank" rel="noopener">
                                <x-icon :name="$network" class="size-4" /> {{ ucfirst($network) }}
                            </x-button>
                        @endif
                    @endforeach
                </div>
            </div>

            <div class="min-w-0 lg:col-span-8">
                @if ($member->short_bio)
                    <p class="prose-measure font-display text-xl leading-relaxed text-text">{{ $member->short_bio }}</p>
                @endif

                @if ($member->bio)
                    <div class="prose-content mt-8">{!! $member->bio !!}</div>
                @elseif (! $member->short_bio)
                    <x-empty-state icon="user"
                                   :title="__('Profile in preparation')"
                                   :message="__('A full biography for this team member has not been published yet.')" />
                @endif

                @if ($member->sector)
                    <div class="mt-10 rounded-2xl bg-primary-50 p-7">
                        <p class="meta-label mb-2">{{ __('Sector expertise') }}</p>
                        <h2 class="font-display text-lg font-semibold text-primary">{{ $member->sector->name }}</h2>
                        @if ($member->sector->short_description)
                            <p class="mt-2 text-sm text-text-secondary">{{ $member->sector->short_description }}</p>
                        @endif
                        <a href="{{ route('sectors.show', $member->sector) }}" class="link-arrow mt-4">
                            {{ __('Explore the sector') }} <x-icon name="arrow-right" class="icon-arrow size-4" />
                        </a>
                    </div>
                @endif

                @if ($colleagues->isNotEmpty())
                    <section class="mt-14">
                        <h2 class="mb-8 font-display text-title font-bold text-text">{{ __('Colleagues') }}</h2>
                        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4" data-reveal-group>
                            @foreach ($colleagues as $colleague)
                                @include('public.partials.team-card', ['member' => $colleague])
                            @endforeach
                        </div>
                    </section>
                @endif
            </div>
        </div>
    </section>
@endsection