Media Content Slider

@props([
    'eyebrow' => 'Why Monogram',
    'heading' => 'Crafted around the details that matter',
    'slides' => null,
])

@php
    $slides ??= [
        [
            'eyebrow' => 'Considered materials',
            'title' => 'Full-grain leather, sourced responsibly',
            'copy' => 'Every piece begins with traceable hides from tanneries we have partnered with for years — chosen for character, longevity and a finish that ages with you.',
            'cta' => ['label' => 'Explore the collection', 'href' => '#'],
        ],
        [
            'eyebrow' => 'Made to last',
            'title' => 'Hardware engineered for daily wear',
            'copy' => 'Solid brass fittings, reinforced stress points and double-stitched seams mean a bag that travels from first commute to tenth season without complaint.',
            'cta' => ['label' => 'See the craftsmanship', 'href' => '#'],
        ],
        [
            'eyebrow' => 'Designed for you',
            'title' => 'A silhouette refined over many seasons',
            'copy' => 'Balanced proportions, an interior that organises itself and a profile that sits as comfortably in a meeting as it does on a weekend away.',
            'cta' => ['label' => 'Find your style', 'href' => '#'],
        ],
    ];

    $slides = array_values($slides);
    $count = count($slides);
    $carouselId = 'media-content-slider-'.\Illuminate\Support\Str::uuid();
@endphp

{{--
    media-content-slider-01 — "Why Monogram" features slider.
    A single-slide-at-a-time editorial slider: each slide pairs a token `bg-muted`
    media placeholder (no external image) with an alternating editorial text block
    (eyebrow, large `font-heading` title, copy, optional CTA). Inline Alpine tracks
    `activeSlide`; prev/next icon buttons and a dot rail step through slides with an
    x-show fade/translate transition. RTL-aware: layout order, logical spacing and
    the chevron icons mirror under dir="rtl".
    Composes <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<section
    {{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20 lg:py-24']) }}
    data-slot="media-content-slider"
    aria-roledescription="carousel"
    aria-label="{{ __($heading) }}"
    x-data="{
        activeSlide: 0,
        count: {{ $count }},
        next() { this.activeSlide = (this.activeSlide + 1) % this.count; },
        prev() { this.activeSlide = (this.activeSlide - 1 + this.count) % this.count; },
        go(i) { this.activeSlide = i; },
    }"
>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {{-- Section header + controls --}}
        <div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
            <header class="max-w-2xl">
                @if ($eyebrow)
                    <p class="font-body text-base font-semibold uppercase tracking-widest text-muted-foreground">{{ __($eyebrow) }}</p>
                @endif
                <h2 class="mt-2 text-balance font-heading text-3xl tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            </header>

            {{-- Prev / next controls --}}
            <div class="flex shrink-0 items-center gap-2">
                <x-ui.button
                    variant="outline"
                    size="icon"
                    type="button"
                    class="rounded-full"
                    x-on:click="prev()"
                    aria-label="{{ __('Previous slide') }}"
                >
                    <svg class="size-5 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m15 18-6-6 6-6" />
                    </svg>
                </x-ui.button>
                <x-ui.button
                    variant="outline"
                    size="icon"
                    type="button"
                    class="rounded-full"
                    x-on:click="next()"
                    aria-label="{{ __('Next slide') }}"
                >
                    <svg class="size-5 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m9 18 6-6-6-6" />
                    </svg>
                </x-ui.button>
            </div>
        </div>

        {{-- Slides --}}
        <div class="relative mt-10 grid">
            @foreach ($slides as $index => $slide)
                @php $reverse = $index % 2 === 1; @endphp
                <div
                    id="{{ $carouselId }}-panel-{{ $index }}"
                    class="col-start-1 row-start-1"
                    role="tabpanel"
                    aria-roledescription="slide"
                    aria-label="{{ __('Slide :n of :total', ['n' => $index + 1, 'total' => $count]) }}"
                    aria-labelledby="{{ $carouselId }}-tab-{{ $index }}"
                    x-show="activeSlide === {{ $index }}"
                    x-cloak
                    x-transition:enter="transition duration-500 ease-out"
                    x-transition:enter-start="opacity-0 translate-y-3"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-bind:aria-hidden="activeSlide === {{ $index }} ? 'false' : 'true'"
                >
                    <div class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
                        {{-- Media placeholder (no external image) --}}
                        <div class="relative aspect-[4/3] overflow-hidden rounded-lg bg-muted {{ $reverse ? 'lg:order-last' : '' }}">
                            <svg
                                class="absolute inset-0 size-full text-muted-foreground/20"
                                viewBox="0 0 120 90" fill="none" stroke="currentColor"
                                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                                preserveAspectRatio="xMidYMid slice" aria-hidden="true"
                            >
                                <circle cx="60" cy="38" r="16" />
                                <path d="M20 82c0-15.5 17.9-28 40-28s40 12.5 40 28" />
                            </svg>
                        </div>

                        {{-- Editorial content --}}
                        <div class="flex max-w-xl flex-col items-start gap-4">
                            @if (!empty($slide['eyebrow']))
                                <p class="font-body text-base font-semibold uppercase tracking-[0.25em] text-muted-foreground">
                                    {{ __($slide['eyebrow']) }}
                                </p>
                            @endif
                            <h3 class="font-heading text-2xl font-normal leading-tight tracking-tight sm:text-3xl lg:text-4xl">
                                {{ __($slide['title']) }}
                            </h3>
                            @if (!empty($slide['copy']))
                                <p class="text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">
                                    {{ __($slide['copy']) }}
                                </p>
                            @endif
                            @if (!empty($slide['cta']['label']))
                                <x-ui.button :href="$slide['cta']['href'] ?? '#'" :withArrow="true" class="mt-2">
                                    {{ __($slide['cta']['label']) }}
                                </x-ui.button>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Dot rail --}}
        <div class="mt-10 flex items-center justify-center gap-4" role="tablist" aria-label="{{ __('Choose slide') }}">
            @foreach ($slides as $index => $slide)
                <button
                    id="{{ $carouselId }}-tab-{{ $index }}"
                    type="button"
                    role="tab"
                    class="flex size-7 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    x-on:click="go({{ $index }})"
                    x-on:keydown.right.prevent="go(({{ $index }} + 1) % count); $nextTick(() => $el.parentElement.children[activeSlide].focus())"
                    x-on:keydown.left.prevent="go(({{ $index }} - 1 + count) % count); $nextTick(() => $el.parentElement.children[activeSlide].focus())"
                    x-on:keydown.home.prevent="go(0); $nextTick(() => $el.parentElement.children[activeSlide].focus())"
                    x-on:keydown.end.prevent="go(count - 1); $nextTick(() => $el.parentElement.children[activeSlide].focus())"
                    x-bind:aria-selected="activeSlide === {{ $index }} ? 'true' : 'false'"
                    x-bind:tabindex="activeSlide === {{ $index }} ? 0 : -1"
                    aria-controls="{{ $carouselId }}-panel-{{ $index }}"
                    aria-label="{{ __('Go to slide :n', ['n' => $index + 1]) }}"
                >
                    <span
                        x-bind:class="activeSlide === {{ $index }} ? 'w-7 bg-primary' : 'w-2 bg-border hover:bg-muted-foreground'"
                        class="h-2 rounded-full transition-all duration-300"
                        aria-hidden="true"
                    ></span>
                </button>
            @endforeach
        </div>
    </div>
</section>