Product Tabs

@props([
    'eyebrow'    => 'The Monogram Edit',
    'heading'    => "Timeless Look You'll Carry for Years",
    'subheading' => 'Considered pieces, restocked weekly and made to outlast the season.',
    'tabs'       => null,
])

@php
    $tabs ??= [
        [
            'label'    => 'New In',
            'products' => [
                ['name' => 'Atelier Wool Coat',    'category' => 'Outerwear',  'price' => '$420', 'compareAt' => null,  'badge' => 'New'],
                ['name' => 'Soft Cashmere Crew',   'category' => 'Knitwear',   'price' => '$180', 'compareAt' => null,  'badge' => 'New'],
                ['name' => 'Tailored Wide Trouser','category' => 'Trousers',   'price' => '$160', 'compareAt' => null,  'badge' => null],
                ['name' => 'Structured Leather Tote','category' => 'Bags',     'price' => '$340', 'compareAt' => null,  'badge' => 'New'],
            ],
        ],
        [
            'label'    => 'Bestsellers',
            'products' => [
                ['name' => 'Everyday Silk Shirt',  'category' => 'Shirts',     'price' => '$140', 'compareAt' => null,  'badge' => 'Loved'],
                ['name' => 'Heritage Denim',       'category' => 'Denim',      'price' => '$150', 'compareAt' => null,  'badge' => null],
                ['name' => 'Merino Travel Scarf',  'category' => 'Accessories','price' => '$90',  'compareAt' => null,  'badge' => 'Loved'],
                ['name' => 'Minimal Court Sneaker','category' => 'Footwear',   'price' => '$210', 'compareAt' => null,  'badge' => null],
            ],
        ],
        [
            'label'    => 'On Sale',
            'products' => [
                ['name' => 'Pleated Midi Skirt',   'category' => 'Skirts',     'price' => '$96',  'compareAt' => '$160', 'badge' => 'Save 40%'],
                ['name' => 'Linen Camp Shirt',     'category' => 'Shirts',     'price' => '$72',  'compareAt' => '$120', 'badge' => 'Save 40%'],
                ['name' => 'Quilted Liner Jacket', 'category' => 'Outerwear',  'price' => '$190', 'compareAt' => '$280', 'badge' => 'Save 32%'],
                ['name' => 'Suede Chelsea Boot',   'category' => 'Footwear',   'price' => '$220', 'compareAt' => '$300', 'badge' => 'Save 26%'],
            ],
        ],
    ];
@endphp

{{--
    product-tabs-01 — "Tabbed product grid" editorial Monogram section.
    A font-heading section title above an accessible tablist (New In, Bestsellers, 
    On Sale); selecting a tab swaps the visible grid of editorial product cards
    (bg-muted aspect-[4/5] placeholder, name, price, optional sale badge).
    Inline Alpine roving-tabindex tablist (no separate JS module); panels x-show.
    Composes <x-ui.badge>, <x-ui.button>. Semantic tokens, logical props, WCAG AA, RTL-safe.
--}}
<section
    {{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-24']) }}
    data-slot="product-tabs"
    x-data="{
        active: 0,
        rtl: false,
        init() {
            this.rtl = getComputedStyle(this.$refs.tablist).direction === 'rtl';
        },
        onKey(e) {
            const tabs = [...this.$refs.tablist.querySelectorAll('[role=\'tab\']')];
            let idx = tabs.indexOf(document.activeElement);
            if (idx === -1) idx = this.active;
            let next = idx;
            if (e.key === 'Home') { next = 0; }
            else if (e.key === 'End') { next = tabs.length - 1; }
            else if (e.key === 'ArrowRight') { next = idx + (this.rtl ? -1 : 1); }
            else if (e.key === 'ArrowLeft') { next = idx + (this.rtl ? 1 : -1); }
            else { return; }
            e.preventDefault();
            next = (next + tabs.length) % tabs.length;
            this.active = next;
            tabs[next].focus();
        }
    }"
>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {{-- Heading --}}
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="font-body text-sm uppercase tracking-[0.25em] text-muted-foreground">{{ __($eyebrow) }}</p>
            @endif
            <h2 class="mt-4 text-balance font-heading text-3xl tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{{ __($subheading) }}</p>
            @endif
        </div>

        {{-- Tablist --}}
        <div
            x-ref="tablist"
            role="tablist"
            aria-label="{{ __('Product collections') }}"
            x-on:keydown="onKey($event)"
            class="mt-8 flex flex-wrap items-center gap-x-8 gap-y-2 border-b border-border"
        >
            @foreach ($tabs as $tab)
                <button
                    type="button"
                    role="tab"
                    id="product-tabs-01-tab-{{ $loop->index }}"
                    aria-controls="product-tabs-01-panel-{{ $loop->index }}"
                    x-bind:aria-selected="active === {{ $loop->index }} ? 'true' : 'false'"
                    x-bind:tabindex="active === {{ $loop->index }} ? 0 : -1"
                    x-on:click="active = {{ $loop->index }}"
                    x-bind:class="active === {{ $loop->index }}
                        ? 'border-foreground text-foreground'
                        : 'border-transparent text-muted-foreground hover:text-foreground'"
                    class="-mb-px border-b-2 py-4 font-body text-sm uppercase tracking-widest transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                    {{ __($tab['label']) }}
                </button>
            @endforeach
        </div>

        {{-- Panels --}}
        @foreach ($tabs as $tab)
            <div
                id="product-tabs-01-panel-{{ $loop->index }}"
                role="tabpanel"
                aria-labelledby="product-tabs-01-tab-{{ $loop->index }}"
                tabindex="0"
                x-show="active === {{ $loop->index }}"
                x-cloak
                class="mt-10 focus-visible:outline-none"
            >
                <ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ($tab['products'] as $product)
                        <li>
                            <div class="group flex h-full flex-col gap-4">
                                {{-- Media --}}
                                <div class="relative aspect-[4/5] overflow-hidden rounded-lg bg-muted">
                                    {{-- Decorative placeholder (no external image fetch). --}}
                                    <svg
                                        class="absolute inset-0 size-full text-muted-foreground/20"
                                        viewBox="0 0 100 125" fill="none" stroke="currentColor"
                                        stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"
                                        preserveAspectRatio="xMidYMid slice" aria-hidden="true"
                                    >
                                        <path d="M30 28l20-10 20 10-8 10v54H38V38z" />
                                        <path d="M30 28l20 12 20-12" />
                                    </svg>

                                    @if (!empty($product['badge']))
                                        <div class="absolute start-3 top-3">
                                            <x-ui.badge variant="default" class="shadow-sm">{{ __($product['badge']) }}</x-ui.badge>
                                        </div>
                                    @endif
                                </div>

                                {{-- Body --}}
                                <div class="flex flex-1 flex-col">
                                    <p class="font-body text-sm uppercase tracking-widest text-muted-foreground">{{ __($product['category']) }}</p>
                                    <h3 class="mt-2 text-sm font-semibold text-foreground">
                                        <a href="#" class="transition-colors hover:text-muted-foreground focus-visible:text-muted-foreground focus-visible:outline-none">
                                            {{ __($product['name']) }}
                                        </a>
                                    </h3>

                                    <div class="mt-2 flex items-baseline gap-2">
                                        <span class="text-base font-semibold text-foreground">{{ $product['price'] }}</span>
                                        @if (!empty($product['compareAt']))
                                            <span class="text-sm text-muted-foreground line-through">{{ $product['compareAt'] }}</span>
                                        @endif
                                    </div>

                                    <div class="mt-4">
                                        <x-ui.button
                                            variant="outline"
                                            size="sm"
                                            type="button"
                                            class="w-full"
                                            aria-label="{{ __('Add :name to bag', ['name' => $product['name']]) }}"
                                        >
                                            {{ __('Add to bag') }}
                                        </x-ui.button>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endforeach
    </div>
</section>