{{-- resources/views/page/agency/themes/default/sections/team.blade.php --}}
<section class="team-section" style="background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%); position: relative;">
    <div class="container" style="position: relative; z-index: 1;">
        @if($section->title || $section->subtitle)
            <div style="text-align: center; margin-bottom: 3.5rem;">
                @if($section->subtitle)
                    <p style="color: var(--accent); font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 2.25rem; font-weight: 800; color: #111827; line-height: 1.2; margin-bottom: 0;">
                        {{ $section->title }}
                    </h2>
                @endif

                @if($section->content)
                    <p style="font-size: 1rem; color: #6B7280; margin-top: 1rem; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.7;">
                        {{ $section->content }}
                    </p>
                @endif
            </div>
        @endif

        @php
            // Get team members from section data
            $teamMembers = $section->getData('team_members', []);
        @endphp

        @if(count($teamMembers) > 0)
            <div class="team-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); gap: 2rem; justify-content: center;">
                @foreach($teamMembers as $member)
                    <div class="team-member-card"
                         style="background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.08); transition: all 0.3s; border: 2px solid transparent; max-width: 350px;">
                        <div class="team-photo-container" style="position: relative; overflow: hidden; width: 100%; height: 320px; background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);">
                            @if(!empty($member['photo']))
                                <img src="{{ asset('storage/' . $member['photo']) }}"
                                     alt="{{ $member['name'] ?? 'Ekip Üyesi' }}"
                                     class="team-photo"
                                     style="width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s;">
                            @else
                                {{-- Default avatar if no photo --}}
                                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                                    <div style="width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; color: white; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);">
                                        {{ strtoupper(substr($member['name'] ?? 'E', 0, 1)) }}
                                    </div>
                                </div>
                            @endif

                            {{-- Gradient overlay --}}
                            <div class="team-overlay"
                                 style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); padding: 1.25rem 1rem; opacity: 0; transition: opacity 0.3s;">
                                <div style="color: white; text-align: center;">
                                    <i class="fas fa-user-circle" style="font-size: 1.25rem; margin-bottom: 0.375rem; display: block;"></i>
                                    <p style="font-size: 0.813rem; opacity: 0.95; margin: 0; font-weight: 500;">{{ $member['position'] ?? 'Ekip Üyesi' }}</p>
                                </div>
                            </div>
                        </div>

                        <div style="padding: 1.5rem 1.25rem; text-align: center;">
                            <h3 style="font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: 0.375rem; line-height: 1.3;">
                                {{ $member['name'] ?? 'İsim Belirtilmemiş' }}
                            </h3>

                            <p style="color: var(--primary); font-weight: 600; font-size: 0.938rem; margin-bottom: 0; line-height: 1.4;">
                                {{ $member['position'] ?? 'Pozisyon Belirtilmemiş' }}
                            </p>

                            <div style="display: flex; justify-content: center; gap: 0.625rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #F3F4F6;">
                                {{-- Social links could be added here if needed --}}
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; transition: all 0.3s; cursor: pointer;">
                                    <i class="fas fa-envelope" style="color: #6B7280; font-size: 0.813rem;"></i>
                                </div>
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; transition: all 0.3s; cursor: pointer;">
                                    <i class="fas fa-phone" style="color: #6B7280; font-size: 0.813rem;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- Empty state --}}
            <div style="text-align: center; padding: 3rem 2rem; background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); max-width: 500px; margin: 0 auto;">
                <div style="font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.25;">
                    <i class="fas fa-users"></i>
                </div>
                <h3 style="font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem;">
                    Henüz Ekip Üyesi Eklenmemiş
                </h3>
                <p style="color: #6B7280; font-size: 0.938rem; line-height: 1.6;">
                    Ekip üyelerinizi eklemek için sayfa düzenleyiciyi kullanın.
                </p>
            </div>
        @endif
    </div>
</section>

<style>
    .team-grid {
        max-width: 1200px;
        margin: 0 auto;
    }

    .team-photo-container {
        position: relative;
    }

    .team-member-card {
        margin: 0 auto;
        width: 100%;
    }

    .team-member-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        border-color: var(--primary);
    }

    .team-member-card:hover .team-photo {
        transform: scale(1.05);
    }

    .team-member-card:hover .team-overlay {
        opacity: 1;
    }

    .team-member-card > div:last-child > div:last-child > div:hover {
        background: var(--primary);
    }

    .team-member-card > div:last-child > div:last-child > div:hover i {
        color: white;
    }

    @media (max-width: 1200px) {
        .team-grid {
            grid-template-columns: repeat(auto-fit, minmax(240px, 300px)) !important;
        }

        .team-photo-container {
            height: 280px !important;
        }
    }

    @media (max-width: 768px) {
        .team-section h2 {
            font-size: 1.875rem !important;
        }

        .team-section .container > div:first-child {
            margin-bottom: 2.5rem !important;
        }

        .team-grid {
            grid-template-columns: repeat(auto-fit, minmax(220px, 280px)) !important;
            gap: 1.5rem !important;
        }

        .team-photo-container {
            height: 260px !important;
        }

        .team-member-card {
            max-width: 300px !important;
        }
    }

    @media (max-width: 640px) {
        .team-section h2 {
            font-size: 1.625rem !important;
        }

        .team-section .container > div:first-child p {
            font-size: 0.938rem !important;
        }

        .team-grid {
            grid-template-columns: 1fr !important;
            max-width: 320px;
        }

        .team-photo-container {
            height: 300px !important;
        }

        .team-member-card {
            max-width: 100% !important;
        }
    }
</style>