@props([
    'project' => null,
    'photo' => null,
    'photoIndex' => 0,
    'categoryLabel' => null,
])

@php
    /*
     | Image-first obra tile (owner request): the PHOTO is the protagonist and
     | the grid reads as a GALLERY, not a catalogue. There is no always-visible
     | caption block on hover-capable devices — the caption (title + the single
     | uso · tipo · ubicación line) reveals over the photo through a dark scrim
     | ONLY on hover. On touch devices (no hover capability) the same caption
     | stays VISIBLE below the photo. There is NO per-tile "Quiero algo así"
     | button (the client removed it): the single action lives inside the work's
     | full-screen dialog. The reveal decision is made by POINTER
     | (`@media (hover: hover)`), never by viewport width.
     */
    $isModel = $project instanceof \App\Models\Project;
    $hasPhoto = $photo instanceof \App\Models\Media;

    $title = data_get($project, 'title', 'Obra');
    $slug = data_get($project, 'slug');
    $location = data_get($project, 'location');

    $typeLabel = $isModel
        ? (filled($project->type) ? $project->typeLabel() : null)
        : (filled(data_get($project, 'type')) ? (data_get($project, 'type') === 'comercial' ? 'Comercial' : 'Residencial') : null);

    $useLabel = $isModel
        ? $project->useLabel()
        : (\App\Models\Project::USES[data_get($project, 'use')] ?? null);

    // The section passes the administrable category; on the uncategorized
    // "Otras obras" section the caption keeps the legacy `use` label, so a work
    // only loses its meta line when category, type AND location are all absent
    // (never an empty/dangling separator).
    $classificationLabel = filled($categoryLabel) ? $categoryLabel : $useLabel;

    $metaLine = collect([$classificationLabel, $typeLabel, $location])->filter()->join(' · ');

    $image = $isModel ? $project->image : data_get($project, 'image', \App\Models\Media::placeholderUrl());

    // Each tile renders ONE of the work's photos when one is supplied (the
    // gallery now shows every photo up front); otherwise it falls back to the
    // cover image (or the branded placeholder for a photo-less work).
    $tileImage = $hasPhoto ? (string) $photo->url : $image;
    $tileAlt = $hasPhoto && filled($photo->alt_text) ? (string) $photo->alt_text : ('Obra '.$title.' en piedra laja');

    $year = $isModel ? $project->completed_at?->format('Y') : null;

    // Unique per tile (a work may render several photo tiles sharing its title).
    $titleId = 'obra-title-'.($isModel ? $project->id : (string) $slug).($hasPhoto ? '-'.$photo->id : '');

    /*
     | Variable-height mosaic: each obra gets a deterministic portrait/landscape
     | aspect from a short cycle (seeded by the id, or the slug hash for array
     | shapes) so the masonry heights stay stable across filter/pagination
     | re-renders while still varying from tile to tile.
     */
    $aspects = ['aspect-[3/4]', 'aspect-[4/3]', 'aspect-[1/1]', 'aspect-[3/2]', 'aspect-[4/5]', 'aspect-[2/3]'];
    $seed = $isModel
        ? ($hasPhoto ? (int) $photo->id : (int) $project->id)
        : abs(crc32((string) $slug));
    $aspect = $aspects[$seed % count($aspects)];

    /*
     | Dialog data: the work's photos (gallery media, never the before/after
     | pair), the stones used and a WhatsApp deep link for the single dominant
     | action. A work with no photos degrades to the branded placeholder panel.
     */
    $stones = $isModel ? $project->products : collect();

    $photos = ($isModel ? $project->galleryMedia() : collect())
        ->map(fn ($media): array => [
            'url' => (string) $media->url,
            'alt' => filled($media->alt_text) ? (string) $media->alt_text : $title,
        ])
        ->values()
        ->all();

    $photoCount = count($photos);

    $whatsappUrl = app(\App\Services\WhatsappService::class)->link(
        null,
        'Hola Piedra Total Perú, vi la obra "'.$title.'" en la galería y quiero algo así. ¿Me cotizan por m² y flete?',
    );

    /*
     | Hover-vs-touch classes. The reveal and the action's clickability are both
     | guarded by `@media (hover: hover)`, so a touch device can never trigger
     | the overlay and the below-photo action can never disappear there.
     */
    $touchBlockClasses = 'pt-4 [@media(hover:hover)]:hidden';
    $overlayClasses = 'pointer-events-none absolute inset-0 z-10 flex flex-col justify-end bg-gradient-to-t from-brand-950/95 via-brand-950/45 to-transparent p-5 opacity-0 transition-opacity duration-base ease-out-soft [@media(hover:hover)]:group-hover:opacity-100';
@endphp

<div x-data="{ open: false, photo: {{ (int) $photoIndex }}, photoCount: {{ $photoCount }}, _touchX: null, openDialog() { this.open = true; this.photo = {{ (int) $photoIndex }}; document.documentElement.classList.add('overflow-hidden'); this.$nextTick(() => this.$refs.workDialog?.focus?.()); }, closeDialog() { this.open = false; document.documentElement.classList.remove('overflow-hidden'); }, 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="closeDialog()"
     @keydown.window.arrow-right="nextPhoto()"
     @keydown.window.arrow-left="prevPhoto()"
     data-project-tile
     {{ $attributes->merge(['class' => 'mb-6 break-inside-avoid']) }}>

    <article aria-label="Obra {{ $title }}" class="group relative">

        {{-- Photo-first: the whole photo opens the dialog, never navigates. --}}
        <div class="relative">
            <button type="button"
                    @click="openDialog()"
                    data-project-photo
                    aria-label="Ver la obra {{ $title }}"
                    class="relative block w-full {{ $aspect }} overflow-hidden bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-300">

                <div class="absolute inset-0" data-image-reveal>
                    @if (isset($media) && trim((string) $media) !== '')
                        {{ $media }}
                    @else
                        <x-image
                            :src="$tileImage"
                            :alt="$tileAlt"
                            :width="1200"
                            :height="900"
                            wrapper-class="h-full w-full"
                            img-class="h-full w-full object-cover transition-transform duration-slower ease-out-soft group-hover:scale-105"
                        />
                    @endif
                </div>
            </button>

        </div>

        {{-- Touch caption, always visible on non-hover devices. --}}
        <div class="{{ $touchBlockClasses }}" data-project-caption>
            <h3 id="{{ $titleId }}" class="font-serif text-h3 font-normal uppercase leading-[1.05] text-on-surface">{{ $title }}</h3>

            @if ($metaLine !== '')
                <p class="mt-2 font-sans text-base leading-relaxed text-on-surface-muted">{{ $metaLine }}</p>
            @endif
        </div>
    </article>

    {{-- =====================================================================
         WORK DIALOG — full-screen ficha (never a new page), mirroring the
         collections dialog. Light background, a large labelled "Cerrar" control
         (>= 48px), a swipeable photo carousel (or the branded "Foto próximamente"
         panel), the work's details as a stacked key/value list at 16px, and ONE
         dominant gold WhatsApp action ("Quiero algo así") with dark text. The
         URL never changes and there is no navigation to /galeria/{slug}.
         ===================================================================== --}}
    <div x-cloak
         x-show="open"
         x-ref="workDialog"
         role="dialog"
         aria-modal="true"
         aria-label="Ficha de {{ $title }}"
         tabindex="-1"
         data-work-dialog
         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:overflow-hidden">

        <button type="button"
                @click="closeDialog()"
                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>

        <div class="mx-auto w-full max-w-[1600px] px-5 pb-10 pt-16 sm:px-8 sm:pt-20 lg:h-full lg:px-12 lg:pt-24 xl:px-16">
            <div class="grid gap-10 lg:h-full lg:grid-cols-2 lg:gap-16">
                {{-- Photo half (carousel or branded placeholder). --}}
                <div @touchstart.passive="touchStart($event)" @touchend.passive="touchEnd($event)" class="lg:h-full lg:min-h-0">
                    <div class="relative aspect-[4/3] w-full overflow-hidden bg-surface-hover lg:aspect-auto lg:h-full">
                        @if ($photos !== [])
                            @foreach ($photos as $photoIndex => $photo)
                                <img src="{{ $photo['url'] }}"
                                     alt="{{ $photo['alt'] }}"
                                     x-show="photo === {{ $photoIndex }}"
                                     loading="lazy"
                                     decoding="async"
                                     class="absolute inset-0 h-full w-full object-cover">
                            @endforeach
                        @else
                            <div 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 obra. Escríbenos por WhatsApp y te enviamos fotos reales.</span>
                                </div>
                            </div>
                        @endif

                        @if ($photoCount > 1)
                            <button type="button"
                                    @click="prevPhoto()"
                                    aria-label="Foto anterior"
                                    class="absolute left-4 top-1/2 z-10 inline-flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-none border border-line bg-surface/70 text-on-surface backdrop-blur-sm transition-colors duration-fast ease-out-soft hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                <x-icon name="chevron-left" :size="28" />
                            </button>

                            <button type="button"
                                    @click="nextPhoto()"
                                    aria-label="Foto siguiente"
                                    class="absolute right-4 top-1/2 z-10 inline-flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-none border border-line bg-surface/70 text-on-surface backdrop-blur-sm transition-colors duration-fast ease-out-soft hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                <x-icon name="chevron-right" :size="28" />
                            </button>

                            <div class="absolute inset-x-0 bottom-4 flex items-center justify-center gap-2">
                                @foreach ($photos as $photoIndex => $photo)
                                    <button type="button"
                                            @click="photo = {{ $photoIndex }}"
                                            aria-label="Foto {{ $photoIndex + 1 }}"
                                            :class="photo === {{ $photoIndex }} ? 'bg-accent-300' : 'bg-surface-hover'"
                                            class="h-2.5 w-2.5 rounded-none border border-line transition-colors duration-fast ease-out-soft"></button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Content half: title, stacked specs, single gold WhatsApp CTA. --}}
                <div class="flex flex-col lg:h-full lg:min-h-0 lg:overflow-y-auto">
                    <p class="font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text">Obra · Piedra natural</p>
                    <h3 class="mt-2 font-serif text-h2 font-normal uppercase leading-[0.95] text-on-surface">{{ $title }}</h3>

                    <dl class="mt-8 border-t border-line">
                        @if ($useLabel)
                            <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">Uso</dt>
                                <dd class="text-right font-sans text-body text-on-surface">{{ $useLabel }}</dd>
                            </div>
                        @endif

                        @if ($typeLabel)
                            <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">Tipo</dt>
                                <dd class="text-right font-sans text-body text-on-surface">{{ $typeLabel }}</dd>
                            </div>
                        @endif

                        @if ($location)
                            <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">Ubicación</dt>
                                <dd class="text-right font-sans text-body text-on-surface">{{ $location }}</dd>
                            </div>
                        @endif

                        @if ($year)
                            <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">Año</dt>
                                <dd class="text-right font-mono text-body text-on-surface">{{ $year }}</dd>
                            </div>
                        @endif

                        @if ($stones->isNotEmpty())
                            <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">Piedra utilizada</dt>
                                <dd class="text-right font-sans text-body text-on-surface">{{ $stones->pluck('name')->join(' · ') }}</dd>
                            </div>
                        @endif
                    </dl>

                    <div class="mt-auto pt-8">
                        <x-button :href="$whatsappUrl" variant="primary" size="lg" class="w-full min-h-12" target="_blank" rel="noopener noreferrer" data-track="whatsapp_click">
                            <x-whatsapp-icon :size="20" />
                            Quiero algo así
                        </x-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>