@extends('layouts.site')

@section('content')
{{-- 1. Hero --}}
<section class="on-dark relative overflow-hidden">
    <div class="wrap grid min-h-[calc(100svh-4rem)] items-center gap-6 py-14 lg:grid-cols-12 lg:py-10">
        <div class="relative z-10 lg:col-span-7">
            <p class="eyebrow">{{ $hero['eyebrow'] }}</p>
            <h1 class="display">{{ \App\Support\Text::accent($hero['headline']) }}</h1>
            <p class="lead mt-7">{{ $hero['sub'] }}</p>
            <div class="mt-10 flex flex-wrap gap-3">
                <a href="{{ route('start-project.show') }}" data-track="cta:start-project:hero" class="btn btn-primary">{{ $hero['cta'] ?? 'Start a Project' }} @include('partials.arrow')</a>
                <a href="#system" class="btn btn-ghost-dark">See how it fits together</a>
            </div>
        </div>
        <div class="lg:col-span-5">
            <div class="scene-host h-[22rem] sm:h-[30rem] lg:h-[36rem]" data-scene="hero">
                <div class="scene-fallback">@include('partials.core-fallback')</div>
            </div>
        </div>
    </div>
</section>

{{-- 2. Find your problem --}}
<section class="on-light section" id="problems">
    <div class="wrap">
        <div class="reveal max-w-3xl">
            <p class="eyebrow">Where it hurts</p>
            <h2 class="h2">{{ \App\Support\Text::accent('Which of these sounds like *you*?') }}</h2>
        </div>
        <div class="mt-12">
            @foreach ($problems as $p)
                @php($slug = collect($p['slugs'] ?? [])->first(fn ($s) => $services->has($s)))
                <a class="rule-row reveal group" href="{{ $slug ? route('services.show', $slug) : route('start-project.show', ['need' => $p['key']]) }}">
                    <span class="flex-1 font-display text-xl tracking-tight sm:text-3xl">{{ $p['label'] }}</span>
                    <span class="hidden max-w-[16rem] text-right text-muted sm:block">{{ $p['answer'] }}</span>
                    <span class="text-violet">@include('partials.arrow')</span>
                </a>
            @endforeach
        </div>
        <p class="mt-8 text-muted">None of these? <a class="text-violet underline underline-offset-4" href="{{ route('start-project.show') }}">Tell us in your own words.</a></p>
    </div>
</section>

{{-- 3. The system --}}
<section class="on-dark section" id="system" data-system>
    <div class="wrap">
        <div class="max-w-3xl reveal">
            <p class="eyebrow">{{ $system['eyebrow'] }}</p>
            <h2 class="h2">{{ \App\Support\Text::accent($system['headline']) }}</h2>
            <p class="lead mt-5">{{ $system['sub'] }}</p>
        </div>
        <div class="mt-12 grid gap-10 lg:grid-cols-12 lg:items-center">
            <div class="order-2 lg:order-1 lg:col-span-5">
                <p class="font-display text-sm tabular-nums text-lilac" data-counter aria-live="polite">00 / 07</p>
                <h3 class="h3 mt-3" data-title>{{ $system['core']['name'] }}</h3>
                <p class="mt-3 min-h-[6.5rem] text-steel" data-text>{{ $system['core']['text'] }}</p>
                <button type="button" class="btn btn-ghost-dark mt-4 !min-h-[2.5rem]" data-overview hidden>Back to overview</button>
                <ul class="mt-8" role="list">
                    @foreach ($system['parts'] as $i => $part)
                        <li><button type="button" class="part-btn" data-part="{{ $i }}" data-name="{{ $part['name'] }}" data-text="{{ $part['plain'] }}" aria-pressed="false"><span class="n">0{{ $i + 1 }}</span>{{ $part['name'] }}</button></li>
                    @endforeach
                </ul>
            </div>
            <div class="order-1 lg:order-2 lg:col-span-7">
                <div class="scene-host h-[24rem] sm:h-[32rem] lg:h-[38rem]" data-scene="system">
                    <div class="scene-fallback">@include('partials.core-fallback')</div>
                    <div class="scene-label" hidden></div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- 4. How a project works --}}
<section class="on-ice section" id="process">
    <div class="wrap">
        <div class="reveal max-w-3xl">
            <p class="eyebrow">Process</p>
            <h2 class="h2">{{ \App\Support\Text::accent($process['headline']) }}</h2>
        </div>
        <ol class="mt-14 grid gap-x-8 gap-y-10 md:grid-cols-5">
            @foreach ($process['steps'] as $i => $step)
                <li class="reveal border-t border-ink/20 pt-5">
                    <span class="font-display text-sm tabular-nums text-violet">0{{ $i + 1 }}</span>
                    <h3 class="h3 mt-2">{{ $step['name'] }}</h3>
                    <p class="mt-2 text-muted">{{ $step['text'] }}</p>
                </li>
            @endforeach
        </ol>
        <p class="reveal mt-14 max-w-2xl border-l-2 border-violet pl-5 font-serif text-2xl italic">{{ $process['portal'] }}</p>
    </div>
</section>

{{-- 5. Partners --}}
<section class="on-deep section">
    <div class="wrap grid gap-12 lg:grid-cols-12">
        <div class="reveal lg:col-span-6">
            <p class="eyebrow">{{ $partners['eyebrow'] }}</p>
            <h2 class="h2">{{ \App\Support\Text::accent($partners['headline']) }}</h2>
            <p class="lead mt-5">{{ $partners['sub'] }}</p>
            <a href="{{ route('partners') }}" class="btn btn-ghost-dark mt-9">About the programme @include('partials.arrow')</a>
        </div>
        <div class="lg:col-span-6">
            @foreach ($partners['tiers'] as $tier)
                <div class="rule-row reveal !items-start">
                    <span class="w-32 shrink-0 font-display text-lg">{{ $tier['name'] }}</span>
                    <span class="text-steel">{{ $tier['text'] }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>

<x-cta-band :headline="$cta['headline']" :sub="$cta['sub']" />
@endsection