@extends('layouts.app')
@section('content')
<section class="hero"><div class="shell hero-grid"><div><div class="eyebrow">Real people. Stronger communities.</div><h1>A little thank-you goes a long way.</h1><p class="lead">Our community stewards help visitors park safely, carry groceries and feel welcome at Leaping Frog.</p><div class="rule"></div><div class="actions"><a class="button" href="#thank">SEND A THANK-YOU</a><a class="button alt" href="{{ route('stewards') }}">MEET THE TEAM</a></div></div><div class="visual"><form class="payment-card" id="thank" method="POST" action="{{ route('contribute') }}">@csrf<h3>Choose a thank-you amount</h3><div class="amounts">@foreach([500=>'R5',1000=>'R10',1500=>'R15',2000=>'R20'] as $cents=>$label)<label class="amount"><input type="radio" name="amount" value="{{ $cents }}" @checked($loop->first) style="display:none">{{ $label }}</label>@endforeach</div><input class="field" name="message" placeholder="Leave a message (optional)"><input class="field" name="display_name" placeholder="Your name or initials (optional)"><button class="button" style="width:100%;margin-top:12px" type="submit">CONTINUE TO PAYMENT →</button></form></div></div></section>
<section class="section"><div class="shell"><div class="eyebrow">Community in action</div><h2>Every visit can leave a mark.</h2><p class="section-intro">Your appreciation helps recognise the people who keep Leaping Frog safe, welcoming and moving.</p><div class="grid3"><div class="card"><div class="stat">R{{ number_format($monthlyTotal / 100, 0) }}</div><div class="person">Contributed this month</div><p class="section-intro">Every confirmed Ikhokha payment is counted here.</p></div><div class="card"><div class="eyebrow">Thank-you Wall</div><p class="quote">“The steward helped me carry my groceries to the car. Such a kind and professional person.”</p><div class="person">A grateful visitor</div></div><div class="card"><div class="eyebrow">Meet the team</div><p class="quote">The people who turn a parking space into a warmer welcome.</p><a class="button alt" href="{{ route('stewards') }}">VIEW STEWARDS →</a></div></div></div></section>
<section class="section"><div class="shell"><div class="eyebrow">Recent gratitude</div><h2>Thank-you Wall</h2><div class="grid3">@forelse($messages as $message)<div class="card"><p class="quote">“{{ $message->message }}”</p><div class="person">{{ $message->display_name ?: 'A grateful visitor' }}</div></div>@empty<div class="card"><p class="section-intro">The first messages will appear here after moderation.</p></div>@endforelse</div><p style="margin-top:30px"><a class="button alt" href="{{ route('wall') }}">READ ALL MESSAGES →</a></p></div></section>
@endsection
<script>document.addEventListener('click',e=>{if(e.target.closest('.amount')){document.querySelectorAll('.amount').forEach(x=>x.classList.remove('active'));e.target.closest('.amount').classList.add('active')}});document.querySelector('.amount')?.classList.add('active')</script>