@extends('layouts.app')

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

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

{{-- 1. HERO --}}
<section class="ihero ahero">
    <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">About us</p>
            <h1>About <span class="hl">{{ seo()->orgName() }}</span></h1>
            <p class="ihero__lead">{{ $site('tagline', 'For the welfare of others') }}. We turn the kindness of donors and volunteers into practical help for people, animals and nature.</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</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 class="ahero__card">
            <p class="ahero__word">Parhit <span>परहित</span></p>
            <p class="ahero__mean">&ldquo;For the welfare of others&rdquo;</p>
            <p class="ahero__text">The name is our promise: every gift, every hour of time and every decision should be for the good of someone else.</p>
            <ul class="ahero__pts">
                <li><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>Open books</li>
                <li><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Dignity first</li>
                <li><svg class="i" aria-hidden="true"><use href="#i-users"/></svg>Community led</li>
            </ul>
        </div>
    </div>
</section>

{{-- 2. STORY + AT A GLANCE --}}
<section class="section astory">
    <div class="container astory__grid">
        <article class="astory__card reveal">
            <p class="kicker">Our story</p>
            <h2>Where it all <span class="hl">began</span></h2>
            <p class="astory__text">{{ $site('about_story') }}</p>
        </article>
        @if (! empty($stats))
            <ul class="astory__stats" aria-label="At a glance">
                @foreach (array_slice($stats, 0, 4) as $i => $s)
                    <li class="reveal">
                        <span class="astory__ico" 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>{{ $s['label'] }}</span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</section>

{{-- 3. VISION + MISSION --}}
<section class="section section--soft avm">
    <div class="container avm__grid">
        <article class="avm__card avm__card--vision reveal">
            <span class="avm__ico"><svg class="i i--xl" aria-hidden="true"><use href="#i-eye"/></svg></span>
            <p class="avm__tag">Our vision</p>
            <p class="avm__text">{{ $site('about_vision') }}</p>
        </article>
        <article class="avm__card avm__card--mission reveal">
            <span class="avm__ico"><svg class="i i--xl" aria-hidden="true"><use href="#i-heart"/></svg></span>
            <p class="avm__tag">Our mission</p>
            <p class="avm__text">{{ $site('about_mission') }}</p>
        </article>
    </div>
</section>

{{-- 4. VALUES --}}
<section class="section">
    <div class="container why">
        <header class="why__head reveal">
            <p class="kicker">What we stand for</p>
            <h2>Our <span class="hl">values</span></h2>
            <p>The principles behind everything we do, from the first rupee you give to the last update we send.</p>
        </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>

{{-- 5. TEAM (Admin > Team) --}}
@if ($team->isNotEmpty())
<section class="section section--soft ateam">
    <div class="container">
        <header class="section__head">
            <p class="kicker">The people behind Parhit</p>
            <h2>Meet our <span class="hl">team</span></h2>
        </header>
        <ul class="ateam__grid">
            @foreach ($team as $m)
                <li class="amember reveal">
                    <span class="amember__photo">
                        @if ($m->thumb_url)
                            <img src="{{ $m->thumb_url }}" alt="{{ $m->name }}" width="240" height="240" loading="lazy">
                        @else
                            <span class="amember__ph" aria-hidden="true">{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($m->name, 0, 1)) }}</span>
                        @endif
                    </span>
                    <h3>{{ $m->name }}</h3>
                    <p class="amember__role">{{ $m->role }}</p>
                    @if ($m->bio)<p class="amember__bio">{{ $m->bio }}</p>@endif
                </li>
            @endforeach
        </ul>
    </div>
</section>
@endif

{{-- 6. JOIN US --}}
<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-heart"/></svg>
            <div class="itrust__copy">
                <p class="kicker kicker--light">Join the movement</p>
                <h2>Join us in doing <span class="hl">good</span></h2>
                <p>Give, volunteer or partner with us. Together we can reach more people.</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</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