@php
    $industry = collect(config('brokam.industries'))->firstWhere('slug', $project->industry);
    $servicesAll = collect(config('brokam.services'));
@endphp

<x-layout :title="$project->title" :description="$project->summary">

    <x-page-hero :kicker="$industry['name'] ?? 'Case study'"
                 :title="$project->title"
                 :subtitle="$project->summary"
                 :image="$industry['image'] ?? null"
                 :crumbs="['Home' => route('home'), 'Projects' => route('projects.index'), $project->title => null]">
        <div class="mt-8 flex flex-wrap gap-x-8 gap-y-3 text-sm">
            @if ($project->client)<div><span class="text-slate-400 block text-xs uppercase tracking-wider">Client</span><span class="text-slate-ink font-medium">{{ $project->client }}</span></div>@endif
            @if ($project->location)<div><span class="text-slate-400 block text-xs uppercase tracking-wider">Location</span><span class="text-slate-ink font-medium">{{ $project->location }}</span></div>@endif
            @if ($project->year)<div><span class="text-slate-400 block text-xs uppercase tracking-wider">Year</span><span class="text-slate-ink font-medium">{{ $project->year }}</span></div>@endif
        </div>
    </x-page-hero>

    <section class="section">
        <div class="shell grid lg:grid-cols-[1.4fr_0.6fr] gap-14">
            <div class="prose-brokam">
                @foreach (preg_split('/\n\n+/', $project->body) as $para)
                    <p>{{ $para }}</p>
                @endforeach

                @if (!empty($project->outcomes))
                    <h2>Outcomes</h2>
                    <div class="not-prose grid sm:grid-cols-1 gap-3 mt-4">
                        @foreach ($project->outcomes as $outcome)
                            <div class="card p-5 flex items-start gap-3">
                                <x-icon name="check" class="w-5 h-5 text-brand-500 mt-0.5 shrink-0"/>
                                <span class="text-slate-700">{{ $outcome }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <aside class="space-y-6">
                @if (!empty($project->services))
                    <div class="card p-7">
                        <h3 class="font-semibold text-slate-ink mb-4">Services involved</h3>
                        <ul class="space-y-1">
                            @foreach ($project->services as $slug)
                                @php $svc = $servicesAll->firstWhere('slug', $slug); @endphp
                                @if ($svc)
                                    <li>
                                        <a href="{{ route('services.show', $svc['slug']) }}" class="flex items-center gap-3 py-2 text-sm text-slate-600 hover:text-brand-600 transition">
                                            <x-icon :name="$svc['icon']" class="w-5 h-5 text-brand-500"/> {{ $svc['title'] }}
                                        </a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="theme-dark card p-7 bg-night text-white">
                    <h3 class="font-semibold mb-2">A similar challenge?</h3>
                    <p class="text-white/70 text-sm leading-relaxed">Tell us what you need and we'll scope a complete, integrated solution.</p>
                    <a href="{{ route('quote') }}" class="btn btn-primary w-full mt-5 text-sm">Request a Quote</a>
                </div>
            </aside>
        </div>
    </section>

    @if ($more->isNotEmpty())
        <section class="section bg-paper-200">
            <div class="shell">
                <h2 class="text-2xl font-semibold tracking-tight mb-8">More projects</h2>
                <div class="grid md:grid-cols-3 gap-6">
                    @foreach ($more as $p)
                        <x-project-card :project="$p"/>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <x-cta-band/>
</x-layout>
