@extends('layouts.app')

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

@section('content')
@php $statIcons = ['heart', 'users', 'utensils', 'book', 'leaf', 'gift']; @endphp

{{-- 1. HERO with the headline numbers --}}
<section class="ihero">
    <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-heart"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">Our impact so far</p>
            <h1>See the difference your <span class="hl">kindness</span> makes</h1>
            <p class="ihero__lead">Every number here started with one person deciding to help. Together, small gifts add up to meals served, children in school and families cared for.</p>
            <div class="ihero__btns">
                <a class="btn btn--white btn--lg" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Donate now</a>
                <a class="btn btn--glass btn--lg" href="{{ route('transparency') }}">See our reports <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
            </div>
        </div>

        @if (! empty($stats))
            <ul class="ihero__stats" aria-label="Our impact in numbers">
                @foreach ($stats as $i => $s)
                    <li class="istat">
                        <span class="istat__icon" aria-hidden="true"><svg class="i i--lg"><use href="#i-{{ $statIcons[$i % count($statIcons)] }}"/></svg></span>
                        <strong class="stat__num" data-count="{{ (int) $s['value'] }}" data-suffix="{{ $s['suffix'] ?? '' }}">{{ \App\Support\Fmt::indian($s['value']) }}{{ $s['suffix'] ?? '' }}</strong>
                        <span class="istat__label">{{ $s['label'] }}</span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</section>

{{-- 2. WHERE YOUR GIFT GOES --}}
<section class="section iwhere">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Ways we help</p>
            <h2>Where your gift <span class="hl">goes</span></h2>
            <p>The areas of life we work to improve, with every rupee tracked.</p>
        </header>
        <ul class="iwhere__grid">
            @foreach ($categories as $p)
                <li class="reveal">
                    <a class="iwhere__card" href="{{ route('causes.category', $p) }}">
                        <span class="iwhere__n" aria-hidden="true">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <span class="iwhere__ico"><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="iwhere__go">See how to help <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></span>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</section>

{{-- 3. HOW YOUR GIFT TRAVELS --}}
<section class="section section--soft iflow">
    <div class="container">
        <header class="section__head">
            <p class="kicker">From you to the field</p>
            <h2>How your gift <span class="hl">travels</span></h2>
        </header>
        <ol class="iflow__list">
            <li class="reveal"><span class="iflow__n">1</span><h3>You give</h3><p>Choose a cause and give securely by UPI, card or net banking.</p></li>
            <li class="reveal"><span class="iflow__n">2</span><h3>We act</h3><p>Your gift goes straight to the programme you chose, with care and records.</p></li>
            <li class="reveal"><span class="iflow__n">3</span><h3>You see it</h3><p>Get a receipt at once, and follow the difference through our stories.</p></li>
        </ol>
    </div>
</section>

{{-- 4. GALLERY --}}
@if ($gallery->isNotEmpty())
<section class="section">
    <div class="container">
        <header class="section__head">
            <p class="kicker">On the ground</p>
            <h2>Moments from the <span class="hl">field</span></h2>
        </header>
        @include('partials.gallery-grid', ['items' => $gallery])
        <p class="center stack"><a class="btn btn--ghost" href="{{ route('gallery') }}">See the full gallery</a></p>
    </div>
</section>
@endif

{{-- 5. DONOR REVIEWS --}}
@if ($testimonials->isNotEmpty())
<section class="section 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>
        </header>
        @include('partials.reviews', ['testimonials' => $testimonials])
    </div>
</section>
@endif

{{-- 6. STORIES --}}
@if ($stories->isNotEmpty())
<section class="section section--soft">
    <div class="container">
        <header class="section__row">
            <div>
                <p class="kicker">From the field</p>
                <h2>Latest <span class="hl">stories</span></h2>
            </div>
            <a class="link-all" href="{{ route('stories') }}">View all <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </header>
        <ul class="cards cards--stories stories-feature">
            @foreach ($stories as $story)
                <li class="reveal">@include('partials.story-card', ['story' => $story])</li>
            @endforeach
        </ul>
    </div>
</section>
@endif

{{-- 7. TRANSPARENCY --}}
<section class="section">
    <div class="container">
        <div class="itrust reveal">
            <svg class="itrust__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-shield"/></svg>
            <div class="itrust__copy">
                <p class="kicker kicker--light">Open books, open hearts</p>
                <h2>See how we use <span class="hl">funds</span></h2>
                <p>Our registration details and reports are published for anyone to read.</p>
            </div>
            <div class="itrust__btns">
                <a class="btn btn--white btn--lg" href="{{ route('transparency') }}">Transparency &amp; reports <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
                <a class="btn btn--glass btn--lg" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Donate</a>
            </div>
        </div>
    </div>
</section>
@endsection