@props([
    'data' => null
])

@php
    $stepImages  = $data['step_images'] ?? [];
    $imageClasses = [
        0 => 'image wow fadeInLeft',
        1 => 'image wow fadeInUp p-3',
        2 => 'image-two wow fadeInRight',
    ];
@endphp

<section class="process-section">
    <div class="auto-container">
        <div class="row clearfix">

            <!-- Content Column -->
            <div class="content-column col-lg-6 col-md-12 col-sm-12">
                <div class="inner-column">

                    <div class="sec-title alternate">
                        {!! tiptap_converter()->asHTML(translate_data($data['section_title'])) !!}
                    </div>

                    <div class="blocks-outer">
                        @foreach ($data['steps_list'] as $step)
                            <div class="process-block">
                                <div class="inner-box d-flex align-items-start gap-3">
                                    @if (!empty($step['prefix']))
                                        <div class="number flex-shrink-0">{{ $step['prefix'] }}</div>
                                    @endif
                                    <div class="font-part-list flex-grow-1 pt-2">
                                        {!! tiptap_converter()->asHTML(translate_data($step['step_content'])) !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Optional CTA closing the section, as the static /partners page had. --}}
                    @if (!empty($data['button_wrapper']))
                        <div class="upper-column info-box d-inline px-2">
                            <div class="outer-box p-0">
                                <x-redirect-link
                                    :item-data="$data['button_wrapper']['button'] ?? []"
                                    class="btn-web-catalog text-capitalize c-main"
                                >
                                    {{ translate_label($data['button_wrapper']['button'] ?? [], 'button_text') }}
                                </x-redirect-link>
                            </div>
                        </div>
                    @endif

                </div>
            </div>

            <!-- Images Column -->
            <div class="images-column col-lg-6 col-md-12 col-sm-12">
                <div class="inner-column">
                    @foreach ($stepImages as $index => $stepImage)
                        <div class="{{ $imageClasses[$index] ?? 'image' }}" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ Storage::url($stepImage['image']) }}" alt="" />
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</section>