<x-website.layout>

    <!-- start banner -->
    @foreach ($sections as $section)
        @if ($section->key == 'team')
            @include('Website.partials._banner', ['page_title' => $section->title])
        @endif
    @endforeach
    <!-- end banner -->

    <!--==========================Team==========================-->
    <section class="team-section animate-section py-5">
        <div class="container">
            <!-- Section Header -->
            @foreach ($sections as $section)
                @if ($section->key == 'team')
                    <div class="row mb-5">
                        <div class="col-lg-8 mx-auto text-center">
                            <div class="header-section">
                                <h4 class="text-uppercase mb-3" style="color: var(--second-color); letter-spacing: 2px; font-size: 14px;">
                                    {{ $section->name }}
                                </h4>
                                <h2 class="mb-4" style="font-size: 3rem; font-weight: 700; color: var(--third-color);">
                                    {{ $section->title }}
                                </h2>
                                @if($section->short_desc)
                                    <p class="lead" style="color: var(--third-color); opacity: 0.8; font-size: 1.1rem;">
                                        {!! $section->short_desc !!}
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach

            <!-- Team Grid -->
            <div class="row g-4 justify-content-center">
                @foreach ($teams as $team)
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
                        <div class="team-card">
                            <div class="team-image-wrapper">
                                <div class="team-image" style="background-image: url({{ $team->img }});">
                                    <div class="team-overlay"></div>
                                </div>
                            </div>
                            <div class="team-content">
                                <h4 class="team-name">{{ $team->name }}</h4>
                                <p class="team-position">{{ $team->job_title }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--==========================Team==========================-->

</x-website.layout>

