@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-16"><div class="wrap max-w-4xl">
    <p class="eyebrow">{{ $partners['eyebrow'] }}</p>
    <h1 class="display">{{ \App\Support\Text::accent($partners['headline']) }}</h1>
    <p class="lead mt-6">{{ $partners['sub'] }}</p>
    <a href="{{ route('partners.apply') }}" class="btn btn-primary mt-9">Apply to become a partner @include('partials.arrow')</a>
</div></section>

<section class="on-light section !py-16"><div class="wrap grid gap-12 lg:grid-cols-12">
    <h2 class="h2 !text-3xl sm:!text-4xl lg:col-span-4">How it works</h2>
    <div class="lg:col-span-8">
        @foreach ($partners['tiers'] as $tier)
            <div class="rule-row reveal !items-start"><span class="w-36 shrink-0 font-display text-xl">{{ $tier['name'] }}</span><span class="text-muted">{{ $tier['text'] }}</span></div>
        @endforeach
    </div>
</div></section>

<section class="on-ice section !py-16"><div class="wrap grid gap-10 md:grid-cols-3">
    @foreach ([['You keep the client', 'Your client works with your name on the front. We stay behind the delivery.'], ['You see everything', 'A partner portal shows every order, its stage and what you have earned.'], ['You get paid on completion', 'Commission is calculated by a rule we agree with you, recorded when the order completes, and paid out on a schedule.']] as [$t, $d])
        <div class="reveal"><h3 class="h3">{{ $t }}</h3><p class="mt-2 text-muted">{{ $d }}</p></div>
    @endforeach
</div></section>

@if ($logos->isNotEmpty())
<section class="on-light section !py-14"><div class="wrap"><p class="eyebrow">Partners</p>
    <ul class="flex flex-wrap items-center gap-x-12 gap-y-6">@foreach ($logos as $l)<li>@if ($l->logo_path)<img class="h-10 w-auto opacity-80" src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($l->logo_path) }}" alt="{{ $l->name }}" loading="lazy">@else<span class="font-display text-lg">{{ $l->name }}</span>@endif</li>@endforeach</ul>
</div></section>
@endif

@if ($faqs->isNotEmpty())
<section class="on-light section !py-14"><div class="wrap max-w-3xl"><h2 class="h2 !text-3xl">Questions</h2>
    @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 group-open:rotate-45" aria-hidden="true">+</span></summary><p class="mt-3 text-muted">{{ $f->answer }}</p></details>@endforeach
</div></section>
@endif
<x-cta-band headline="Ready to bring us your *first client*?" sub="Tell us about your business and the kind of projects you see. We review every application and reply by email." label="Apply to become a partner" />
@endsection