@extends('layouts.app')

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

@section('content')

{{-- 1. SHOWCASE: photo slider --}}
@include('partials.hero-slider')

{{-- 2. EXPLORE CAUSES: category tiles and search filter the cards in place (resources/js/explore.js);
     without JavaScript the tiles open the category pages and the search opens the Campaigns page. --}}
<section class="section explore" id="causes" @if ($causes->isNotEmpty()) data-explore data-show="6" @endif>
    <div class="container">
        <header class="explore__head">
            <div>
                <h2 class="explore__title"><span class="explore__mark">Explore</span> Causes</h2>
                <p class="explore__sub">Pick a cause close to your heart and make a real difference.</p>
            </div>
            <a class="link-all" href="{{ route('causes') }}">View all <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </header>

        @include('partials.cause-search', ['live' => true, 'id' => 'home-search'])

        <nav class="tabs explore__tabs" aria-label="Cause categories">
            <a class="tab is-active" href="{{ route('causes') }}" data-filter="all" aria-current="true"><span class="tab__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-grid"/></svg></span>All</a>
            @foreach ($categories as $p)
                <a class="tab" href="{{ route('causes.category', $p) }}" data-filter="{{ $p->slug }}"><span class="tab__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-{{ $p->icon }}"/></svg></span>{{ $p->name }}</a>
            @endforeach
        </nav>

        @if ($causes->isNotEmpty())
            <p class="explore__status" data-explore-status aria-live="polite"></p>
            <ul class="cards cards--gifts" data-explore-list>
                @foreach ($causes as $i => $cause)
                    <li class="reveal" data-cat="{{ $cause->category->slug }}"
                        data-text="{{ \Illuminate\Support\Str::lower($cause->title.' '.$cause->summary.' '.$cause->category->name) }}"
                        @if ($i >= 6) hidden @endif>@include('partials.cause-card', ['cause' => $cause])</li>
                @endforeach
            </ul>
            <div class="explore__empty" data-explore-empty hidden>
                <span class="explore__empty-ico" aria-hidden="true"><svg class="i i--xl"><use href="#i-search"/></svg></span>
                <p><strong>No campaigns match your search.</strong> Try another word, or browse every campaign.</p>
            </div>
        @else
            <ul class="cards cards--causes">
                @foreach ($categories as $p)
                    <li class="reveal">
                        <a class="cause" href="{{ route('causes.category', $p) }}">
                            <span class="cause__icon"><svg class="i i--xl" aria-hidden="true"><use href="#i-{{ $p->icon }}"/></svg></span>
                            <h3>{{ $p->name }}</h3>
                            <p>{{ $p->summary }}</p>
                            <span class="cause__go">Learn more <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></span>
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
        <p class="center stack"><a class="btn btn--blue btn--lg" href="{{ route('causes') }}" data-explore-more><span data-explore-more-label>View all causes</span> <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a></p>
    </div>
</section>

{{-- 3. DONATE MONTHLY --}}
<section class="section">
    <div class="container">
        @if ($causes->isNotEmpty())
            <header class="monthly-all__head">
                <p class="kicker">Pick where it goes</p>
                <h2 class="explore__title">Choose a cause to <span class="explore__mark">support monthly</span></h2>
                <p class="explore__sub">Select an amount on any campaign to start your monthly gift in a click.</p>
            </header>
            <ul class="cards cards--gifts monthly-all" data-monthly-list>
                @foreach ($causes as $cause)
                    <li class="reveal">@include('partials.monthly-card', ['cause' => $cause])</li>
                @endforeach
            </ul>
            <div class="monthly-all__more" data-monthly-sentinel>
                <button class="btn btn--ghost btn--lg" type="button" data-monthly-more hidden>Show more campaigns <svg class="i" aria-hidden="true"><use href="#i-chevron"/></svg></button>
            </div>
        @endif
    </div>
</section>

{{-- 4. IMPACT: turning kindness into action --}}
@include('partials.stats', ['split' => true])

{{-- 5. HOW IT WORKS --}}
<section class="section section--soft how" id="how">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Small steps, large impact</p>
            <h2>How it <span class="hl">works</span></h2>
            <p>Three quick steps from intention to impact.</p>
        </header>
        <ol class="steps">
            <li class="step reveal">
                <span class="step__num" aria-hidden="true">01</span>
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-grid"/></svg></span>
                <h3>Choose how to help</h3>
                <p>Pick a cause or enter any amount you are comfortable with, one-time or monthly.</p>
            </li>
            <li class="step reveal">
                <span class="step__num" aria-hidden="true">02</span>
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-lock"/></svg></span>
                <h3>Give securely</h3>
                <p>Pay with UPI, card or net banking through a trusted, encrypted payment gateway.</p>
            </li>
            <li class="step reveal">
                <span class="step__num" aria-hidden="true">03</span>
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-heart"/></svg></span>
                <h3>See your impact</h3>
                <p>Get an instant receipt and follow the difference your gift makes through our updates.</p>
            </li>
        </ol>
        <p class="center stack"><a class="btn btn--green btn--lg" href="{{ route('donate') }}">Start giving <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a></p>
    </div>
</section>

{{-- 7. WHY CHOOSE US --}}
<section class="section">
    <div class="container why">
        <header class="why__head reveal">
            <p class="kicker">Reasons of assurance</p>
            <h2>Why <span class="hl">Parhit</span>?</h2>
            <p>The principles behind everything we do, from the first rupee you give to the last update we send.</p>
            <a class="btn btn--ghost" href="{{ route('about') }}">About us <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </header>
        <ul class="cards cards--values">
            @foreach (config('parhit.values') as [$icon, $title, $text])
                <li class="value reveal">
                    <span class="value__icon"><svg class="i i--lg" aria-hidden="true"><use href="#i-{{ $icon }}"/></svg></span>
                    <h3>{{ $title }}</h3>
                    <p>{{ $text }}</p>
                </li>
            @endforeach
        </ul>
    </div>
</section>

{{-- 8. TRUST & REGISTRATIONS --}}
@php
    $regs = array_filter([
        'Registration No.' => [$site('reg_number'), 'Registered organisation'],
        '80G' => [$site('reg_80g'), 'Tax benefit for donors'],
        '12A' => [$site('reg_12a'), 'Income tax exemption'],
        'PAN' => [$site('reg_pan'), 'Permanent account number'],
        'CSR-1' => [$site('reg_csr'), 'Ready for CSR funding'],
    ], fn ($r) => filled($r[0]));
@endphp
<section class="section section--blue trust-sec">
    <svg class="trust-sec__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-shield"/></svg>
    <div class="container trust">
        <div class="trust__copy">
            <p class="kicker kicker--light">Open books, open hearts</p>
            <h2>Why people <span class="hl">trust us</span></h2>
            <p>Giving works when it is built on trust. We keep our records open, our process simple and our promises clear.</p>
            <a class="btn btn--white" href="{{ route('transparency') }}">See our transparency page <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </div>
        <ul class="trust__list">
            <li class="reveal"><span class="trust__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-shield"/></svg></span><div><h3>Secure payments</h3><p>Handled by a trusted gateway. We never see or store your card details.</p></div></li>
            <li class="reveal"><span class="trust__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-eye"/></svg></span><div><h3>Open reporting</h3><p>Reports and registration details are published for anyone to read.</p></div></li>
            <li class="reveal"><span class="trust__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-camera"/></svg></span><div><h3>Real stories</h3><p>We share updates from the field so you can see the difference you make.</p></div></li>
        </ul>
    </div>
    @if ($regs)
        <div class="container trust-regs reveal">
            <p class="trust-regs__title"><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>Registered &amp; verified</p>
            <ul class="trust-regs__grid" aria-label="Registrations">
                @foreach ($regs as $label => [$value, $note])
                    <li class="trust-reg">
                        <span class="trust-reg__tick"><svg class="i" aria-hidden="true"><use href="#i-check"/></svg></span>
                        <span class="trust-reg__label">{{ $label }}</span>
                        <strong class="trust-reg__value">{{ $value }}</strong>
                        <small>{{ $note }}</small>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif
</section>


{{-- 9. DONOR REVIEWS (dynamic: Admin > Testimonials) --}}
@if ($testimonials->isNotEmpty())
<section class="section reviews" id="reviews">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Rated by our donors</p>
            <h2>What our donors <span class="hl">say</span></h2>
            <p>Honest words from the people who give, volunteer and partner with us.</p>
        </header>
        @include('partials.reviews', ['testimonials' => $testimonials])
    </div>
</section>
@endif

{{-- 10. VIDEO TESTIMONIALS (dynamic: Admin > Video testimonials) --}}
@if ($videoTestimonials->contains(fn ($v) => $v->video_id))
<section class="section section--soft vtest" id="video-stories">
    <div class="container">
        <header class="section__head">
            <p class="kicker">In their own words</p>
            <h2>Video <span class="hl">testimonials</span></h2>
            <p>Watch donors and volunteers share why they chose to give.</p>
        </header>
        @include('partials.video-testimonials', ['videoTestimonials' => $videoTestimonials])
    </div>
</section>
@endif

{{-- 11. FAQ (dynamic: Admin > FAQs, tick "Show on the home page") --}}
@if ($faqs->isNotEmpty())
<section class="section homefaq" id="faq-home">
    <div class="container homefaq__layout">
        <header class="homefaq__head reveal">
            <p class="kicker">Got questions?</p>
            <h2>Frequently asked <span class="hl">questions</span></h2>
            <p>Quick answers about donating, receipts, payments and volunteering.</p>
            <ul class="homefaq__chips" aria-label="Topics">
                <li><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>{{ $faqs->count() }} quick answers</li>
                <li><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>Safe payments</li>
                <li><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Tax receipts</li>
            </ul>
            <div class="homefaq__help">
                <span class="homefaq__help-ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-mail"/></svg></span>
                <div>
                    <strong>Still have a question?</strong>
                    <p>Write to us and we will get back to you.</p>
                </div>
                <a class="btn btn--blue" href="{{ route('contact') }}">Contact us</a>
            </div>
        </header>
        <div class="homefaq__list reveal" data-faq-list>
            <svg class="homefaq__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-info"/></svg>
            @foreach ($faqs as $faq)
                <details class="homefaq__item" @if ($loop->first) open @endif>
                    <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
            <p class="homefaq__all"><a class="link-all" href="{{ route('faq') }}">View all FAQs <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a></p>
        </div>
    </div>
</section>
@endif

@endsection