@extends('layouts.app')

@push('json-ld')
    <x-json-ld type="breadcrumbs" :data="['items' => [
                    ['label' => 'Inicio', 'url' => route('home')],
                    ['label' => 'Galería', 'url' => route('projects.index')],
                    ['label' => $project->title, 'url' => null],
    ]] " />
@endpush

@section('content')
    @php
        $beforeImage = $project->media->firstWhere('collection', 'before')?->url;
        $afterImage = $project->media->firstWhere('collection', 'after')?->url;
        $galleryMedia = $project->media->whereNotIn('collection', ['before', 'after'])->values();

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

        if ($lightboxImages === []) {
            $lightboxImages = [['url' => $project->image, 'alt' => $project->title]];
        }

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

        // Use + type merge into ONE classification line (they used to repeat
        // across the eyebrow and the meta line). Location + year stay in meta.
        $classification = collect([$project->useLabel(), $project->typeLabel()])->filter()->join(' · ');

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

        // Full-bleed obra band shows the gallery photos after the cover.
        $bandMedia = $galleryMedia->slice(1)->take(3);
        if ($bandMedia->isEmpty()) {
            $bandMedia = $galleryMedia->take(3);
        }
    @endphp

    {{-- The whole obra is one article: its hero, data panel, photos and
         before/after, with a single H1 and per-photo figures. --}}
    <article aria-labelledby="obra-heading">
    {{-- Compact dark header: breadcrumbs, classification, H1 and meta in one
         short band so the work photos are visible without scrolling. --}}
    <section data-section="project-hero"
             data-tone="dark"
             class="relative overflow-hidden bg-surface py-8 text-on-surface lg:py-10">
        <x-container>
            <div data-animate data-animate-type="up">
                <x-breadcrumbs class="mb-4" :items="[
                    ['label' => 'Inicio', 'url' => route('home')],
                    ['label' => 'Galería', 'url' => route('projects.index')],
                    ['label' => $project->title, 'url' => null],
                ]" />

                <p class="font-sans text-sm font-bold uppercase tracking-[0.22em] text-accent-300">
                    Obra {{ $classification }} · Piedra natural
                </p>

                <h1 id="obra-heading"
                    class="mt-3 font-serif text-h1 font-normal uppercase leading-[1.05] text-cream">
                    {{ $project->title }}
                </h1>

                @if ($metaLine !== '')
                    <p class="mt-3 max-w-3xl font-sans text-base leading-relaxed text-cream/85">
                        {{ $metaLine }}
                    </p>
                @endif
            </div>
        </x-container>
    </section>

    {{-- Detail: sticky data panel next to the photo gallery. --}}
    <x-section data-section="project-detail" tone="light" aria-labelledby="obra-detail-heading">
        <x-container>
            <h2 id="obra-detail-heading" class="sr-only">Ficha y fotos de la obra</h2>
            <div class="grid gap-12 lg:grid-cols-12 lg:gap-16">
                <aside class="lg:col-span-4" data-animate data-animate-type="up">
                    <div class="lg:sticky lg:top-[calc(var(--header-height)+1.5rem)] border border-line bg-surface-raised shadow-soft">
                        <div class="border-b border-line px-6 py-4">
                            <p class="font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text">Ficha de obra</p>
                        </div>

                        <dl class="divide-y divide-line">
                            @if ($project->location)
                                <div class="flex items-baseline justify-between gap-4 px-6 py-4">
                                    <dt class="font-sans text-xs uppercase tracking-[0.14em] text-on-surface-muted">Ubicación</dt>
                                    <dd class="text-right font-sans text-sm text-on-surface">{{ $project->location }}</dd>
                                </div>
                            @endif

                            @if ($project->useLabel())
                                <div class="flex items-baseline justify-between gap-4 px-6 py-4">
                                    <dt class="font-sans text-xs uppercase tracking-[0.14em] text-on-surface-muted">Uso</dt>
                                    <dd class="text-right font-sans text-sm text-on-surface">{{ $project->useLabel() }}</dd>
                                </div>
                            @endif

                            <div class="flex items-baseline justify-between gap-4 px-6 py-4">
                                <dt class="font-sans text-xs uppercase tracking-[0.14em] text-on-surface-muted">Tipo</dt>
                                <dd class="text-right font-sans text-sm text-on-surface">{{ $project->typeLabel() }}</dd>
                            </div>

                            @if ($year)
                                <div class="flex items-baseline justify-between gap-4 px-6 py-4">
                                    <dt class="font-sans text-xs uppercase tracking-[0.14em] text-on-surface-muted">Año</dt>
                                    <dd class="text-right font-mono text-sm text-on-surface">{{ $year }}</dd>
                                </div>
                            @endif
                        </dl>

                        @if ($project->products->isNotEmpty())
                            <div class="border-t border-line px-6 py-5">
                                <p class="font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text">Piedra utilizada</p>
                                <ul class="mt-4 space-y-3">
                                    @foreach ($project->products as $stone)
                                        <li>
                                            <a href="{{ route('products.show', $stone) }}"
                                               class="group inline-flex items-center gap-2 font-sans text-sm text-on-surface transition-colors duration-fast ease-out-soft hover:text-accent-text focus-visible:text-accent-text">
                                                <span class="border-b border-line pb-0.5 transition-colors duration-fast ease-out-soft group-hover:border-accent-text">{{ $stone->name }}</span>
                                                <x-icon name="arrow-up-right" :size="14" class="opacity-0 transition-opacity duration-fast ease-out-soft group-hover:opacity-100" />
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>

                                <button type="button"
                                        data-order-add-project
                                        data-project-slug="{{ $project->slug }}"
                                        x-data
                                        x-on:click="$dispatch('order:add-from-project', { slug: '{{ $project->slug }}' })"
                                        class="mt-5 inline-flex w-full items-center justify-center gap-2 border border-accent-300 bg-accent-300/10 px-4 py-3 font-sans text-xs font-bold uppercase tracking-[0.16em] text-accent-text transition-colors duration-base ease-out-soft hover:bg-accent-300/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                    <x-icon name="sparkles" :size="14" aria-hidden="true" />
                                    Armar pedido con estas piedras
                                </button>
                            </div>
                        @endif
                    </div>
                </aside>

                <div class="lg:col-span-8">
                    @if ($project->description)
                        <p class="max-w-2xl font-sans text-base leading-relaxed text-on-surface-muted"
                           data-animate data-animate-type="up">
                            {{ $project->description }}
                        </p>
                    @endif

                    <x-lightbox :images="$lightboxImages" :label="'Galería de '.$project->title">
                        <div data-project-media data-animate-group class="mt-10 grid gap-4 sm:grid-cols-2">
                            @forelse ($galleryMedia as $media)
                                <figure class="m-0">
                                    <button type="button"
                                            data-lightbox-item
                                            data-lightbox-index="{{ $loop->index }}"
                                            aria-label="Ampliar imagen de {{ $project->title }}"
                                            data-image-reveal
                                            class="group relative block w-full cursor-zoom-in overflow-hidden border border-line bg-surface-raised shadow-soft focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                        <div class="w-full transition-transform duration-slower ease-out-soft group-hover:scale-[1.04]">
                                            <x-image
                                                :src="$media->url"
                                                :webp="$media->webp_url"
                                                :alt="$media->alt_text ?? $project->title"
                                                :width="$media->width ?: 1200"
                                                :height="$media->height ?: 900"
                                                wrapper-class="aspect-[4/3] w-full"
                                            />
                                        </div>
                                    </button>
                                    <figcaption class="mt-2 font-sans text-xs uppercase tracking-[0.14em] text-on-surface-muted">
                                        {{ $media->alt_text ?? $project->title }}
                                    </figcaption>
                                </figure>
                            @empty
                                {{-- Missing-media resilience (A9): an obra without
                                     photos degrades to the neutral placeholder and
                                     keeps the figure/lightbox contract intact. --}}
                                <figure class="m-0">
                                    <button type="button"
                                            data-lightbox-item
                                            data-lightbox-index="0"
                                            aria-label="Ampliar imagen de {{ $project->title }}"
                                            data-image-reveal
                                            class="group relative block w-full cursor-zoom-in overflow-hidden border border-line bg-surface-raised shadow-soft focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                        <div class="w-full">
                                            <x-image
                                                :src="$project->image"
                                                :alt="'Obra '.$project->title.' en piedra laja'"
                                                :width="1200"
                                                :height="900"
                                                wrapper-class="aspect-[4/3] w-full"
                                            />
                                        </div>
                                    </button>
                                    <figcaption class="mt-2 font-sans text-xs uppercase tracking-[0.14em] text-on-surface-muted">
                                        {{ $project->title }}
                                    </figcaption>
                                </figure>
                            @endforelse
                        </div>
                    </x-lightbox>
                </div>
            </div>
        </x-container>
    </x-section>

    {{-- Full-bleed photo band for the gallery/obra. --}}
    @if ($bandMedia->isNotEmpty())
        <section data-section="project-obra"
                 data-tone="alt"
                 class="overflow-hidden bg-surface text-on-surface">
            <x-container class="pt-section">
                <x-section-heading
                    eyebrow="En obra"
                    title="La galería"
                    data-animate
                    data-animate-type="up"
                />
            </x-container>

            <div class="mt-10 grid grid-cols-1 sm:grid-cols-3">
                @foreach ($bandMedia as $media)
                    <div class="relative aspect-[16/11] overflow-hidden">
                        <div data-parallax data-parallax-strength="6" class="absolute inset-0">
                            <img src="{{ $media->url }}"
                                 alt="{{ $media->alt_text ?? $project->title }}"
                                 width="1200"
                                 height="800"
                                 loading="lazy"
                                 decoding="async"
                                 class="h-full w-full scale-125 object-cover">
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Before/after comparison, when the project carries the media pair. --}}
    @if ($beforeImage && $afterImage)
        <x-section data-section="project-before-after" tone="light">
            <x-container>
                <x-section-heading
                    eyebrow="Antes y después"
                    title="La transformación"
                    data-animate
                    data-animate-type="up"
                />
                <x-before-after
                    :before="$beforeImage"
                    :after="$afterImage"
                    label="Antes y después — {{ $project->title }}"
                    class="mt-10"
                />
            </x-container>
        </x-section>
    @endif

    {{-- Closing CTA to the catalog and the projects listing. --}}
    <x-section data-section="project-cta" tone="alt">
        <x-container>
            <div class="flex flex-col items-start justify-between gap-8 border border-line bg-surface-raised p-8 shadow-soft md:flex-row md:items-center md:p-12">
                <div class="max-w-xl">
                    <p class="font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text"
                       data-animate data-animate-type="up">
                        ¿Inspirado?
                    </p>
                    <h2 class="mt-3 font-serif text-h2 font-normal uppercase leading-[0.95] text-on-surface"
                        data-animate data-animate-type="up">
                        Lleva la piedra natural a tu proyecto
                    </h2>
                </div>

                <div class="flex flex-wrap gap-4" data-animate data-animate-type="up">
                    <x-button href="{{ route('products.index') }}" variant="primary" size="lg" data-magnetic>
                        Ver colecciones
                        <x-icon name="arrow-right" :size="16" />
                    </x-button>
                    <x-button href="{{ route('projects.index') }}" variant="secondary" size="lg">
                        Más obras
                    </x-button>
                </div>
            </div>
        </x-container>
    </x-section>
    </article>
@endsection