@extends('public.layout.app')
@section('title', $teamMember->name)

@section('body')
<section class="section pt-5">
    <div class="container">
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <a href="{{ route('front.team.index') }}" class="btn btn-outline-light btn-sm mb-3"><i class="fa-solid fa-arrow-left me-1"></i> Team</a>
            <div class="row g-4 align-items-center">
                <div class="col-lg-3">
                    <div class="team-portrait">
                        @if($teamMember->photo)
                            <img src="{{ asset('storage/' . $teamMember->photo) }}" alt="{{ $teamMember->name }}">
                        @else
                            <span>{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($teamMember->name, 0, 1)) }}</span>
                        @endif
                    </div>
                </div>
                <div class="col-lg-9">
                    <span class="badge-soft">{{ \Illuminate\Support\Str::headline($teamMember->team_group) }}</span>
                    <h1 class="fw-bold my-3">{{ $teamMember->name }}</h1>
                    <p class="text-muted2 fs-5 mb-0">{{ $teamMember->position ?? $teamMember->department ?? 'Team member' }}</p>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card-soft shadow-soft p-4 p-lg-5">
                    <h4 class="fw-bold mb-3">Biography</h4>
                    <div class="text-muted2" style="line-height:1.9;">{!! $teamMember->biography ?: 'Biography will be added soon.' !!}</div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card-soft shadow-soft p-4 mb-4">
                    <h5 class="fw-bold mb-3">Profile</h5>
                    <div class="d-flex justify-content-between py-2"><span class="text-muted2">Department</span><strong>{{ $teamMember->department ?? '-' }}</strong></div>
                    <div class="d-flex justify-content-between py-2"><span class="text-muted2">Email</span><strong>{{ $teamMember->email ?? '-' }}</strong></div>
                    <div class="d-flex justify-content-between py-2"><span class="text-muted2">Phone</span><strong>{{ $teamMember->phone ?? '-' }}</strong></div>
                </div>
                <div class="card-soft shadow-soft p-4">
                    <h5 class="fw-bold mb-3">Qualifications and responsibilities</h5>
                    <p class="text-muted2 small">{{ $teamMember->qualifications ?: 'Qualifications will be published soon.' }}</p>
                    <p class="text-muted2 small mb-0">{{ $teamMember->responsibilities ?: 'Responsibilities will be published soon.' }}</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="uni-page pt-0">
    <div class="container">
        <div class="uni-layout">
            <main class="uni-stack">
                @include('public.partials.comment-section', ['type' => 'team_member', 'id' => $teamMember->id, 'comments' => $comments ?? collect()])
                @include('public.partials.feedback-form', ['type' => 'team_member', 'id' => $teamMember->id])
            </main>
            <aside class="uni-stack">
                @include('public.partials.share-buttons', ['title' => $teamMember->name])
                @include('public.partials.apply-cta')
            </aside>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .team-portrait{width:190px;aspect-ratio:1;border-radius:32px;background:rgba(21,63,45,.1);display:flex;align-items:center;justify-content:center;overflow:hidden}
    .team-portrait img{width:100%;height:100%;object-fit:cover}.team-portrait span{font-size:70px;font-weight:900;color:#153f2d}
</style>
@endpush