@props([
    'lazy' => false,
])

@feature('repair_services')
@php
    $steps = config('site_repair_process', []);
    $trackUrl = route('site.repair-tracking.index', ['locale' => app()->getLocale()]);
    $lazy = filter_var($lazy, FILTER_VALIDATE_BOOLEAN);
@endphp

@if (is_array($steps) && $steps !== [])
    @if ($lazy)
        <section
            class="site-process site-process--lazy"
            aria-label="{{ __('site.process_aria') }}"
            x-data="{
                mounted: false,
                init() {
                    const el = this.$el;
                    if (!('IntersectionObserver' in window)) {
                        this.mounted = true;
                        return;
                    }
                    const io = new IntersectionObserver((entries) => {
                        if (entries.some((entry) => entry.isIntersecting)) {
                            this.mounted = true;
                            io.disconnect();
                        }
                    }, { rootMargin: '240px 0px', threshold: 0.01 });
                    io.observe(el);
                }
            }"
        >
            <div
                x-show="!mounted"
                class="site-process__placeholder site-container"
                aria-hidden="true"
            ></div>
            <template x-if="mounted">
                <div>
                    @include('partials.site.home-repair-process-body', ['steps' => $steps, 'trackUrl' => $trackUrl])
                </div>
            </template>
        </section>
    @else
        <section class="site-process" aria-label="{{ __('site.process_aria') }}">
            @include('partials.site.home-repair-process-body', ['steps' => $steps, 'trackUrl' => $trackUrl])
        </section>
    @endif
@endif
@endfeature