{{--
    Project / case study detail (PRD §10.3, §11). Breadcrumbs, header with card facts, sticky in-page section
    navigation (sidebar ≥1024px, anchor bar below), sections, Related Projects, Previous/Next, Back to Projects.
--}}
@php
    $organisation = \App\Domain\Portfolio\Support\OrganisationPresenter::name($project);
    $logo = \App\Domain\Portfolio\Support\OrganisationPresenter::logo($project);
    $thumbnail = $project->getFirstMedia(\App\Domain\Media\MediaCollection::Thumbnail->value);
@endphp
<x-layouts.site :seo="$seo" :sticky-contact="true" :preview="$preview">
    <div data-module="case-study" data-case-study="{{ $project->slug }}">
        <div class="container-site pt-6">
            <x-breadcrumbs :trail="$breadcrumbs" />
        </div>

        <header class="container-site grid gap-10 pb-8 pt-6 lg:grid-cols-12 lg:pt-10">
            <div class="lg:col-span-7">
                <div class="mb-4 flex flex-wrap gap-2">
                    @foreach ($project->categories as $category)<x-tag>{{ $category->name }}</x-tag>@endforeach
                </div>
                <h1 class="text-h1">{{ $project->title }}</h1>
                @if ($project->summary)<p class="mt-5 max-w-[var(--container-prose)] text-lead text-muted">{{ $project->summary }}</p>@endif
                <dl class="mt-8 grid gap-4 sm:grid-cols-3">
                    @if ($project->role)
                        <div><dt class="text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.role_label') }}</dt><dd class="mt-1 font-medium">{{ $project->role }}</dd></div>
                    @endif
                    @if ($organisation)
                        <div><dt class="text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.organisation_label') }}</dt>
                            <dd class="mt-1 flex items-center gap-2 font-medium">
                                @if ($logo)<x-media.image :media="$logo" :alt="$organisation" conversion="thumb" sizes="32px" class="size-8 object-contain" />@endif
                                {{ $organisation }}
                            </dd></div>
                    @endif
                    @if ($project->timeline_label)
                        <div><dt class="text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.timeline_label') }}</dt><dd class="mt-1 font-medium">{{ $project->timeline_label }}</dd></div>
                    @endif
                </dl>
                @if ($project->tools->isNotEmpty())
                    <ul class="mt-6 flex flex-wrap gap-2" aria-label="{{ __('portfolio.ui.tools') }}">
                        @foreach ($project->tools as $tool)<li><x-tag>{{ $tool->name }}</x-tag></li>@endforeach
                    </ul>
                @endif
            </div>
            @if ($thumbnail)
                <div class="lg:col-span-5">
                    <x-media.image :media="$thumbnail" conversion="hero" :priority="true" sizes="(min-width: 1024px) 40vw, 100vw" class="w-full rounded-[var(--radius-card)] object-cover" />
                </div>
            @endif
        </header>

        @if ($sectionNav !== [])
            {{-- Mobile anchor bar: scrolls within itself; the page never scrolls horizontally. --}}
            <nav aria-label="{{ __('portfolio.ui.on_this_page') }}" class="sticky top-16 z-30 border-y border-line bg-header/95 lg:hidden">
                <ul class="container-site flex gap-1 overflow-x-auto py-1">
                    @foreach ($sectionNav as $item)
                        <li class="shrink-0"><a href="#{{ $item['anchor'] }}" class="inline-flex min-h-11 items-center rounded-md px-3 text-sm font-medium text-ink no-underline hover:bg-surface">{{ $item['label'] }}</a></li>
                    @endforeach
                </ul>
            </nav>
        @endif

        <div class="container-site grid gap-10 lg:grid-cols-12">
            @if ($sectionNav !== [])
                <nav aria-label="{{ __('portfolio.ui.on_this_page') }}" class="hidden lg:col-span-3 lg:block">
                    <div class="sticky top-24 py-8">
                        <p class="text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.on_this_page') }}</p>
                        <ul class="mt-3 space-y-1 border-l border-line">
                            @foreach ($sectionNav as $item)
                                <li><a href="#{{ $item['anchor'] }}" class="-ml-px block border-l-2 border-transparent py-1.5 pl-4 text-sm text-muted no-underline hover:border-accent hover:text-ink">{{ $item['label'] }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                </nav>
            @endif
            <div @class(['min-w-0', 'lg:col-span-9' => $sectionNav !== [], 'lg:col-span-12 max-w-4xl' => $sectionNav === []])>
                @include('partials.blocks', ['blocks' => $blocks, 'location' => 'case_study', 'allowHeroH1' => false])
            </div>
        </div>

        @if ($related->isNotEmpty())
            <section class="section-y bg-surface" aria-labelledby="related-projects">
                <div class="container-site">
                    <h2 id="related-projects" class="mb-8 text-h2">{{ __('portfolio.ui.related_projects') }}</h2>
                    <div class="grid-cards">
                        @foreach ($related as $item)<x-project-card :project="$item" source="related" />@endforeach
                    </div>
                </div>
            </section>
        @endif

        <nav aria-label="{{ __('portfolio.ui.projects') }}" class="container-site flex flex-col gap-4 border-t border-line py-10 md:flex-row md:items-center md:justify-between">
            <x-button :href="route('projects.index')" variant="tertiary"><x-icon name="heroicon-o-arrow-left" class="size-4" />{{ __('portfolio.ui.back_to_projects') }}</x-button>
            <div class="flex flex-wrap gap-3">
                @if ($adjacent['previous'])
                    <x-button :href="route('projects.show', $adjacent['previous']->slug)" variant="secondary" rel="prev">
                        <span class="sr-only">{{ __('portfolio.ui.previous_project') }}:</span><x-icon name="heroicon-o-chevron-left" class="size-4" />{{ $adjacent['previous']->title }}
                    </x-button>
                @endif
                @if ($adjacent['next'])
                    <x-button :href="route('projects.show', $adjacent['next']->slug)" variant="secondary" rel="next">
                        <span class="sr-only">{{ __('portfolio.ui.next_project') }}:</span>{{ $adjacent['next']->title }}<x-icon name="heroicon-o-chevron-right" class="size-4" />
                    </x-button>
                @endif
            </div>
        </nav>
    </div>
</x-layouts.site>