@php
$items = $data['items'] ?? [];
$columns = (int) ($options['columns'] ?? 4);
$color = $options['color'] ?? 'light';
$padding = $options['padding'] ?? 'lg';
$cardStyle = $options['card_style'] ?? 'plain';
$photoShape = $options['photo_shape'] ?? 'circle';
$showBio = $options['show_bio'] ?? true;
$showSocials = $options['show_socials'] ?? true;
$colSize = (int) (12 / max(1, $columns));
$cardCls = match($cardStyle) {
    'bordered' => 'border rounded p-3',
    'shadow'   => 'shadow-sm rounded bg-body p-3',
    default    => '',
};
$photoCls = match($photoShape) {
    'circle'  => 'rounded-circle',
    'rounded' => 'rounded-3',
    default   => 'rounded-0',
};
@endphp
<section class="page-block-team py-{{ $padding }} {{ pb_bg_class($color) }}">
    <div class="container">
        @if(! empty($data['title']))<h2 class="text-center mb-2">{{ $data['title'] }}</h2>@endif
        @if(! empty($data['subtitle']))<p class="text-center text-muted mb-5">{!! e($data['subtitle']) !!}</p>@endif

        <div class="row g-4">
            @foreach($items as $m)
                @php
                    $photo = ! empty($m['photo']) ? asset('storage/' . $m['photo']) : null;
                @endphp
                <div class="col-md-{{ $colSize }} text-center">
                    <div class="{{ $cardCls }} h-100">
                        @if($photo)
                            <img src="{{ $photo }}" alt="{{ $m['name'] ?? '' }}" class="{{ $photoCls }} mb-3" style="width:140px;height:140px;object-fit:cover;">
                        @else
                            <div class="{{ $photoCls }} bg-secondary-subtle d-inline-flex align-items-center justify-content-center mb-3" style="width:140px;height:140px;">
                                <i class="fas fa-user fa-2x text-muted"></i>
                            </div>
                        @endif
                        <h5 class="mb-1">{{ $m['name'] ?? '' }}</h5>
                        @if(! empty($m['role']))<div class="text-muted small mb-2">{{ $m['role'] }}</div>@endif
                        @if($showBio && ! empty($m['bio']))
                            <p class="small">{!! e($m['bio']) !!}</p>
                        @endif
                        @if($showSocials)
                            <div class="d-flex justify-content-center gap-2 mt-2">
                                @if(! empty($m['twitter']))<a href="{{ $m['twitter'] }}" class="text-muted" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a>@endif
                                @if(! empty($m['linkedin']))<a href="{{ $m['linkedin'] }}" class="text-muted" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>@endif
                                @if(! empty($m['github']))<a href="{{ $m['github'] }}" class="text-muted" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>@endif
                                @if(! empty($m['website']))<a href="{{ $m['website'] }}" class="text-muted" target="_blank" rel="noopener"><i class="fas fa-globe"></i></a>@endif
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
