@extends('layouts.app')
@section('title', __('meta.home_title'))
@section('description', __('meta.home'))
@push('jsonld')
@include('partials.event-jsonld')
<script type="application/ld+json">{!! json_encode(['@context' => 'https://schema.org', '@type' => 'FAQPage', 'mainEntity' => $faqs->map(fn ($f) => ['@type' => 'Question', 'name' => $f->question, 'acceptedAnswer' => ['@type' => 'Answer', 'text' => strip_tags($f->answer)]])->values()], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush
@section('content')
<section class="hero" aria-label="{{ __('Featured') }}">
 <div class="slide"><div class="wrap"><span class="tag">#{{ __('RunWithAPurpose') }}</span><span class="tag">12 {{ __('Sept') }} 2027</span><h1>{{ __('Run with the wildlife of the Serengeti') }}</h1><p>{{ __('hero.1') }}</p><div class="cta-row"><a class="btn btn--gold" href="{{ lroute('register') }}">{{ __('Register now') }}</a><a class="btn btn--ghost" href="{{ lroute('event') }}" style="color:#fff">{{ __('Event in summary') }}</a></div></div></div>
 <div class="slide"><div class="wrap"><span class="tag">#YourRunYourConservationSupport</span><h1>{{ __('Your run. Your conservation support.') }}</h1><p>{{ __('hero.2') }}</p><div class="cta-row"><a class="btn btn--gold" href="{{ lroute('register') }}">{{ __('Register now') }}</a><a class="btn btn--ghost" href="{{ lroute('about') }}" style="color:#fff">{{ __('Background') }}</a></div></div></div>
 <div class="slide"><div class="wrap"><span class="tag">#SupportSerengetiAntiPoachingCampaign</span><span class="tag">#SupportRangersWhoProtectSerengeti</span><h1>{{ __('Support the rangers who protect the Serengeti') }}</h1><p>{{ __('hero.3') }}</p><div class="cta-row"><a class="btn btn--gold" href="{{ lroute('donate') }}">{{ __('Donate') }}</a><a class="btn btn--ghost" href="{{ lroute('travel') }}" style="color:#fff">{{ __('Travel packages') }}</a></div></div></div>
</section>

<section class="sec"><div class="wrap grid g2" style="align-items:center">
 <div class="prose"><h2>{{ __('A charity race on the edge of the Serengeti') }}</h2>
  <p>{{ __('home.intro1') }}</p><p>{{ __('home.intro2') }}</p>
  <p><a class="btn" href="{{ lroute('about') }}">{{ __('Read our story') }}</a></p></div>
 <div class="card"><h3>{{ __('Race day at a glance') }}</h3><ul class="ul-clean"><li><strong>{{ __('Date') }}:</strong> Sunday 12 September 2027</li><li><strong>{{ __('Venue') }}:</strong> Fort Ikoma, Serengeti, Tanzania</li><li><strong>{{ __('Start / Finish') }}:</strong> Fort Ikoma</li>@foreach($categories as $c)<li><strong>{{ $c->start_label }}</strong> - {{ $c->name }}</li>@endforeach</ul></div>
</div></section>

<section class="sec sec--alt"><div class="wrap"><h2 class="center">{{ __('Choose your distance') }}</h2><div class="grid g3">
 @foreach($categories as $c)<article class="card"><span class="badge">{{ $c->distance_km }} km</span><h3 style="margin-top:12px">{{ $c->name }}</h3><p>{{ $c->description }}</p><p class="mut">{{ __('Start') }}: {{ $c->start_label }}</p><a class="btn btn--sm" href="{{ lroute('register') }}">{{ __('Register now') }}</a></article>@endforeach
</div></div></section>

<section class="sec"><div class="wrap"><h2 class="center">{{ __('How it works') }}</h2><div class="grid g4">
 <div class="card"><div class="kpi">1</div><h3>{{ __('Register') }}</h3><p>{{ __('how.1') }}</p></div>
 <div class="card"><div class="kpi">2</div><h3>{{ __('Choose a package') }}</h3><p>{{ __('how.2') }}</p></div>
 <div class="card"><div class="kpi">3</div><h3>{{ __('Pay securely') }}</h3><p>{{ __('how.3') }}</p></div>
 <div class="card"><div class="kpi">4</div><h3>{{ __('Run for the Serengeti') }}</h3><p>{{ __('how.4') }}</p></div>
</div></div></section>

<section class="sec sec--alt"><div class="wrap grid g2" style="align-items:center">
 <div><h2>{{ __('Where your entry fee goes') }}</h2><p>{{ __('home.impact') }}</p><ul class="ul-clean"><li>Torches, rain jackets, jungle boots, first-aid kits</li><li>GPS units, backpacks, uniforms and radios</li><li>Patrol vehicles, motorcycles and ranger training</li><li>Village Game Scouts tackling human-wildlife conflict</li></ul><p><a class="btn btn--gold" href="{{ lroute('donate') }}">{{ __('Donate') }}</a></p></div>
 <div class="card card--hl"><h3>{{ __('Safari + marathon') }}</h3><p>{{ __('home.travel') }}</p><p><a class="btn" href="{{ lroute('travel') }}">{{ __('See travel packages') }}</a></p></div>
</div></section>

<section class="sec"><div class="wrap"><div style="display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:12px"><h2>{{ __('From the Serengeti: latest articles') }}</h2><a href="{{ lroute('articles') }}">{{ __('All articles') }} &rarr;</a></div>
 <div class="grid g3">@foreach($articles as $a)@include('articles.card', ['a' => $a])@endforeach</div></div></section>

<section class="sec sec--alt"><div class="wrap prose"><h2>{{ __('Frequently asked questions') }}</h2>
 @foreach($faqs as $f)<details class="faq"><summary>{{ $f->question }}</summary><div>{!! $f->answer !!}</div></details>@endforeach
 <p><a href="{{ lroute('faq') }}">{{ __('See all FAQs') }} &rarr;</a></p></div></section>

<section class="sec"><div class="wrap center"><h2>{{ __('Our sponsors & partners') }}</h2>
 <div class="logos">@forelse($sponsors as $s)<a href="{{ $s->url ?: '#' }}" rel="noopener sponsored" @if($s->url) target="_blank" @endif>@if($s->logo)<img src="{{ $s->logo }}" alt="{{ $s->name }}" height="48" loading="lazy">@else{{ $s->name }}@endif</a>@empty<span>{{ __('Become a sponsor - contact us') }}</span>@endforelse</div>
 <p style="margin-top:24px"><a class="btn btn--ghost" href="{{ lroute('contact') }}">{{ __('Partner with us') }}</a></p></div></section>
@endsection