@extends('layouts.app')

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

@section('content')
{{-- HERO --}}
<section class="ihero shero">
    <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-camera"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">On the ground</p>
            <h1>Photo <span class="hl">gallery</span></h1>
            <p class="ihero__lead">Moments from our work and the people behind it.</p>
        </div>
        <ul class="shero__chips" aria-label="About the gallery">
            @if ($items->isNotEmpty())
                <li><strong>{{ $items->count() }}</strong><span>{{ \Illuminate\Support\Str::plural('Photo', $items->count()) }}</span></li>
            @endif
            <li><svg class="i" aria-hidden="true"><use href="#i-camera"/></svg><span>Real moments, real people</span></li>
            <li><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg><span>Shared with care</span></li>
        </ul>
    </div>
</section>

<section class="section gpage">
    <div class="container">
        @if ($items->isEmpty())
            <div class="gempty reveal">
                <span class="gempty__ico" aria-hidden="true"><svg class="i i--xl"><use href="#i-camera"/></svg></span>
                <h2>Photos are on the way</h2>
                <p>We are putting together moments from our work. Meanwhile, read how your kindness is making a difference.</p>
                <div class="gempty__btns">
                    <a class="btn btn--green btn--lg" href="{{ route('stories') }}">Read our stories <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
                    <a class="btn btn--ghost btn--lg" href="{{ route('impact') }}">See our impact</a>
                </div>
            </div>
        @else
            @include('partials.gallery-grid', ['items' => $items])
        @endif
    </div>
</section>

<section class="section section--flush gpage__cta">
    <div class="container">
        <div class="itrust reveal">
            <svg class="itrust__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-camera"/></svg>
            <div class="itrust__copy">
                <p class="kicker kicker--light">Help us capture more</p>
                <h2>Be part of the next <span class="hl">photo</span></h2>
                <p>Give, volunteer or partner with us. Every hand makes the load lighter.</p>
            </div>
            <div class="itrust__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('volunteer') }}"><svg class="i" aria-hidden="true"><use href="#i-users"/></svg>Volunteer</a>
            </div>
        </div>
    </div>
</section>
@endsection