@extends('v2-portal::app-layout', [
    'pageTitle'             => $member->name . ' — Diretoria SUCESU Nacional',
    'pageDescription'       => $member->description ?: 'Membro da Diretoria Executiva da SUCESU Nacional.',
    'showAccessibilityBar'  => true,
    'stickyAccessibilityBar'=> false,
    'showHeader'            => false,
    'showMainHeader'        => false,
    'showMainFooter'        => false,
    'showFooter'            => false,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
    'fullWidthMain'         => true,
])

@section('main-section-area')
<section class="team-member-profile section-padding">
    <div class="container">
        <div class="row g-4">
            {{-- Coluna da Foto --}}
            <div class="col-lg-4">
                <div class="member-photo-card">
                    @if($photoUrl)
                    @include('v2-service-media::components.picture', [
                        'originalPath' => $member->getPhotoUrl(),
                        'variants'     => $variants,
                        'alt'          => $member->name,
                        'class'        => 'img-fluid w-100',
                        'lazy'         => false,
                        'style'        => 'border-radius:8px;max-height:400px;object-fit:cover;',
                    ])
                    @else
                    <div style="width:100%;height:300px;background:var(--color-bg-canvas, #e9ecef);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                        <i class="bi bi-person-fill" style="font-size:5rem;color:var(--color-text-muted, #adb5bd);"></i>
                    </div>
                    @endif

                    <div class="mt-3">
                        @if($member->linkedin_url)
                        <a href="{{ $member->linkedin_url }}" target="_blank" rel="noopener noreferrer"
                           class="btn btn-outline-primary btn-sm w-100"
                           aria-label="Perfil no LinkedIn — abre em nova aba">
                            <i class="bi bi-linkedin me-1" aria-hidden="true"></i> LinkedIn
                        </a>
                        @endif
                        @if($member->email)
                        <a href="mailto:{{ $member->email }}" class="btn btn-outline-secondary btn-sm w-100 mt-2">
                            <i class="bi bi-envelope me-1"></i> {{ $member->email }}
                        </a>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Coluna do Conteúdo --}}
            <div class="col-lg-8">
                <div class="member-info-card">
                    <nav aria-label="Breadcrumb">
                        <ol class="breadcrumb small mb-3">
                            <li class="breadcrumb-item"><a href="{{ url('/sobre-nos') }}">Sobre Nós</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('/sobre-nos#diretoria') }}">Diretoria</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $member->name }}</li>
                        </ol>
                    </nav>

                    <h1 class="fw-bold mb-1">{{ $member->name }}</h1>
                    <p class="text-muted mb-1">
                        <i class="bi bi-briefcase me-1"></i> {{ $member->position }}
                    </p>
                    @if($bienniumLabel)
                    <p class="text-muted small mb-3">
                        <i class="bi bi-calendar-range me-1"></i> Biênio {{ $bienniumLabel }}
                    </p>
                    @endif

                    @if(!empty($member->description))
                    <div class="member-description mb-4">
                        <p class="lead">{{ $member->description }}</p>
                    </div>
                    @endif

                    @if(!empty($htmlBio))
                    <div class="member-bio-content">
                        <h5 class="fw-semibold mb-3">Biografia</h5>
                        <div class="content-rich-text">
                            {!! $htmlBio !!}
                        </div>
                    </div>
                    @endif

                    {{-- Link Voltar --}}
                    <div class="mt-4 pt-3 border-top">
                        <a href="{{ url('/sobre-nos#diretoria') }}" class="btn btn-outline-primary">
                            <i class="bi bi-arrow-left me-1"></i> Voltar para Diretoria
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('late-styles')
<style>
    .team-member-profile {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }
    .member-photo-card {
        position: sticky;
        top: 2rem;
    }
    .member-info-card {
        min-height: 300px;
    }
    .member-bio-content .content-rich-text {
        line-height: 1.8;
        color: #333;
    }
    .member-bio-content .content-rich-text p {
        margin-bottom: 1rem;
    }
</style>
@endpush