@extends('layouts.app')

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

@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-bag"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">CSR &amp; corporate giving</p>
            <h1>Let&rsquo;s build <span class="hl">impact</span> together</h1>
            <p class="ihero__lead">CSR projects, employee giving and community drives: partner with Parhit Foundation and see exactly where your support goes.</p>
            <div class="ihero__btns">
                <a class="btn btn--white btn--lg" href="#form"><svg class="i" aria-hidden="true"><use href="#i-mail"/></svg>Start the conversation</a>
                <a class="btn btn--glass btn--lg" href="{{ route('transparency') }}"><svg class="i" aria-hidden="true"><use href="#i-eye"/></svg>See our transparency page</a>
            </div>
        </div>
        <ul class="vhero__cards" aria-label="Ways to partner">
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-bag"/></svg></span>CSR projects</li>
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-users"/></svg></span>Employee giving</li>
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-gift"/></svg></span>Events &amp; drives</li>
            <li><span class="vhero__dot" aria-hidden="true"><svg class="i"><use href="#i-pencil"/></svg></span>Skills &amp; time</li>
        </ul>
    </div>
</section>

{{-- 2. HOW A PARTNERSHIP COMES TOGETHER --}}
<section class="section section--soft">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Simple to start</p>
            <h2>A partnership that comes together <span class="hl">fast</span></h2>
            <p>Three quick steps from a first message to seeing your impact.</p>
        </header>
        <ol class="steps">
            <li class="step reveal">
                <span class="step__num" aria-hidden="true">01</span>
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-mail"/></svg></span>
                <h3>Tell us about you</h3>
                <p>Share your goals in the form below. We usually reply within two working days.</p>
            </li>
            <li class="step reveal">
                <span class="step__num" aria-hidden="true">02</span>
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-chart"/></svg></span>
                <h3>We shape a plan</h3>
                <p>We match your budget and interests to a cause or programme, with clear milestones.</p>
            </li>
            <li class="step reveal">
                <span class="step__num" aria-hidden="true">03</span>
                <span class="step__n" aria-hidden="true"><svg class="i i--lg"><use href="#i-eye"/></svg></span>
                <h3>You see the impact</h3>
                <p>Photo and report updates, plus the registration details you need for your records.</p>
            </li>
        </ol>
    </div>
</section>

{{-- 3. FORM + TRUST SIDEBAR --}}
<section class="section cmain">
    <div class="container cmain__grid">
        <aside class="dside">
            <div class="dside__card">
                <h2>Why partner with <span class="hl">Parhit</span></h2>
                <ul class="dside__list">
                    <li><span class="dside__ico" aria-hidden="true"><svg class="i"><use href="#i-shield"/></svg></span><div><strong>Verified &amp; registered</strong><p>Our registration and tax details are published for anyone to check.</p></div></li>
                    <li><span class="dside__ico" aria-hidden="true"><svg class="i"><use href="#i-eye"/></svg></span><div><strong>Open reporting</strong><p>Photo and spend updates keep your CSR records audit-ready.</p></div></li>
                    <li><span class="dside__ico" aria-hidden="true"><svg class="i"><use href="#i-camera"/></svg></span><div><strong>On-ground reach</strong><p>We work directly with communities, not through layers of agencies.</p></div></li>
                </ul>
            </div>
            <a class="dside__help" href="{{ route('transparency') }}">
                <span class="dside__help-ico" aria-hidden="true"><svg class="i i--lg"><use href="#i-shield"/></svg></span>
                <div><strong>Need the numbers?</strong><p>Registration, 80G, 12A and PAN are on our transparency page.</p></div>
            </a>
        </aside>

        <form class="card form cform" id="form" action="{{ route('partner.store') }}" method="post" novalidate>
            @csrf
            <header class="cform__head">
                <span class="cform__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-bag"/></svg></span>
                <div>
                    <h2>Tell us about your organisation</h2>
                    <p>It takes about two minutes.</p>
                </div>
            </header>
            @include('partials.flash')
            <div class="hp" aria-hidden="true"><label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>

            <x-field name="organisation" label="Organisation" required autocomplete="organization" maxlength="150" />
            <x-field name="name" label="Your name" required autocomplete="name" maxlength="100" />
            <div class="form__row">
                <x-field name="email" label="Work email" type="email" required autocomplete="email" inputmode="email" />
                <x-field name="phone" label="Phone" type="tel" autocomplete="tel" inputmode="tel" />
            </div>
            <x-field name="subject" label="Area of interest" hint="For example: CSR project, employee giving, event." maxlength="150" />
            <x-field name="message" label="How would you like to help?" type="textarea" required :rows="5" maxlength="3000" />

            <button class="btn btn--green btn--lg btn--block" type="submit">Send enquiry <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></button>
            <p class="cform__note"><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>We never share your details with anyone.</p>
        </form>
    </div>
</section>
@endsection