@extends('layouts.app')
@section('title', $service['eyebrow'].' | Saritha Aravinda')
@section('content')
<x-hero
    :eyebrow="$service['eyebrow']"
    :heading="$service['title']"
    :subheading="$service['intro']"
    :image-src="$service['hero_image']"
    :image-alt="$service['hero_alt']"
    cta="Start a Conversation"
    monochrome
    :show-location="false"
    padded-bottom
/>

<section class="section-space"><div class="shell grid gap-12 lg:grid-cols-12"><div class="lg:col-span-5" data-reveal><h2 class="display-2">{{ $service['section_title'] }}</h2></div><p class="body-lg lg:col-span-6 lg:col-start-7 lg:self-end">{{ $service['section_body'] }}</p></div></section>

<section class="section-space bg-grey-100"><div class="shell"><div class="max-w-3xl"><h2 class="display-2">{{ $service['guide_title'] }}</h2></div><div class="mt-16 grid gap-px bg-grey-200 sm:grid-cols-2 lg:grid-cols-3">@foreach($service['guides'] as $i => $guide)<x-focus-card :number="$i + 1" :title="$guide[0]" :description="$guide[1]" />@endforeach</div></div></section>

<section class="section-space"><div class="shell"><h2 class="display-2">{{ $service['people_title'] }}</h2><div class="mt-16 grid gap-px bg-grey-200 sm:grid-cols-2 lg:grid-cols-3">@foreach($service['people'] as $i => $person)<x-focus-card :number="$i + 1" :title="$person[0]" :description="$person[1]" />@endforeach</div></div></section>

<x-manifesto-block>{{ $service['closing_title'] }}<span class="mt-8 block font-sans text-xl not-italic leading-9 text-grey-600">{{ $service['closing'] }}</span></x-manifesto-block>

@if($service['testimonials'])
<section class="section-space overflow-hidden bg-ink text-warm-white">
    <div class="shell">
        <h2 class="display-2 max-w-5xl" data-reveal>{{ $service['testimonial_title'] }}</h2>

        <div class="mt-16 grid gap-4 md:grid-cols-3">
            @foreach($service['testimonials'] as $i => $testimonial)<x-testimonial-card :quote="$testimonial[0]" :name="$testimonial[1]" :number="$i + 1" variant="dark"/>@endforeach
        </div>
    </div>
</section>
@else
    <!-- TODO: client to provide testimonials; section remains hidden until approved copy is available. -->
@endif
@endsection