<x-layouts.app :title="__('earn.meta_title')">
    <main class="tp-earn">
        <section class="tp-earn-hero">
            <div class="container">
                <div class="tp-earn-hero-copy">
                    <span class="tp-landing-eyebrow">{{ __('earn.eyebrow') }}</span>
                    <h1>{{ __('earn.hero_title') }}</h1>
                    <p>{{ __('earn.hero_description') }}</p>
                    <div class="tp-landing-actions"><a class="btn btn-primary btn-lg" href="#availability">{{ __('earn.early_access') }}</a><a class="btn btn-outline-secondary btn-lg" href="#how-it-works">{{ __('earn.how_link') }}</a></div>
                    <span class="tp-coming-soon">{{ __('earn.coming_soon') }}</span>
                </div>
                <div class="tp-device-scene" aria-label="{{ __('earn.device_illustration') }}">
                    <div class="tp-device tp-device-desktop"><span></span><div><i></i><i></i><i></i><strong>{{ __('earn.measurement_session') }}</strong></div></div>
                    <div class="tp-device tp-device-mobile"><span></span><div><i></i><i></i><strong>{{ __('earn.verified_task') }}</strong></div></div>
                </div>
            </div>
        </section>

        <section class="tp-earn-rate" aria-labelledby="rate-title"><div class="container"><div><span>{{ __('earn.rate_label') }}</span><h2 id="rate-title">{{ number_format($tasksPerUsd, 0, ',', '.') }} {{ __('earn.tasks') }} = 1 USD</h2><p>{{ __('earn.rate_explanation') }}</p></div><dl><div><dt>{{ __('earn.minimum_payout') }}</dt><dd>{{ $minimumPayoutUsd }} USD</dd></div><div><dt>{{ __('earn.required_total') }}</dt><dd>{{ number_format($minimumPayoutTasks, 0, ',', '.') }} {{ __('earn.tasks') }}</dd></div></dl></div></section>

        <section class="tp-landing-section" id="how-it-works" aria-labelledby="process-title"><div class="container"><div class="tp-section-heading"><span>{{ __('earn.process_eyebrow') }}</span><h2 id="process-title">{{ __('earn.process_title') }}</h2></div><ol class="tp-earn-process">@foreach(range(1,6) as $step)<li><span>{{ $step }}</span><div><h3>{{ __('earn.steps.'.$step.'.title', ['tasks' => number_format($tasksPerUsd, 0, ',', '.'), 'usd' => $minimumPayoutUsd]) }}</h3><p>{{ __('earn.steps.'.$step.'.description') }}</p></div></li>@endforeach</ol></div></section>

        <section class="tp-landing-section tp-earn-calculation" aria-labelledby="calculation-title"><div class="container"><div class="tp-section-heading"><span>{{ __('earn.calculation_eyebrow') }}</span><h2 id="calculation-title">{{ __('earn.calculation_title') }}</h2><p>{{ __('earn.calculation_description') }}</p></div><div class="tp-calculation-grid">@foreach([1,10,$minimumPayoutUsd] as $usd)<article @class(['tp-calculation-card','tp-payout-card'=>$usd===$minimumPayoutUsd])><strong>{{ number_format($tasksPerUsd * $usd, 0, ',', '.') }}</strong><span>{{ __('earn.tasks') }}</span><i aria-hidden="true">→</i><b>{{ $usd }} USD</b>@if($usd===$minimumPayoutUsd)<small>{{ __('earn.payout_eligible') }}</small>@endif</article>@endforeach</div><ul class="tp-earn-disclosures"><li>{{ __('earn.only_verified') }}</li><li>{{ __('earn.availability_not_guaranteed') }}</li><li>{{ __('earn.no_fixed_income') }}</li></ul></div></section>

        <section class="tp-landing-section tp-earn-safety" aria-labelledby="safety-title"><div class="container"><div class="tp-section-heading"><span>{{ __('earn.safety_eyebrow') }}</span><h2 id="safety-title">{{ __('earn.safety_title') }}</h2><p>{{ __('earn.safety_description') }}</p></div><ul class="tp-safety-grid">@foreach(range(1,11) as $item)<li><span aria-hidden="true">✓</span>{{ __('earn.safety.'.$item) }}</li>@endforeach</ul></div></section>

        <section class="tp-landing-cta" id="availability"><div class="container"><div><h2>{{ __('earn.cta_title') }}</h2><p>{{ __('earn.cta_description') }}</p></div><span class="tp-coming-soon tp-coming-soon-light">{{ __('earn.coming_soon') }}</span></div></section>
    </main>
</x-layouts.app>
