<x-layouts.app :title="$content['title'].' — TrafficPumper Earn'">
<main class="container py-4 py-lg-5 tp-legal-document">
    <div class="row justify-content-center"><article class="col-12 col-lg-10 col-xl-9">
        <a href="{{ route('earn.register') }}" class="d-inline-block mb-3">← {{ __('earn_legal.back') }}</a>
        <header class="mb-4"><p class="text-primary fw-semibold mb-2">TRAFFICPUMPER EARN</p><h1 class="display-6">{{ $content['title'] }}</h1><div class="alert alert-warning"><strong>{{ __('earn_legal.draft') }}</strong><br>{{ __('earn_legal.version') }}: {{ $version }} · {{ __('earn_legal.effective_date') }}: {{ $effectiveDate }}</div><p class="lead">{{ $content['intro'] }}</p></header>
        <nav class="card mb-4" aria-label="{{ __('earn_legal.contents') }}"><div class="card-body"><h2 class="h5">{{ __('earn_legal.contents') }}</h2><ol class="row g-2 mb-0">@foreach($content['sections'] as $id => $section)<li class="col-12 col-md-6"><a href="#{{ $id }}">{{ $section['title'] }}</a></li>@endforeach</ol></div></nav>
        @foreach($content['sections'] as $id => $section)<section id="{{ $id }}" class="tp-legal-section py-3 border-bottom" tabindex="-1"><h2 class="h4"><a class="text-reset text-decoration-none" href="#{{ $id }}">{{ $section['title'] }}</a></h2>@foreach($section['paragraphs'] as $paragraph)<p>{{ $paragraph }}</p>@endforeach</section>@endforeach
        <p class="mt-4 text-body-secondary">{{ __('earn_legal.review_notice') }}</p>
    </article></div>
</main>
</x-layouts.app>
