tocha/resources/views/blocks/steps_section.blade.php

{{--
    Blade-шаблон блока «Этапы работ» (JS-степпер).
    $data:
      label   — надпись над заголовком
      heading — заголовок секции
      subtext — описание секции
      steps[] — массив шагов: title, desc, image_url, image_alt

    Все панели шагов рендерятся сервером в Blade.
    JS только переключает видимость — никаких данных в скрипте.
--}}
@php
    $steps = $data['steps'] ?? [];

    // Абсолютный URL: хранимые пути (blocks/...) → через storage, внешние — как есть
    $toUrl = fn(?string $p): string =>
        $p ? (str_starts_with($p, 'http') ? $p : asset('storage/' . $p)) : '';
@endphp

<section class="steps-section" id="steps">
    <div class="container">

        <div class="sh reveal">
            <div class="sh-label">{{ $data['label'] ?? '' }}</div>
            <h2>{{ $data['heading'] ?? '' }}</h2>
            @if(!empty($data['subtext']))
                <p>{{ $data['subtext'] }}</p>
            @endif
        </div>

        {{-- Горизонтальный степпер: кнопки и линии --}}
        <nav class="stepper" id="stepper" aria-label="{{ $data['heading'] ?? 'Этапы' }}">
            @foreach($steps as $i => $step)
                <div class="stepper-item">
                    <button class="stepper-dot{{ $i === 0 ? ' active' : '' }}"
                            data-step="{{ $i }}"
                            aria-label="Шаг {{ $i + 1 }}">{{ $i + 1 }}</button>
                </div>
                @if(!$loop->last)
                    <div class="stepper-item">
                        <div class="stepper-line{{ $i === 0 ? ' done' : '' }}" id="line-{{ $i }}"></div>
                    </div>
                @endif
            @endforeach
        </nav>

        {{-- Все панели шагов — рендерит сервер, JS только скрывает/показывает --}}
        <div id="step-panel" style="transition:opacity .25s ease">
            @foreach($steps as $i => $step)
                <div class="step-content" data-step-panel="{{ $i }}"{{ $i !== 0 ? ' style="display:none"' : '' }}>
                    <div class="step-left">
                        <div class="step-badge">{{ $i + 1 }}</div>
                        <div class="step-title">{{ $step['title'] ?? '' }}</div>
                        <div class="step-desc">{{ $step['desc'] ?? '' }}</div>
                    </div>
                    <div class="step-right">
                        @php $imgUrl = $toUrl($step['image_url'] ?? ''); @endphp
                        @if($imgUrl)
                            <img src="{{ $imgUrl }}" alt="{{ $step['image_alt'] ?? '' }}" loading="lazy"/>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</section>

<script>
(function () {
    var current = 0;
    var dots, lines, panels, wrapper;

    function goTo(idx) {
        if (idx === current) return;
        wrapper.style.opacity = '0';
        setTimeout(function () {
            panels[current].style.display = 'none';
            current = idx;
            panels[current].style.display = '';
            wrapper.style.opacity = '1';
        }, 150);
        dots.forEach(function (d, i)  { d.classList.toggle('active', i === current); });
        lines.forEach(function (l, i) { l.classList.toggle('done',   i < current); });
    }

    document.addEventListener('DOMContentLoaded', function () {
        wrapper = document.getElementById('step-panel');
        if (!wrapper) return;

        dots   = Array.from(document.querySelectorAll('.stepper-dot'));
        lines  = Array.from(document.querySelectorAll('.stepper-line'));
        panels = Array.from(document.querySelectorAll('[data-step-panel]'));

        if (!panels.length) return;

        dots.forEach(function (d) {
            d.addEventListener('click', function () {
                goTo(parseInt(d.getAttribute('data-step'), 10));
            });
        });

        document.getElementById('stepper').addEventListener('keydown', function (e) {
            if (e.key === 'ArrowRight' && current < panels.length - 1) goTo(current + 1);
            if (e.key === 'ArrowLeft'  && current > 0)                 goTo(current - 1);
        });
    });
})();
</script>