@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-16">
    <div class="wrap max-w-4xl">
        <p class="eyebrow">Services</p>
        <h1 class="display">{{ \App\Support\Text::accent('What we *build*.') }}</h1>
        <p class="lead mt-6">Six areas of work, one team. Most projects touch more than one, and we build them to work as a single system.</p>
    </div>
</section>

@foreach ($areas as $area)
    <section class="{{ $loop->even ? 'on-ice' : 'on-light' }} section !py-16" id="{{ $area['key'] }}">
        <div class="wrap grid gap-8 lg:grid-cols-12">
            <div class="lg:col-span-4">
                <h2 class="h2 !text-3xl sm:!text-4xl">{{ $area['name'] }}</h2>
                <p class="mt-3 text-muted">{{ $area['text'] }}</p>
            </div>
            <div class="lg:col-span-8">
                @forelse ($area['services'] as $s)
                    <a href="{{ route('services.show', $s->slug) }}" class="rule-row group">
                        <span class="w-56 shrink-0 font-display text-xl tracking-tight">{{ $s->name }}@if ($s->is_key) <span class="chip ml-2 align-middle text-violet">Core service</span>@endif</span>
                        <span class="flex-1 text-muted">{{ $s->summary }}</span>
                        <span class="text-violet">@include('partials.arrow')</span>
                    </a>
                @empty
                    <p class="text-muted">Pages for this area are being written.</p>
                @endforelse
            </div>
        </div>
    </section>
@endforeach

<x-cta-band headline="Not sure which one you *need*?" sub="Start with the problem. We will tell you which of these fits, or that none of them do." />
@endsection