Steps code

@props([
    'steps' => [],
    'columns' => 3,
])

@php
    /*
    | Marketing "how it works" flow — a row of numbered steps joined by a guide
    | line on large screens (GitHub / Laravel style). Distinct from <x-ui.stepper>,
    | which is a compact wizard progress indicator.
    |
    | Pass `steps` as an array of:
    |   ['icon' => 'terminal', 'title' => 'Install', 'description' => '…']
    |
    | Usage:
    |   <x-ui.steps :steps="[
    |       ['icon' => 'download-simple', 'title' => 'Install', 'description' => 'One command.'],
    |       ['icon' => 'pencil-simple', 'title' => 'Compose', 'description' => 'Drop in components.'],
    |       ['icon' => 'rocket-launch', 'title' => 'Ship', 'description' => 'Deploy anywhere.'],
    |   ]" />
    */
    $steps = array_values($steps);
    $colClass = [
        2 => 'sm:grid-cols-2',
        3 => 'sm:grid-cols-2 lg:grid-cols-3',
        4 => 'sm:grid-cols-2 lg:grid-cols-4',
    ][$columns] ?? 'sm:grid-cols-2 lg:grid-cols-3';
@endphp

<div {{ $attributes->merge(['class' => 'relative']) }}>
    {{-- Connecting guide line (large screens only) --}}
    @if ($columns >= 3)
        <div class="pointer-events-none absolute inset-x-0 top-7 hidden lg:block" aria-hidden="true">
            <div class="mx-auto h-px w-[calc(100%-8rem)] bg-gradient-to-r from-transparent via-gray-200 to-transparent dark:via-gray-800"></div>
        </div>
    @endif

    <ol class="relative grid grid-cols-1 gap-x-8 gap-y-12 {{ $colClass }}">
        @foreach ($steps as $i => $step)
            <li class="relative flex flex-col items-start">
                <div class="flex items-center gap-4">
                    <span class="relative flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-gray-200 bg-white text-brand-600 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-brand-400">
                        <x-ui.icon :name="$step['icon'] ?? 'circle'" weight="duotone" size="2xl" />
                        <span class="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-brand-600 text-xs font-bold text-white tabular-nums">{{ $i + 1 }}</span>
                    </span>
                </div>

                <h3 class="mt-5 text-lg font-semibold tracking-tight text-gray-900 dark:text-white">{{ $step['title'] }}</h3>
                <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">{{ $step['description'] }}</p>
            </li>
        @endforeach
    </ol>
</div>