@extends('partials.components.section', ['header' => false, 'ctaAfter' => false, 'sectionClass' => 'z-100 ' . ($index == 1 && is_front_page() ? 'md:!-mt-40' : '!mt-0')])

@section('section')
    <div class="{{ $grid }} relative z-10 row-span-full">
        <div class="xs:p-14 {{ $section['section_settings_white_text'] ?? false ? 'text-white' : '' }} z-10 col-span-12 p-5 md:col-span-7 md:col-start-1 lg:col-span-6 lg:col-start-1"
            style="background-color: {{ $section['section_settings_card_background'] ?? '#ffffff' }};">
            @if (
                (!empty($section['section_fields_title']) ?? false) ||
                    (!empty($section['section_fields_suptitle']) ?? false) ||
                    (!empty($section['section_fields_introduction']) ?? false))
                @include('partials.components.section-header')
            @endif
            @if (($section['section_fields_buttons'] ?? false) && ($ctaAfter ?? true))
                @include('partials.components.ctas', [
                    'ctas' => $section['section_fields_buttons'],
                    'btnClass' =>
                        $section['section_settings_white_text'] ?? false
                            ? 'bg-primary hover:bg-white text-white hover:text-dark'
                            : 'bg-dark hover:bg-primary text-white hover:border-white border-primary border-1',
                ])
            @endif
        </div>
        <div class="js-rellax z-0 col-span-12 md:col-span-7 md:col-start-6 md:-mt-40" data-rellax-speed="0"
            data-rellax-desktop-speed="1" data-rellax-percentage="0.5">
            @if ($section['section_fields_image'] ?? false)
                {!! ResponsivePics::get_image(
                    $section['section_fields_image'],
                    'xs:600, md:1024',
                    9 / 16,
                    'w-full',
                    false,
                    true,
                ) !!}
            @endif
        </div>
    </div>
    <div
        class="{{ $index == 1 ? 'mt-40' : '' }} absolute bottom-0 left-0 top-0 z-0 h-full w-[calc(50%-20px)] overflow-hidden">
        @include('partials.svg.pattern-' . ($section['section_settings_pattern_color'] ?? 'primary'))
    </div>
@overwrite