@php
    $cycle = [
        ['title' => 'Learn', 'detail' => 'Live lesson · Resources'],
        ['title' => 'Practise', 'detail' => 'Exercises · Exam bank'],
        ['title' => 'Apply', 'detail' => 'Homework'],
        ['title' => 'Submit', 'detail' => ''],
        ['title' => 'Assess', 'detail' => 'Tests / Mocks'],
        ['title' => 'Feedback', 'detail' => ''],
        ['title' => 'Improve', 'detail' => 'Personalised learning'],
    ];
@endphp

<section class="cycle" data-cycle tabindex="0" aria-labelledby="cycle-label">
    <div class="cycle-bars" aria-hidden="true">
        @foreach ($cycle as $item)
            <div class="cycle-bar"><span></span></div>
        @endforeach
    </div>
    <div class="cycle-meta">
        <div>
            <p id="cycle-label" class="eyebrow">Learning cycle</p>
            <p class="cycle-sub">A loop, not a one-off lesson</p>
        </div>
        <p class="cycle-count" data-cycle-count>01 — 07</p>
    </div>
    <div class="cycle-stage">
        <button type="button" class="cycle-arrow" data-cycle-prev aria-label="Previous stage">
            <svg viewBox="0 0 20 20" width="16" height="16" fill="none"><path d="M12.25 4.75 6.75 10l5.5 5.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <button type="button" class="cycle-arrow cycle-arrow-right" data-cycle-next aria-label="Next stage">
            <svg viewBox="0 0 20 20" width="16" height="16" fill="none"><path d="M7.75 4.75 13.25 10l-5.5 5.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <div class="cycle-window">
            <div class="cycle-track" data-cycle-track>
                @foreach ($cycle as $index => $item)
                    <div class="cycle-slide">
                        <p class="cycle-num">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</p>
                        <p class="cycle-title">{{ $item['title'] }}</p>
                        <p class="cycle-detail">
                            {{ $item['detail'] }}
                            @if ($index === count($cycle) - 1)
                                <span>Then the cycle returns to Learn</span>
                            @endif
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <ol class="cycle-dots">
        @foreach ($cycle as $item)
            <li>
                <button type="button" data-cycle-dot aria-label="{{ $item['title'] }}"></button>
                <span>{{ $item['title'] }}</span>
            </li>
        @endforeach
    </ol>
</section>