@extends('layouts.app')

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

@section('content')
{{-- 1. HERO --}}
<section class="ihero chero">
    <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-shield"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">Transparency &amp; reports</p>
            <h1>Every gift, <span class="hl">open</span> to see</h1>
            <p class="ihero__lead">Donors deserve to know who we are and how gifts are used. Our registrations, commitments and reports are published here for anyone to check.</p>
            <div class="ihero__btns">
                <a class="btn btn--white btn--lg" href="#registrations"><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>See registrations</a>
                <a class="btn btn--glass btn--lg" href="#reports"><svg class="i" aria-hidden="true"><use href="#i-book"/></svg>Read our reports</a>
            </div>
        </div>
        <ul class="vhero__cards" aria-label="What we publish">
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-shield"/></svg></span>Registered &amp; verified</li>
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-check"/></svg></span>80G &amp; 12A tax benefit</li>
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-mail"/></svg></span>Receipt for every gift</li>
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-book"/></svg></span>Published reports</li>
        </ul>
    </div>
</section>

{{-- 2. REGISTRATION DETAILS --}}
<section class="section section--soft" id="registrations">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Official details</p>
            <h2>Registration &amp; <span class="hl">tax</span> details</h2>
            <p>Use these to verify us with the relevant authority.</p>
        </header>
        <dl class="tp-regs">
            @foreach ([
                ['Registered name', seo()->orgName(), 'i-home'],
                ['Registration number', $site('reg_number'), 'i-book'],
                ['80G (tax benefit for donors)', $site('reg_80g'), 'i-heart'],
                ['12A (income tax exemption)', $site('reg_12a'), 'i-shield'],
                ['PAN', $site('reg_pan'), 'i-user'],
                ['CSR-1 registration', $site('reg_csr'), 'i-bag'],
            ] as [$label, $value, $icon])
                <div class="tp-reg reveal">
                    <span class="tp-reg__ico" aria-hidden="true"><svg class="i"><use href="#{{ $icon }}"/></svg></span>
                    <div>
                        <dt>{{ $label }}</dt>
                        <dd>{!! $value ? e($value) : '<span class="muted">To be published</span>' !!}</dd>
                    </div>
                </div>
            @endforeach
        </dl>
    </div>
</section>

{{-- 3. COMMITMENTS --}}
<section class="section">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Our promise</p>
            <h2>What we <span class="hl">commit</span> to</h2>
        </header>
        <ul class="steps tp-commit">
            <li class="step reveal">
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-mail"/></svg></span>
                <h3>A receipt for every gift</h3>
                <p>You get an instant receipt for every donation.</p>
            </li>
            <li class="step reveal">
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-lock"/></svg></span>
                <h3>Your details stay private</h3>
                <p>We never sell or share your personal details.</p>
            </li>
            <li class="step reveal">
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-eye"/></svg></span>
                <h3>Open reporting</h3>
                <p>We publish our reports and registration details here.</p>
            </li>
            <li class="step reveal">
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-info"/></svg></span>
                <h3>Straight answers</h3>
                <p>We answer questions about how your gift is used.</p>
            </li>
        </ul>
    </div>
</section>

{{-- 3b. JOURNEY OF A GIFT --}}
<section class="section section--soft">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Follow your gift</p>
            <h2>The journey of <span class="hl">your gift</span></h2>
            <p>From the moment you give to the moment it makes a difference.</p>
        </header>
        <ol class="tp-journey">
            <li class="reveal"><span class="tp-journey__dot" aria-hidden="true"><svg class="i"><use href="#i-heart"/></svg></span><h3>You give</h3><p>Choose a cause and pay securely through our payment gateway.</p></li>
            <li class="reveal"><span class="tp-journey__dot" aria-hidden="true"><svg class="i"><use href="#i-mail"/></svg></span><h3>You get a receipt</h3><p>An instant receipt with the details you need for your records.</p></li>
            <li class="reveal"><span class="tp-journey__dot" aria-hidden="true"><svg class="i"><use href="#i-users"/></svg></span><h3>Our team delivers</h3><p>We work directly with the people and communities who need help.</p></li>
            <li class="reveal"><span class="tp-journey__dot" aria-hidden="true"><svg class="i"><use href="#i-camera"/></svg></span><h3>You see the proof</h3><p>Photos, stories and reports show what your gift achieved.</p></li>
        </ol>
    </div>
</section>

{{-- 4. REPORTS & DOCUMENTS --}}
<section class="section section--soft" id="reports">
    <div class="container narrow">
        <header class="section__head">
            <p class="kicker">Documents</p>
            <h2>Reports &amp; <span class="hl">certificates</span></h2>
        </header>
        @forelse ($documents as $category => $docs)
            <h3 class="doc-group">{{ $category }}</h3>
            <ul class="docs">
                @foreach ($docs as $doc)
                    <li>
                        <a href="{{ $doc->file_url }}" target="_blank" rel="noopener">
                            <svg class="i" aria-hidden="true"><use href="#i-book"/></svg>
                            <span>{{ $doc->title }}@if ($doc->year) <small>({{ $doc->year }})</small>@endif</span>
                            <span class="docs__go">Open</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        @empty
            <div class="empty"><p>Reports and certificates will be published here. If you would like one sooner, please <a href="{{ route('contact') }}">contact us</a>.</p></div>
        @endforelse
    </div>
</section>

{{-- 5. HOW TO VERIFY --}}
<section class="section section--blue tp-verify">
    <svg class="trust-sec__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-shield"/></svg>
    <div class="container tp-verify__grid">
        <div>
            <p class="kicker kicker--light">Check us out</p>
            <h2>Don&rsquo;t just take our <span class="hl">word</span> for it</h2>
            <p>Verify us before you give. It only takes a few minutes.</p>
        </div>
        <ul class="tp-verify__list">
            <li class="reveal"><span class="tp-verify__n">1</span><div><strong>Match our registration</strong><p>Compare the registration number and PAN above with the official records.</p></div></li>
            <li class="reveal"><span class="tp-verify__n">2</span><div><strong>Check your tax benefit</strong><p>Our 80G and 12A details are listed so you can confirm your deduction.</p></div></li>
            <li class="reveal"><span class="tp-verify__n">3</span><div><strong>Read the reports</strong><p>Browse the published reports and certificates in the section above.</p></div></li>
            <li class="reveal"><span class="tp-verify__n">4</span><div><strong>Ask us anything</strong><p>Write to us. We are happy to explain how funds are used.</p></div></li>
        </ul>
    </div>
</section>

{{-- 6. CLOSING CTA --}}
<section class="section">
    <div class="container">
        <div class="tp-cta">
            <div>
                <h2>Ready to give with <span class="hl">confidence?</span></h2>
                <p>Every donation is receipted, every cause is verified, and every report is public.</p>
            </div>
            <div class="tp-cta__btns">
                <a class="btn btn--green btn--lg" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Donate now</a>
                <a class="btn btn--blue btn--lg" href="{{ route('contact') }}">Contact us</a>
            </div>
        </div>
    </div>
</section>
@endsection