@extends('partials.components.section', ['align' => 'center', 'header' => $section['display_type'] != 'full', 'sectionClass' => $index == 1 ? 'max-sm:!mt-0' : ''])

@section('section')
    @if ($section['section_fields_figures'] ?? false)
        {{-- Container with image when display_type is full --}}
        @if ($section['display_type'] === 'full')
            <div class="{{ $grid }} text-white">
                <div
                    class="@if (($section['image_position'] ?? 'left') === 'right') lg:order-1 @else lg:order-2 @endif {{ $section['section_fields_image'] ? 'md:col-start-3 md:mb-16' : 'md:col-start-2' }} col-span-12 row-span-full md:col-span-10">
                    {{-- Figures section --}}
                    <div
                        class="bg-primary {{ $section['section_fields_image'] ? 'md:pl-[20%]' : '' }} rounded-tr-lg p-8 max-sm:-mx-5 sm:p-10 md:p-16">
                        <div class="overflow-scrollhidden">
                            @if ($section['section_fields_title'] ?? false)
                                @include('partials.components.big-title', [
                                    'title' => $section['section_fields_title'],
                                    'class' => 'text-white',
                                    'balise' => 'h2',
                                ])
                            @endif
                            <ul class="flex gap-5 max-md:flex-wrap">
                                @foreach ($section['section_fields_figures'] as $figure)
                                    <li class="flex grow flex-wrap items-center gap-3 max-md:justify-center">

                                        @if ($figure['number'] ?? false)
                                            <div class="whitespace-nowrap text-4xl font-bold leading-none md:text-5xl">
                                                {{ $figure['number'] }}
                                            </div>
                                        @endif

                                        @if ($figure['label'] ?? false)
                                            <span
                                                class="text-base uppercase leading-tight md:grow">{!! $figure['label'] !!}</span>
                                        @endif

                                        @if ($figure['description'] ?? false)
                                            <div class="mt-1 text-sm text-gray-600">
                                                {!! $figure['description'] !!}
                                            </div>
                                        @endif

                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    {{-- Partners Slider --}}
                    @if (!empty($section['section_fields_partners']) && $section['display_type'] === 'full')
                        <div
                            class="bg-dark {{ $section['section_fields_image'] ? 'md:pl-[20%]' : '' }} rounded-bl-xl px-5 py-10 max-sm:-mx-5 sm:px-16 [.bg-dark_&]:bg-white/5">
                            <div class="js-swiper swiper relative z-10 cursor-grab" data-itemsperpage="4"
                                data-autoplay="true" data-spacebetween="10" data-loop="true">
                                <ul class="swiper-wrapper relative z-10 items-center">
                                    @foreach ($section['section_fields_partners'] as $partner)
                                        <li class="swiper-slide">
                                            <div class="flex items-center justify-center">
                                                @if ($partner['link'] ?? false)
                                                    <a href="{{ $partner['link']['url'] ?? '#' }}"
                                                        @if ($partner['link']['target'] ?? false) target="{{ $partner['link']['target'] }}" @endif
                                                        class="block transition-opacity hover:opacity-70">
                                                @endif

                                                @if ($partner['image'] ?? false)
                                                    <img src="{{ $partner['image']['sizes']['medium'] ?? $partner['image']['url'] }}"
                                                        alt="{{ $partner['image']['alt'] ?? ($partner['link']['title'] ?? 'Partner logo') }}"
                                                        class="max-h-24 w-auto object-contain">
                                                @endif

                                                @if ($partner['link'] ?? false)
                                                    </a>
                                                @endif
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- Section Image --}}
                @if ($section['section_fields_image'] ?? false)
                    <div
                        class="{{ ($section['image_position'] ?? 'left') === 'right' ? 'lg:order-2' : 'lg:order-1' }} relative z-10 col-span-4 col-start-1 row-span-full mt-16 max-md:hidden">
                        {!! ResponsivePics::get_image(
                            $section['section_fields_image'],
                            'xs:600, md:1024',
                            0,
                            'h-full w-full absolute rounded-bl-xl rounded-tr-xl object-cover',
                            false,
                            true,
                        ) !!}
                    </div>
                @endif
            </div>
        @else
            {{-- Simple figures display without image --}}
            <div
                class="{{ $section['display_type'] === 'simple' ? 'border-primary border p-5 md:p-8 lg:p-12 rounded-tr-lg bg-white rounded-bl-lg ' : '' }} {{ $margeAround }} !gap-8 overflow-hidden">
                <ul class="flex justify-center gap-8 max-md:flex-wrap">
                    @foreach ($section['section_fields_figures'] as $figure)
                        <li
                            class="{{ $loop->iteration % 2 === 0 ? 'after:bg-accent' : 'after:bg-primary' }} group flex grow flex-col flex-wrap gap-3 after:block after:h-[2px] after:w-4 max-md:justify-center">

                            @if ($figure['number'] ?? false)
                                <div
                                    class="{{ $loop->iteration % 2 === 0 ? 'text-accent' : 'text-primary' }} whitespace-nowrap text-4xl leading-none md:text-5xl">
                                    {{ $figure['number'] }}
                                </div>
                            @endif

                            @if ($figure['label'] ?? false)
                                <span class="text-base uppercase leading-tight md:grow">{!! $figure['label'] !!}</span>
                            @endif

                            @if ($figure['description'] ?? false)
                                <div class="mt-1 text-sm text-gray-600">
                                    {!! $figure['description'] !!}
                                </div>
                            @endif

                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    @endif
@overwrite