{{-- Team Grid Component --}}
@php
    $members = $component['content']['members'] ?? [];
@endphp

<div class="row g-4">
    @foreach($members as $member)
        <div class="col-lg-3 col-md-6">
            <div class="team-member text-center">
                @if(!empty($member['image']))
                    <div class="member-image mb-3">
                        <img src="{{ $member['image'] }}" alt="{{ $member['name'] ?? '' }}"
                             class="img-fluid rounded">
                    </div>
                @else
                    <div class="member-image-placeholder mb-3">
                        <div class="placeholder-avatar">
                            <i class="bi bi-person-circle" style="font-size: 120px; color: #dee2e6;"></i>
                        </div>
                    </div>
                @endif

                @if(!empty($member['name']))
                    <h4 class="h5 mb-1" style="font-family: var(--heading-font);">
                        {{ $member['name'] }}
                    </h4>
                @endif

                @if(!empty($member['position']))
                    <p class="text-muted mb-3" style="font-family: var(--body-font);">
                        {{ $member['position'] }}
                    </p>
                @endif

                @if(!empty($member['bio']))
                    <p class="small text-muted mb-3">{{ $member['bio'] }}</p>
                @endif

                @if(!empty($member['social']))
                    <div class="member-social">
                        @if(!empty($member['social']['linkedin']))
                            <a href="{{ $member['social']['linkedin'] }}" target="_blank" class="social-link">
                                <i class="bi bi-linkedin"></i>
                            </a>
                        @endif
                        @if(!empty($member['social']['twitter']))
                            <a href="{{ $member['social']['twitter'] }}" target="_blank" class="social-link">
                                <i class="bi bi-twitter"></i>
                            </a>
                        @endif
                        @if(!empty($member['social']['email']))
                            <a href="mailto:{{ $member['social']['email'] }}" class="social-link">
                                <i class="bi bi-envelope"></i>
                            </a>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    @endforeach
</div>

<style>
    .team-member {
        padding: 1.5rem;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

    .team-member:hover {
        background: #f8f9fa;
        transform: translateY(-5px);
    }

    .member-image img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 12px;
    }

    .member-image-placeholder {
        width: 100%;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border-radius: 12px;
    }

    .member-social {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }

    .social-link {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .social-link:hover {
        background: var(--secondary-color);
        transform: scale(1.1);
    }
</style>