@extends('layouts.app')

@section('content')
@php
    $q = $q ?? '';
    $heroStats = $heroStats ?? null;
    $heroIcon = $current ? $current->icon : 'grid';
    $heroTitle = $current ? $current->name : ($q !== '' ? 'Search results' : 'Campaigns that matter');
    $heroLead = $current ? $current->summary : 'Choose a cause close to your heart and make a difference today.';
@endphp

<section class="chero chero--{{ $heroIcon }}">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <div class="container">
        <div class="chero__grid">
            <div class="chero__main">
                <div class="chero__row">
                    <span class="chero__icon" aria-hidden="true"><svg class="i i--xl"><use href="#i-{{ $heroIcon }}"/></svg></span>
                    <div class="chero__copy">
                        <p class="kicker kicker--light">{{ $current ? 'Cause' : 'Our campaigns' }}</p>
                        <h1>{{ $heroTitle }}</h1>
                        <p class="chero__lead">{{ $heroLead }}</p>
                        @if ($current && $current->intro)
                            <p class="chero__intro">{{ $current->intro }}</p>
                        @endif
                    </div>
                </div>

                @if ($heroStats)
                    <ul class="chero__stats" aria-label="Summary">
                        <li><strong>{{ $heroStats['campaigns'] }}</strong><span>{{ \Illuminate\Support\Str::plural('Campaign', $heroStats['campaigns']) }}</span></li>
                        @if ($heroStats['supporters'] > 0)
                            <li><strong>{{ \App\Support\Fmt::indian($heroStats['supporters']) }}</strong><span>Supporters</span></li>
                        @endif
                        @if ($heroStats['raised'] > 0)
                            <li><strong>{{ \App\Support\Fmt::rupees($heroStats['raised']) }}</strong><span>Raised so far</span></li>
                        @endif
                        @if ($site('reg_80g'))
                            <li><strong>80G</strong><span>Tax benefits</span></li>
                        @endif
                    </ul>
                @endif

                <div class="causes-search chero__search">
                    @include('partials.cause-search', ['q' => $q, 'id' => 'causes-search'])
                </div>

                <p class="chero__trust">
                    <span><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>Secure payments</span>
                    <span><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>Instant receipt</span>
                    <span><svg class="i" aria-hidden="true"><use href="#i-eye"/></svg>Open reporting</span>
                </p>
            </div>

            <div class="chero__visual" aria-hidden="true">
                <div class="chero__ring chero__ring--outer"></div>
                <div class="chero__ring chero__ring--inner"></div>
                <span class="chero__core"><svg class="i"><use href="#i-{{ $heroIcon }}"/></svg></span>
                @foreach ($categories->take(6) as $c)
                    <span class="chero__sat chero__sat--{{ $loop->iteration }} @if ($current && $current->is($c)) is-current @endif"><svg class="i"><use href="#i-{{ $c->icon }}"/></svg></span>
                @endforeach
                <span class="chero__float chero__float--1"><svg class="i"><use href="#i-heart"/></svg>Every gift counts</span>
                <span class="chero__float chero__float--2"><svg class="i"><use href="#i-check"/></svg>100% secure</span>
            </div>
        </div>
    </div>
</section>

<div class="container cperks-wrap">
    <ul class="cperks" aria-label="Why give with us">
        <li><span class="cperks__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-lock"/></svg></span><div><strong>Secure payments</strong><small>UPI, card and net banking</small></div></li>
        <li><span class="cperks__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-download"/></svg></span><div><strong>Instant receipt</strong><small>Sent to your email at once</small></div></li>
        <li><span class="cperks__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-eye"/></svg></span><div><strong>Open reporting</strong><small>See where your gift goes</small></div></li>
    </ul>
</div>

<section class="section section--tight cpage">
    <div class="container">
        @if ($q !== '')
            <p class="search-note" role="status">
                {{ $causes->total() }} {{ \Illuminate\Support\Str::plural('campaign', $causes->total()) }} found for &ldquo;{{ $q }}&rdquo;
                &middot; <a href="{{ route('causes') }}">Clear search</a>
            </p>
        @endif

        <nav class="filters cfilters" aria-label="Filter causes by category">
            <ul>
                <li><a href="{{ route('causes') }}" @class(['filter', 'is-active' => ! $current && $q === '']) @if (! $current && $q === '') aria-current="page" @endif><svg class="i" aria-hidden="true"><use href="#i-grid"/></svg>All causes</a></li>
                @foreach ($categories as $c)
                    <li><a href="{{ route('causes.category', $c) }}" @class(['filter', 'is-active' => $current && $current->is($c)]) @if ($current && $current->is($c)) aria-current="page" @endif><svg class="i" aria-hidden="true"><use href="#i-{{ $c->icon }}"/></svg>{{ $c->name }}</a></li>
                @endforeach
            </ul>
        </nav>

        @if ($causes->isEmpty())
            <div class="empty">
                @if ($q !== '')
                    <p>No campaigns match &ldquo;{{ $q }}&rdquo;. Try another word, <a href="{{ route('causes') }}">browse every campaign</a>, or <a href="{{ route('donate') }}">give where it is needed most</a>.</p>
                @else
                    <p>No causes are listed here yet. Please check back soon, or <a href="{{ route('donate') }}">make a general donation</a>.</p>
                @endif
            </div>
        @else
            <ul class="cards cards--gifts">
                @foreach ($causes as $cause)
                    <li class="reveal">@include('partials.cause-card', ['cause' => $cause])</li>
                @endforeach
            </ul>
            {{ $causes->links() }}
        @endif
    </div>
</section>


@php $otherCategories = $current ? $categories->reject(fn ($c) => $c->is($current)) : collect(); @endphp
@if ($otherCategories->isNotEmpty())
<section class="section section--soft cothers">
    <div class="container">
        <header class="section__head">
            <p class="kicker">More ways to help</p>
            <h2>Explore other <span class="hl">causes</span></h2>
        </header>
        <ul class="cothers__grid">
            @foreach ($otherCategories as $c)
                <li class="reveal">
                    <a class="cother" href="{{ route('causes.category', $c) }}">
                        <span class="cother__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-{{ $c->icon }}"/></svg></span>
                        <span class="cother__txt"><strong>{{ $c->name }}</strong><small>{{ $c->summary }}</small></span>
                        <span class="cother__go" aria-hidden="true"><svg class="i"><use href="#i-arrow"/></svg></span>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</section>
@endif
@endsection