Section code

@props([
    'eyebrow' => null,
    'number' => null,
    'title' => null,
    'description' => null,
    'align' => 'center',
    'width' => '7xl',
    'spacing' => 'base',
])

@php
    /*
    | Marketing section wrapper with an optional heading block. Supports a
    | numbered eyebrow (Laravel-style "01 — Features") and left/center alignment.
    |
    | number:  optional index shown before the eyebrow (e.g. "01")
    | align:   center, left
    | width:   4xl, 5xl, 6xl, 7xl, full
    | spacing: sm, base, lg
    |
    | Usage:
    |   <x-ui.section number="01" eyebrow="Features" title="Everything you need" align="left">
    |       ...
    |   </x-ui.section>
    */
    $widthClass = ['4xl' => 'max-w-4xl', '5xl' => 'max-w-5xl', '6xl' => 'max-w-6xl', '7xl' => 'max-w-7xl', 'full' => 'max-w-full'][$width] ?? 'max-w-7xl';
    $spacingClass = ['sm' => 'py-12 sm:py-16', 'base' => 'py-16 sm:py-24', 'lg' => 'py-24 sm:py-32'][$spacing] ?? 'py-16 sm:py-24';
    $isCenter = $align === 'center';
    $headingWrap = $isCenter ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl';
@endphp

<section {{ $attributes->merge(['class' => $spacingClass]) }}>
    <div class="{{ $widthClass }} mx-auto px-4 sm:px-6 lg:px-8">
        @if ($eyebrow || $title || $description)
            <div class="{{ $headingWrap }}">
                @if ($eyebrow)
                    <div class="flex items-center gap-2.5 text-sm font-semibold {{ $isCenter ? 'justify-center' : '' }}">
                        @if ($number)
                            <span class="inline-flex h-6 min-w-6 items-center justify-center rounded-md bg-brand-600 px-1.5 text-xs font-bold text-white tabular-nums">{{ $number }}</span>
                        @endif
                        <span class="uppercase tracking-[0.12em] text-brand-600 dark:text-brand-400">{{ $eyebrow }}</span>
                    </div>
                @endif
                @if ($title)
                    <h2 class="mt-4 text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900 dark:text-white text-balance">{{ $title }}</h2>
                @endif
                @if ($description)
                    <p class="mt-4 text-lg leading-relaxed text-gray-600 dark:text-gray-400 text-pretty">{{ $description }}</p>
                @endif
            </div>
        @endif

        <div class="{{ ($eyebrow || $title || $description) ? 'mt-12 sm:mt-16' : '' }}">
            {{ $slot }}
        </div>
    </div>
</section>