@extends('layouts.app')

@section('body_class', 'page-volunteer')

@section('content')
{{-- 1. HERO --}}
<section class="ihero vhero">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <svg class="ihero__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-users"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">Volunteer with us</p>
            <h1>A few hours can change <span class="hl">someone&rsquo;s day</span></h1>
            <p class="ihero__lead">Give your time and skills. Choose what suits you, work with people who care, and see the difference first hand.</p>
            <div class="ihero__btns">
                <a class="btn btn--white btn--lg" href="#form"><svg class="i" aria-hidden="true"><use href="#i-users"/></svg>Apply to volunteer</a>
                <a class="btn btn--glass btn--lg" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Or donate</a>
            </div>
        </div>
        <ul class="vhero__cards" aria-label="Ways to help">
            @foreach (array_slice($interests, 0, 4, true) as $key => $label)
                <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-check"/></svg></span>{{ $label }}</li>
            @endforeach
        </ul>
    </div>
</section>

{{-- 2. WHY VOLUNTEER --}}
<section class="section vwhy">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Why volunteer?</p>
            <h2>Give time, gain <span class="hl">purpose</span></h2>
        </header>
        <ul class="vwhy__grid">
            <li class="reveal"><span class="vwhy__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-users"/></svg></span><h3>Work with the community</h3><p>Help directly the people and places you want to support.</p></li>
            <li class="reveal"><span class="vwhy__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-grid"/></svg></span><h3>Choose what suits you</h3><p>Pick tasks that match your skills, interests and schedule.</p></li>
            <li class="reveal"><span class="vwhy__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-heart"/></svg></span><h3>No experience needed</h3><p>Just a willing heart. We guide you from your first day.</p></li>
            <li class="reveal"><span class="vwhy__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-leaf"/></svg></span><h3>Meet kind people</h3><p>Join others who care about the same things you do.</p></li>
        </ul>
    </div>
</section>

{{-- 3. HOW IT WORKS + FORM --}}
<section class="section section--soft vmain">
    <div class="container vmain__grid">
        <aside class="vsteps">
            <header class="vsteps__head">
                <p class="kicker">Simple to start</p>
                <h2>How it <span class="hl">works</span></h2>
            </header>
            <ol class="vsteps__list">
                <li><span class="vsteps__n">1</span><div><strong>Apply</strong><p>Tell us a little about yourself and when you are free.</p></div></li>
                <li><span class="vsteps__n">2</span><div><strong>We get in touch</strong><p>Our team calls or writes to understand how you would like to help.</p></div></li>
                <li><span class="vsteps__n">3</span><div><strong>Start helping</strong><p>Join an activity near you and see the difference you make.</p></div></li>
            </ol>
            <div class="vsteps__note">
                <svg class="i i--lg" aria-hidden="true"><use href="#i-shield"/></svg>
                <p>Your details are used only to contact you about volunteering.</p>
            </div>
        </aside>

        <form class="card form vform" id="form" action="{{ route('volunteer.store') }}" method="post" novalidate>
            @csrf
            <header class="cform__head">
                <span class="cform__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-users"/></svg></span>
                <div>
                    <h2>Tell us about yourself</h2>
                    <p>It takes about two minutes.</p>
                </div>
            </header>
            @include('partials.flash')
            <div class="hp" aria-hidden="true"><label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>

            <x-field name="name" label="Full name" required autocomplete="name" maxlength="100" />
            <div class="form__row">
                <x-field name="phone" label="Phone / WhatsApp" type="tel" required autocomplete="tel" inputmode="tel" />
                <x-field name="email" label="Email" type="email" required autocomplete="email" inputmode="email" />
            </div>
            <x-field name="city" label="City" autocomplete="address-level2" maxlength="100" />

            <fieldset class="field">
                <legend class="field__label">What would you like to help with? <span class="opt">(optional)</span></legend>
                <div class="checks checks--chips">
                    @foreach ($interests as $key => $label)
                        <label class="check">
                            <input type="checkbox" name="interests[]" value="{{ $key }}" @checked(in_array($key, old('interests', [])))>
                            <span>{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
            </fieldset>

            <fieldset class="field">
                <legend class="field__label">When are you free? <span class="opt">(optional)</span></legend>
                <div class="checks checks--chips">
                    @foreach ($availability as $key => $label)
                        <label class="check">
                            <input type="radio" name="availability" value="{{ $key }}" @checked(old('availability') === $key)>
                            <span>{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
            </fieldset>

            <x-field name="message" label="Anything else you would like us to know?" type="textarea" :rows="4" maxlength="2000" />

            <button class="btn btn--green btn--lg btn--block" type="submit">Submit application <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></button>
            <p class="cform__note"><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>We never share your details with anyone.</p>
        </form>
    </div>
</section>

{{-- 4. VOLUNTEER FAQs (Admin > FAQs, group "Volunteering") --}}
@if ($faqs->isNotEmpty())
<section class="section cfaq">
    <div class="container">
        <header class="section__row">
            <div>
                <p class="kicker">Before you apply</p>
                <h2>Common <span class="hl">questions</span></h2>
            </div>
            <a class="link-all" href="{{ route('faq') }}">All FAQs <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </header>
        <div class="cfaq__grid" data-faq-list>
            @foreach ($faqs as $faq)
                <details class="homefaq__item">
                    <summary><span class="homefaq__n" aria-hidden="true">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span><span class="homefaq__q">{{ $faq->question }}</span><span class="homefaq__tog" aria-hidden="true"><svg class="i"><use href="#i-chevron"/></svg></span></summary>
                    <p>{{ $faq->answer }}</p>
                </details>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection