@extends('layouts.site')

@section('content')
@if ($preview)<div class="bg-violet px-5 py-2 text-center text-sm text-white">Preview. This page is not published.</div>@endif
<section class="on-dark section !pb-16">
    <div class="wrap max-w-4xl">
        <p class="eyebrow"><a href="{{ route('work.index') }}" class="hover:text-lilac">Work</a></p>
        <h1 class="display !text-5xl sm:!text-6xl">{{ $case->title }}</h1>
        <dl class="mt-8 flex flex-wrap gap-x-10 gap-y-3 text-steel">
            <div><dt class="text-xs uppercase tracking-widest">Client</dt><dd class="text-ice">{{ $case->client_name }}</dd></div>
            @if ($case->industry)<div><dt class="text-xs uppercase tracking-widest">Industry</dt><dd class="text-ice">{{ $case->industry }}</dd></div>@endif
            @if ($case->timeline)<div><dt class="text-xs uppercase tracking-widest">Timeline</dt><dd class="text-ice">{{ $case->timeline }}</dd></div>@endif
        </dl>
    </div>
</section>

<section class="on-light section !py-16">
    <div class="wrap grid gap-12 lg:grid-cols-12">
        <div class="lg:col-span-8">
            @foreach (['challenge' => 'The challenge', 'solution' => 'What we built', 'technology' => 'Technology'] as $field => $title)
                @if ($case->$field)<h2 class="h3 mt-10 first:mt-0">{{ $title }}</h2><p class="prose-site mt-3 whitespace-pre-line text-lg">{{ $case->$field }}</p>@endif
            @endforeach
        </div>
        <aside class="lg:col-span-4">
            @if (!empty($case->results))
                <h2 class="eyebrow">Results</h2>
                @foreach ($case->results as $r)
                    <div class="border-t border-ink/15 py-4"><p class="font-display text-4xl tracking-tight text-violet">{{ $r['value'] }}</p><p class="text-muted">{{ $r['label'] }}</p></div>
                @endforeach
            @endif
            @if ($case->services->isNotEmpty())
                <h2 class="eyebrow mt-8">Services used</h2>
                <ul class="space-y-1">@foreach ($case->services as $s)<li><a class="text-violet underline underline-offset-4" href="{{ route('services.show', $s->slug) }}">{{ $s->name }}</a></li>@endforeach</ul>
            @endif
        </aside>
    </div>
</section>
<x-blocks :owner="$case" />
<x-cta-band />
@endsection