@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('services.index') }}" class="hover:text-lilac">Services</a></p>
        <h1 class="display">{{ $service->name }}</h1>
        <p class="lead mt-6">{{ $service->summary }}</p>
        <a href="{{ route('start-project.show') }}" class="btn btn-primary mt-9">Start a Project @include('partials.arrow')</a>
    </div>
</section>

@if (!empty($service->examples))
<section class="on-light section !py-16">
    <div class="wrap grid gap-8 lg:grid-cols-12">
        <h2 class="h2 !text-3xl sm:!text-4xl lg:col-span-4">What it can do</h2>
        <ul class="lg:col-span-8">
            @foreach ($service->examples as $ex)
                <li class="rule-row reveal"><span class="font-display text-sm tabular-nums text-violet">0{{ $loop->iteration }}</span><span class="flex-1 text-lg">{{ is_array($ex) ? ($ex['example'] ?? '') : $ex }}</span></li>
            @endforeach
        </ul>
    </div>
</section>
@endif

@if (!empty($service->how_it_works))
<section class="on-ice section !py-16">
    <div class="wrap">
        <h2 class="h2 !text-3xl sm:!text-4xl">How it works</h2>
        <ol class="mt-10 grid gap-8 md:grid-cols-4">
            @foreach ($service->how_it_works as $step)
                <li class="reveal border-t border-ink/20 pt-5">
                    <span class="font-display text-sm tabular-nums text-violet">0{{ $loop->iteration }}</span>
                    <h3 class="h3 mt-2">{{ $step['title'] }}</h3>
                    <p class="mt-2 text-muted">{{ $step['text'] }}</p>
                </li>
            @endforeach
        </ol>
    </div>
</section>
@endif

@if ($service->good_fit || $service->not_yet)
<section class="on-light section !py-16">
    <div class="wrap grid gap-12 md:grid-cols-2">
        @if ($service->good_fit)
            <div><h2 class="h3 text-violet">A good fit if</h2><p class="mt-3 text-lg">{{ $service->good_fit }}</p></div>
        @endif
        @if ($service->not_yet)
            <div><h2 class="h3 text-muted">Probably not yet if</h2><p class="mt-3 text-lg text-muted">{{ $service->not_yet }}</p></div>
        @endif
    </div>
</section>
@endif

@if ($cases->isNotEmpty())
<section class="on-ice section !py-16">
    <div class="wrap">
        <h2 class="h2 !text-3xl sm:!text-4xl">Related work</h2>
        <div class="mt-8">
            @foreach ($cases as $c)
                <a href="{{ route('work.show', $c->slug) }}" class="rule-row"><span class="flex-1 font-display text-xl">{{ $c->title }}</span><span class="text-muted">{{ $c->client_name }}</span></a>
            @endforeach
        </div>
    </div>
</section>
@endif

@if ($faqs->isNotEmpty())
<section class="on-light section !py-16">
    <div class="wrap max-w-3xl">
        <h2 class="h2 !text-3xl sm:!text-4xl">Questions</h2>
        <div class="mt-8">
            @foreach ($faqs as $f)
                <details class="group border-t border-ink/15 py-4 last:border-b">
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-display text-lg">{{ $f->question }}<span class="text-violet transition-transform group-open:rotate-45" aria-hidden="true">+</span></summary>
                    <p class="mt-3 text-muted">{{ $f->answer }}</p>
                </details>
            @endforeach
        </div>
    </div>
</section>
@endif

@if ($related->isNotEmpty())
<section class="on-ice section !py-12">
    <div class="wrap">
        <p class="eyebrow">Often paired with</p>
        <div class="flex flex-wrap gap-3">
            @foreach ($related as $r)<a class="btn btn-ghost-light !min-h-[2.5rem]" href="{{ route('services.show', $r->slug) }}">{{ $r->name }}</a>@endforeach
        </div>
    </div>
</section>
@endif

<x-cta-band :sub="'Describe what you need. We will tell you if '.strtolower($service->name).' is the right place to start.'" />
@endsection