@extends('layouts.site')
@section('content')
<section class="sec">
    <div class="wrap stack" style="gap:24px">
        <nav class="xs muted" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a> / <a href="{{ route('services.index') }}">Services</a> / {{ $service->title }}</nav>
        <div class="split" style="align-items:end">
            <h1 class="d1">{{ $service->title }}</h1>
            <div class="stack" style="gap:20px">
                <p class="lead">{{ $service->summary }}</p>
                <div class="row" style="gap:12px">
                    <a href="{{ route('contact', ['service' => $service->title]) }}" class="btn" data-track="cta_service">Get a quote <span aria-hidden="true">→</span></a>
                    @if($service->starting_price)<span class="small"><span class="muted">Starting at</span> <span class="b">{{ $service->starting_price }}</span></span>@endif
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sec tint">
    <div class="wrap split">
        <div class="prose">{!! $service->body !!}</div>
        @if($service->deliverables)
        <div class="box stack" style="gap:16px">
            <h2 class="d4">What’s included</h2>
            <ul class="stack" style="gap:10px;padding-left:20px">@foreach($service->deliverables as $d)<li>{{ $d }}</li>@endforeach</ul>
        </div>
        @endif
    </div>
</section>
@if($work->isNotEmpty())
<section class="sec">
    <div class="wrap stack" style="gap:40px"><h2 class="d2">Related work</h2><div class="grid g2">@foreach($work as $item)@include('partials.work-card')@endforeach</div></div>
</section>
@endif
@if($service->faqs)
<section class="sec @if($work->isEmpty()) @else tint @endif">
    <div class="wrap split"><div class="stack" style="gap:16px"><span class="eyebrow">FAQ</span><h2 class="d2">{{ $service->title }}: common questions</h2></div>@include('partials.faq', ['faqs' => $service->faqs])</div>
</section>
@endif
<section class="sec">
    <div class="wrap stack" style="gap:32px">
        <h2 class="d3">Other services</h2>
        <ul class="idx">@foreach($others as $s)<li><a href="{{ route('services.show', $s) }}"><span class="t">{{ $s->title }}</span><span class="d muted">{{ $s->summary }}</span><span class="arrow" aria-hidden="true">→</span></a></li>@endforeach</ul>
    </div>
</section>
@include('partials.cta-band')
@endsection