@php $brand = config('brand.name'); @endphp

<x-layouts::public
    :title="$title"
    :description="$description"
    :extra-styles="['resources/css/cms-pages.css']"
    class="site-home"
>
    <section class="catalog-stage catalog-stage--help" aria-labelledby="guide-hero-heading">
        <div class="catalog-stage__canvas" aria-hidden="true">
            <div class="catalog-stage__beam catalog-stage__beam--sky"></div>
            <div class="catalog-stage__grid"></div>
        </div>
        <div class="catalog-stage__inner">
            <nav class="catalog-stage__crumbs" aria-label="Breadcrumb">
                <a href="{{ route('home') }}">Home</a>
                <span aria-hidden="true">/</span>
                <a href="{{ route('faqs.index') }}">Help</a>
                <span aria-hidden="true">/</span>
                <span>{{ $heading }}</span>
            </nav>
            <p class="catalog-stage__brand">{{ $brand }}</p>
            <h1 id="guide-hero-heading" class="catalog-stage__title">{{ $heading }}</h1>
            <p class="catalog-stage__lede">{{ $description }}</p>
            <div class="catalog-stage__actions">
                <a href="{{ route('home') }}#quote" class="catalog-stage__cta">Get prices</a>
                <a href="{{ route('faqs.index') }}" class="catalog-stage__ghost">Back to help</a>
            </div>
        </div>
    </section>

    <section class="home-section" aria-labelledby="guide-heading">
        <x-container>
            <div class="catalog-split">
                <div>
                    <h2 id="guide-heading" class="home-section__title">Step by step</h2>
                    <p class="catalog-head__lede">Follow the sequence below — each step keeps the journey clear from quote to arrival.</p>
                </div>
                <ol class="svc-flow">
                    @foreach ($steps as $index => $step)
                        <li>
                            <span aria-hidden="true">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                            <div>
                                <strong>{{ $step['title'] }}</strong>
                                <p>{{ $step['body'] }}</p>
                            </div>
                        </li>
                    @endforeach
                </ol>
            </div>
        </x-container>
    </section>

    <section class="home-cta" aria-labelledby="guide-cta-heading">
        <x-container class="home-cta__inner">
            <h2 id="guide-cta-heading">Ready to book?</h2>
            <p>Fixed fares from the quote widget — or ask us about a complicated journey.</p>
            <a href="{{ route('home') }}#quote" class="home-cta__btn">Get an instant quote</a>
        </x-container>
    </section>
</x-layouts::public>