@props([
    'groups' => [],
    'showPrices' => false,
    'product' => null,
])

@php
    /*
     | Commercial-measures block (design A3 / proposal §6, §19).
     | ONE readable interaction: a row of format tabs, each revealing a single
     | small table for that family. The inactive panels live in inert
     | <template x-if> blocks, so exactly ONE <table> is ever present in the
     | live DOM while every measure stays indexable source text. Desktop
     | (>= 640px): a real <table> per family with <caption>, <thead> and
     | <th scope="col">. Under 640px: each measure renders as a stacked
     | <dl> so nothing ever forces a horizontal scroll.
     |
     | Every format measure is also a tappable "card": tapping it opens the
     | full-screen FORMAT modal (below) that shows the format's photo, name and
     | specs as a stacked key/value list, plus a swipeable environment-photo
     | half. Two collections ship ZERO photos, so the modal degrades to a
     | branded "Foto próximamente" panel — never an empty carousel or a broken
     | image.
     |
     | BELOW the measure table sits a per-family PHOTO GALLERY (only the selected
     | family's format photos) plus an "Otras medidas" block mixing the other
     | families' photos. Both live in the same Alpine `active` scope, so the
     | tabs swap table, gallery and "other" grid together.
     */
    $measureAnchor = function (string $label): string {
        $value = mb_strtolower($label);
        $value = str_replace('×', 'x', $value);
        $value = str_replace([' ', 'cm'], '', $value);

        return trim(preg_replace('/[^a-z0-9]+/', '-', $value) ?? '', '-');
    };

    $decimal = function ($value): string {
        if (blank($value)) {
            return '—';
        }

        $formatted = rtrim(rtrim((string) $value, '0'), '.');

        return $formatted === '' ? '0' : $formatted;
    };

    $thickness = function ($format) use ($decimal): string {
        if (filled($format->thickness_min_cm) && filled($format->thickness_max_cm)) {
            return $decimal($format->thickness_min_cm).'–'.$decimal($format->thickness_max_cm).' cm';
        }

        if (filled($format->thickness_min_cm)) {
            return $decimal($format->thickness_min_cm).' cm';
        }

        if (filled($format->thickness_max_cm)) {
            return $decimal($format->thickness_max_cm).' cm';
        }

        return '—';
    };

    $weight = function ($format) use ($decimal): string {
        if (filled($format->weight_min_kg_m2) && filled($format->weight_kg_m2)) {
            return $decimal($format->weight_min_kg_m2).'–'.$decimal($format->weight_kg_m2).' kg/m²';
        }

        if (filled($format->weight_kg_m2)) {
            return $decimal($format->weight_kg_m2).' kg/m²';
        }

        return '—';
    };

    $availability = fn ($format): string => $format->availability === 'available' ? 'disponible' : 'bajo pedido';

    /*
     | Each format's OWN photos (used by the format modal, left + right).
     */
    $formatPhotos = function ($format): array {
        return $format->media
            ->map(fn ($media): ?array => blank($media->url)
                ? null
                : [
                    'url' => (string) $media->url,
                    'alt' => filled($media->alt_text)
                        ? (string) $media->alt_text
                        : 'Foto de '.$format->label,
                ])
            ->filter()
            ->values()
            ->all();
    };

    /*
     | Flat format index for the FORMAT modal. Each visible format gets a stable
     | integer index the modal's Alpine controller uses to reveal its panel.
     */
    $flatFormats = [];
    $flatIndexById = [];

    foreach ($groups as $group) {
        foreach ($group['formats'] as $format) {
            $flatIndexById[$format->id] = count($flatFormats);
            $flatFormats[] = [
                'label' => (string) $format->label,
                'family' => $group['label'],
                'thickness' => $thickness($format),
                'weight' => $weight($format),
                // The format's OWN photo (first media), so the modal shows the
                // photo of the clicked format — never another format's.
                'photo' => $format->media->isNotEmpty() ? (string) $format->media->first()->url : null,
                'photoAlt' => 'Foto de '.$format->label,
                'photos' => $formatPhotos($format),
            ];
        }
    }

    /*
     | Modal media: the collection's real photos. `media` is the same relation
     | the gallery uses; when a collection has no media (Cuarcita Clara, Amarre
     | Americano) the list is empty and the modal renders the placeholder.
     */
    $collectionName = $product instanceof \Illuminate\Database\Eloquent\Model ? $product->collectionName() : 'Colección';
    $commercialName = ($product instanceof \Illuminate\Database\Eloquent\Model && filled($product->commercial_name))
        ? (string) $product->commercial_name
        : null;

    $photos = $product instanceof \Illuminate\Database\Eloquent\Model
        ? $product->media
            ->unique(fn ($media): string => (string) ($media->hash ?: $media->path))
            ->map(fn ($media): array => [
                'url' => (string) $media->url,
                'alt' => filled($media->alt_text) ? (string) $media->alt_text : $collectionName,
            ])->values()->all()
        : [];

    $photoCount = count($photos);

    /*
     | Family photo galleries + "Otras medidas" (design review).
     | Each format owns its own media; the gallery below the measure table shows
     | ONLY the selected family's photos, and the "Otras medidas" block shows a
     | mix of every OTHER family's photos so the visitor grasps the full variety.
     | Both are built once here (server-side) and revealed by Alpine `active`.
     */
    $groupsPhotos = [];
    $allPhotosByUrl = [];

    foreach ($groups as $index => $group) {
        // NOTE: use its OWN variable — reusing `$photos` here clobbered the
        // collection media used by the format MODAL (it rendered "Foto
        // próximamente" / wrong photos).
        $familyPhotos = [];

        foreach ($group['formats'] as $format) {
            foreach ($formatPhotos($format) as $photo) {
                $key = $photo['url'];

                if (! isset($allPhotosByUrl[$key])) {
                    $allPhotosByUrl[$key] = $photo;
                }

                $familyPhotos[$key] = $photo;
            }
        }

        $groupsPhotos[$index] = array_values($familyPhotos);
    }

    // The "other families" mix per selected family = every photo except its own.
    $otherPhotosByGroup = [];

    foreach (array_keys($groups) as $index) {
        $other = $allPhotosByUrl;

        foreach ($groupsPhotos[$index] as $photo) {
            unset($other[$photo['url']]);
        }

        $otherPhotosByGroup[$index] = array_values($other);
    }
@endphp

@if (! empty($groups))
    <div x-data="{ open: false, family: 0, formatIndex: 0, photo: 0, photoCount: {{ $photoCount }}, _touchX: null, atTop: true, atBottom: false, canScroll: false, openFormat(i) { this.formatIndex = i; this.photo = 0; this.open = true; document.documentElement.classList.add('overflow-hidden'); this.$nextTick(() => { this.$refs.formatDialog?.focus?.(); this.syncScroll(this.$refs.specScroll); }); }, close() { this.open = false; document.documentElement.classList.remove('overflow-hidden'); }, syncScroll(el) { if (! el) return; const max = el.scrollHeight - el.clientHeight; this.canScroll = max > 1; this.atTop = el.scrollTop <= 0; this.atBottom = el.scrollTop >= max - 1; }, scrollSpecs(dir) { const el = this.$refs.specScroll; if (! el) return; el.scrollBy({ top: dir * el.clientHeight * 0.8 }); }, nextPhoto() { if (! this.open || this.photoCount < 2) return; this.photo = (this.photo + 1) % this.photoCount; }, prevPhoto() { if (! this.open || this.photoCount < 2) return; this.photo = (this.photo - 1 + this.photoCount) % this.photoCount; }, touchStart(e) { this._touchX = e.changedTouches?.[0]?.clientX ?? null; }, touchEnd(e) { if (this._touchX == null) return; const dx = (e.changedTouches?.[0]?.clientX ?? this._touchX) - this._touchX; this._touchX = null; if (Math.abs(dx) > 50) { dx < 0 ? this.nextPhoto() : this.prevPhoto(); } } }"
         @keydown.window.escape="close()"
         @keydown.window.arrow-right="nextPhoto()"
         @keydown.window.arrow-left="prevPhoto()">

        <div data-measure-table>
            <div role="tablist"
                 aria-label="Formatos y medidas"
                 class="flex flex-wrap gap-2">
                @foreach ($groups as $index => $group)
                    <button type="button"
                            id="presentacion-tab-{{ $group['family'] }}"
                            role="tab"
                            aria-controls="presentacion-{{ $group['family'] }}"
                            :aria-selected="(family === {{ $index }}).toString()"
                            x-on:click="family = {{ $index }}"
                            :class="family === {{ $index }} ? 'border-accent-500 bg-accent-500/10 text-accent-text' : 'border-line bg-surface-raised text-on-surface-muted hover:border-accent-500 hover:text-on-surface'"
                            class="inline-flex min-h-12 items-center justify-center whitespace-nowrap border px-5 py-3 font-sans text-base font-semibold transition-colors duration-fast ease-out-soft focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                        {{ $group['label'] }}
                    </button>
                @endforeach
            </div>

            @foreach ($groups as $index => $group)
                <template x-if="family === {{ $index }}">
                    <div id="presentacion-{{ $group['family'] }}"
                         role="tabpanel"
                         aria-labelledby="presentacion-tab-{{ $group['family'] }}"
                         class="mt-8 scroll-mt-28 border border-line bg-surface-raised p-4 sm:p-6">
                    <h3 class="font-serif text-h3 font-normal uppercase text-on-surface">{{ $group['label'] }}</h3>

                    {{-- Desktop: real table with full table semantics. --}}
                    <table class="mt-4 hidden w-full border-collapse font-sans text-base text-on-surface-muted sm:table">
                        <caption class="sr-only">Medidas comerciales de {{ $group['label'] }}</caption>
                        <thead>
                            <tr class="border-b border-line text-left">
                                <th scope="col" class="py-4 pr-4 font-medium text-on-surface">Medida</th>
                                <th scope="col" class="px-4 py-4 font-medium text-on-surface">Espesor</th>
                                <th scope="col" class="px-4 py-4 font-medium text-on-surface">Peso m²</th>
                                <th scope="col" class="px-4 py-4 font-medium text-on-surface">M²/caja</th>
                                <th scope="col" class="px-4 py-4 font-medium text-on-surface">Unid/m²</th>
                                <th scope="col" class="px-4 py-4 font-medium text-on-surface">Disponibilidad</th>
                                @if ($showPrices)
                                    <th scope="col" class="px-4 py-4 font-medium text-on-surface">Precio m²</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($group['formats'] as $format)
                                @php
                                    $anchor = $measureAnchor($format->label);
                                    $formatIndex = $flatIndexById[$format->id] ?? 0;
                                @endphp
                                <tr class="border-b border-line last:border-0">
                                    <th scope="row" class="py-4 pr-4 text-left font-medium text-on-surface">
                                        <a href="#{{ $anchor }}"
                                           @click.prevent="openFormat({{ $formatIndex }})"
                                           aria-label="Ver ficha de {{ $format->label }}"
                                           class="inline-flex items-center gap-2 font-sans text-base font-medium text-on-surface transition-colors duration-fast ease-out-soft hover:text-accent-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                            {{ $format->label }}
                                            <x-icon name="arrow-right" :size="16" class="text-accent-text" aria-hidden="true" />
                                        </a>
                                    </th>
                                    <td class="px-4 py-4 font-mono text-on-surface">{{ $thickness($format) }}</td>
                                    <td class="px-4 py-4 font-mono text-on-surface">{{ $weight($format) }}</td>
                                    <td class="px-4 py-4 font-mono text-on-surface">{{ $decimal($format->m2_per_box) }}</td>
                                    <td class="px-4 py-4 font-mono text-on-surface">{{ $decimal($format->units_per_m2) }}</td>
                                    <td class="px-4 py-4 text-on-surface-muted">{{ $availability($format) }}</td>
                                    @if ($showPrices)
                                        <td class="px-4 py-4 font-mono text-on-surface">
                                            {{ filled($format->price_per_m2) ? 'S/ '.number_format((float) $format->price_per_m2, 2) : '—' }}
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    {{-- Mobile: one stacked <dl> per measure, no horizontal scroll. --}}
                    <div class="mt-4 space-y-6 sm:hidden">
                        @foreach ($group['formats'] as $format)
                            @php
                                $anchor = $measureAnchor($format->label);
                                $formatIndex = $flatIndexById[$format->id] ?? 0;
                            @endphp
                            <dl class="border-b border-line pb-6 last:border-0 last:pb-0">
                                <dt id="{{ $anchor }}" class="scroll-mt-28 font-serif text-h3 font-normal text-on-surface">
                                    {{ $format->label }}
                                </dt>
                                <dd class="mt-1">
                                    <button type="button"
                                            @click="openFormat({{ $formatIndex }})"
                                            aria-label="Ver ficha de {{ $format->label }}"
                                            class="inline-flex items-center gap-2 font-sans text-base font-medium text-accent-text transition-colors duration-fast ease-out-soft hover:text-on-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                        Ver ficha
                                        <x-icon name="arrow-right" :size="16" aria-hidden="true" />
                                    </button>
                                </dd>
                                <dd class="mt-3 flex items-baseline justify-between gap-6 border-b border-line/60 pb-2.5">
                                    <span class="font-sans text-base text-on-surface-muted">Espesor</span>
                                    <span class="font-mono text-base text-on-surface">{{ $thickness($format) }}</span>
                                </dd>
                                <dd class="flex items-baseline justify-between gap-6 border-b border-line/60 py-2.5">
                                    <span class="font-sans text-base text-on-surface-muted">Peso m²</span>
                                    <span class="font-mono text-base text-on-surface">{{ $weight($format) }}</span>
                                </dd>
                                <dd class="flex items-baseline justify-between gap-6 border-b border-line/60 py-2.5">
                                    <span class="font-sans text-base text-on-surface-muted">M²/caja</span>
                                    <span class="font-mono text-base text-on-surface">{{ $decimal($format->m2_per_box) }}</span>
                                </dd>
                                <dd class="flex items-baseline justify-between gap-6 border-b border-line/60 py-2.5">
                                    <span class="font-sans text-base text-on-surface-muted">Unid/m²</span>
                                    <span class="font-mono text-base text-on-surface">{{ $decimal($format->units_per_m2) }}</span>
                                </dd>
                                <dd class="flex items-baseline justify-between gap-6 pt-2.5">
                                    <span class="font-sans text-base text-on-surface-muted">Disponibilidad</span>
                                    <span class="text-base text-on-surface-muted">{{ $availability($format) }}</span>
                                </dd>
                                @if ($showPrices)
                                    <dd class="flex items-baseline justify-between gap-6 pt-2.5">
                                        <span class="font-sans text-base text-on-surface-muted">Precio m²</span>
                                        <span class="font-mono text-base text-on-surface">{{ filled($format->price_per_m2) ? 'S/ '.number_format((float) $format->price_per_m2, 2) : '—' }}</span>
                                    </dd>
                                @endif
                            </dl>
                        @endforeach
                    </div>
                    </div>
                </template>
            @endforeach

            {{-- ================================================================
                 FAMILY GALLERY — reacts to the selected tab. Only the selected
                 family's own photos render; switching tabs swaps the grid via
                 Alpine `active`. A family with no photos degrades to a neutral
                 "Foto próximamente" panel instead of an empty grid.
                 ================================================================ --}}
            @foreach ($groups as $index => $group)
                <template x-if="family === {{ $index }}">
                    <div data-format-gallery
                         data-format-family="{{ $group['family'] }}"
                         class="mt-6 border-t border-line pt-6">
                        <h3 class="font-serif text-h3 font-normal uppercase text-on-surface">Fotos de {{ $group['label'] }}</h3>

                        @if ($groupsPhotos[$index] !== [])
                            <ul class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                                @foreach ($groupsPhotos[$index] as $photo)
                                    <li data-format-gallery-photo class="overflow-hidden border border-line bg-surface-raised">
                                        <x-image
                                            :src="$photo['url']"
                                            :alt="$photo['alt']"
                                            :width="400"
                                            :height="300"
                                            wrapper-class="aspect-[4/3] w-full"
                                            img-class="h-full w-full object-cover" />
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <div class="mt-4 flex flex-col items-center gap-4 border border-line bg-surface-raised px-8 py-12 text-center">
                                <x-icon name="image" :size="32" aria-hidden="true" />
                                <span class="font-mono text-sm uppercase tracking-[0.18em] text-on-surface-muted">Foto próximamente</span>
                            </div>
                        @endif
                    </div>
                </template>
            @endforeach

            {{-- ================================================================
                 OTRAS MEDIDAS — a secondary inspiration block mixing photos from
                 the OTHER families (the whole stone), so the visitor grasps the
                 full variety. Hidden entirely when there are no other photos.
                 ================================================================ --}}
            @foreach ($groups as $index => $group)
                <template x-if="family === {{ $index }}">
                    @if ($otherPhotosByGroup[$index] !== [])
                        <div data-format-other
                             data-format-family="{{ $group['family'] }}"
                             class="mt-8 border-t border-line pt-6">
                            <p class="font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text">Otras medidas</p>
                            <h3 class="mt-2 font-serif text-h3 font-normal uppercase text-on-surface">Más formatos de esta piedra</h3>

                            <ul class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                                @foreach ($otherPhotosByGroup[$index] as $photo)
                                    <li data-format-other-photo class="overflow-hidden border border-line bg-surface-raised">
                                        <x-image
                                            :src="$photo['url']"
                                            :alt="$photo['alt']"
                                            :width="400"
                                            :height="300"
                                            wrapper-class="aspect-[4/3] w-full"
                                            img-class="h-full w-full object-cover" />
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </template>
            @endforeach
        </div>

        {{-- ==================================================================
             FORMAT MODAL — full-screen ficha, split light/photo on desktop and
             stacked on mobile. A large labelled "Cerrar" control (>= 48px) is
             always reachable. The photo half is intentionally dark (approved:
             a photo, not a "dark band") with >= 44px arrows, swipe and dots.
             Zero-photo collections render one branded "Foto próximamente" panel.
             ================================================================== --}}
        <div x-cloak
             x-show="open"
             x-ref="formatDialog"
             role="dialog"
             aria-modal="true"
             aria-label="Ficha de formato"
             tabindex="-1"
             data-format-modal
             x-transition:enter="transition duration-slow ease-out-soft"
             x-transition:enter-start="translate-y-full"
             x-transition:enter-end="translate-y-0"
             x-transition:leave="transition duration-slow ease-in-out-soft"
             x-transition:leave-start="translate-y-0"
             x-transition:leave-end="translate-y-full"
             class="fixed inset-0 z-[90] flex flex-col overflow-y-auto bg-surface text-on-surface lg:flex-row lg:overflow-hidden">

            <button type="button"
                    @click="close()"
                    aria-label="Cerrar"
                    class="fixed right-4 top-4 z-50 inline-flex min-h-12 items-center justify-center gap-2 rounded-none bg-accent-500 px-5 font-sans text-base font-semibold uppercase tracking-[0.04em] text-brand-950 shadow-soft transition-colors duration-fast ease-out-soft hover:bg-accent-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                Cerrar
                <x-icon name="close" :size="20" />
            </button>

            {{-- LIGHT HALF: intro photo + collection/format ficha. On large screens
                 the photo and the spec text sit side by side (two columns) so the
                 half fits the viewport and stops needing the raw internal
                 scrollbar; a thin on-brand scrollbar, gradient fades and
                 Subir/Bajar controls cover whatever overflow remains. --}}
            <div class="relative flex flex-col lg:w-1/2 lg:overflow-hidden">
                <div x-ref="specScroll"
                     @scroll="syncScroll($el)"
                     data-format-scroll
                     class="overscroll-contain lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
                    <div class="p-6 pt-16 sm:p-10 sm:pt-20 lg:p-14 lg:pt-20">
                        <div class="lg:grid lg:grid-cols-[2fr_3fr] lg:items-start lg:gap-10">
                            <div class="aspect-[4/3] w-full overflow-hidden bg-surface-hover">
                                {{-- LEFT: the COLLECTION's photo (fixed). The selected
                                     format's own photo lives on the RIGHT half of the modal. --}}
                                @if ($photos !== [])
                                    <img src="{{ $photos[0]['url'] }}"
                                         alt="{{ $photos[0]['alt'] }}"
                                         loading="lazy"
                                         decoding="async"
                                         class="h-full w-full object-cover">
                                @else
                                    <div class="flex h-full w-full items-center justify-center border border-line bg-surface-raised">
                                        <span class="font-mono text-sm uppercase tracking-[0.18em] text-on-surface-muted">Foto próximamente</span>
                                    </div>
                                @endif
                            </div>

                            <div>
                                <p class="font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text">{{ $commercialName ?? $collectionName }}</p>
                                <h3 class="mt-2 font-serif text-h2 font-normal uppercase leading-[0.95] text-on-surface">{{ $collectionName }}</h3>

                                @foreach ($flatFormats as $formatIndex => $format)
                                    <div x-show="formatIndex === {{ $formatIndex }}">
                                        <p class="mt-5 font-sans text-sm uppercase tracking-[0.16em] text-on-surface-muted">{{ $format['family'] }}</p>
                                        <h4 class="mt-1 font-serif text-h3 font-normal uppercase text-on-surface">{{ $format['label'] }}</h4>

                                        <dl class="mt-6">
                                            <div class="flex items-baseline justify-between gap-6 border-b border-line py-3.5">
                                                <dt class="font-sans text-body text-on-surface-muted">Medida</dt>
                                                <dd class="text-right font-mono text-body text-on-surface">{{ $format['label'] }}</dd>
                                            </div>
                                            <div class="flex items-baseline justify-between gap-6 border-b border-line py-3.5">
                                                <dt class="font-sans text-body text-on-surface-muted">Espesor</dt>
                                                <dd class="text-right font-mono text-body text-on-surface">{{ $format['thickness'] }}</dd>
                                            </div>
                                            <div class="flex items-baseline justify-between gap-6 border-b border-line py-3.5">
                                                <dt class="font-sans text-body text-on-surface-muted">Peso por m²</dt>
                                                <dd class="text-right font-mono text-body text-on-surface">{{ $format['weight'] }}</dd>
                                            </div>
                                        </dl>
                                    </div>
                                @endforeach

                                <p class="mt-6 font-sans text-body font-medium text-accent-text">Espesores varían entre ± 1–3 cm.</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Gradient fades (desktop): hint at more content above/below. --}}
                <div aria-hidden="true"
                     class="pointer-events-none absolute inset-x-0 top-0 z-10 hidden h-12 scroll-fade-top transition-opacity duration-base ease-out-soft lg:block"
                     :class="atTop ? 'opacity-0' : 'opacity-100'"></div>
                <div aria-hidden="true"
                     class="pointer-events-none absolute inset-x-0 bottom-0 z-10 hidden h-12 scroll-fade-bottom transition-opacity duration-base ease-out-soft lg:block"
                     :class="atBottom ? 'opacity-0' : 'opacity-100'"></div>

                {{-- Subir / Bajar controls (desktop): >= 44px, never hover-only. --}}
                <div class="absolute bottom-5 right-5 z-20 hidden flex-col gap-2 lg:flex"
                     :class="canScroll ? '' : 'pointer-events-none opacity-0'">
                    <button type="button"
                            @click="scrollSpecs(-1)"
                            :disabled="atTop"
                            aria-label="Subir"
                            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-none border border-line bg-surface-raised px-3 font-sans text-base font-medium text-on-surface shadow-soft transition-colors duration-fast ease-out-soft hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-40">
                        <x-icon name="chevron-up" :size="20" aria-hidden="true" />
                        Subir
                    </button>
                    <button type="button"
                            @click="scrollSpecs(1)"
                            :disabled="atBottom"
                            aria-label="Bajar"
                            class="inline-flex min-h-11 items-center justify-center gap-2 rounded-none border border-line bg-surface-raised px-3 font-sans text-base font-medium text-on-surface shadow-soft transition-colors duration-fast ease-out-soft hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-40">
                        <x-icon name="chevron-down" :size="20" aria-hidden="true" />
                        Bajar
                    </button>
                </div>
            </div>

            {{-- PHOTO HALF: dark full-bleed environment photos with arrows + dots. --}}
            <div data-tone="dark"
                 class="relative flex flex-col bg-surface lg:w-1/2"
                 @touchstart.passive="touchStart($event)"
                 @touchend.passive="touchEnd($event)">
                <div class="relative flex-1 overflow-hidden">
                    {{-- The selected format's OWN photos (or a neutral placeholder).
                         It NEVER shows the collection's first photos on the right. --}}
                    @foreach ($flatFormats as $formatIndex => $format)
                        @if (($format['photos'] ?? []) !== [])
                            <img x-show="formatIndex === {{ $formatIndex }}"
                                 src="{{ $format['photos'][0]['url'] }}"
                                 alt="{{ $format['photos'][0]['alt'] }}"
                                 loading="lazy"
                                 decoding="async"
                                 class="absolute inset-0 h-full w-full object-cover">
                        @else
                            <div x-show="formatIndex === {{ $formatIndex }}"
                                 class="flex h-full w-full items-center justify-center p-6">
                                <div class="flex flex-col items-center gap-4 border border-line bg-surface-raised px-8 py-12 text-center">
                                    <x-icon name="image" :size="32" aria-hidden="true" />
                                    <span class="font-mono text-sm uppercase tracking-[0.18em] text-on-surface">Foto próximamente</span>
                                    <span class="max-w-xs font-sans text-sm text-on-surface-muted">Estamos preparando las fotos de esta medida. Escríbenos por WhatsApp y te enviamos fotos reales.</span>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@else
    <p class="border border-line bg-surface-raised p-6 font-sans text-base text-on-surface-muted">
        Estamos completando las medidas comerciales de esta colección. Consúltanos por las presentaciones disponibles.
    </p>
@endif