@extends('layouts.app')

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

@section('content')
@php
    $channels = array_filter([
        'address' => $site('address') ? ['pin', 'Visit us', $site('address'), 'https://www.google.com/maps/search/?api=1&query='.urlencode($site('address')), 'Get directions'] : null,
        'phone' => $site('phone') ? ['phone', 'Call us', $site('phone'), 'tel:+'.\App\Support\Fmt::digits($site('phone')), 'Call now'] : null,
        'email' => $site('email') ? ['mail', 'Email us', $site('email'), 'mailto:'.$site('email'), 'Write to us'] : null,
        'whatsapp' => $site('whatsapp') ? ['whatsapp', 'WhatsApp', 'Chat with us', 'https://wa.me/'.\App\Support\Fmt::digits($site('whatsapp')), 'Start chat'] : null,
    ]);
    $socials = array_filter([
        'facebook' => $site('social_facebook'),
        'instagram' => $site('social_instagram'),
        'youtube' => $site('social_youtube'),
    ]);
@endphp

{{-- 1. HERO --}}
<section class="ihero chhero">
    <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-mail"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">Contact us</p>
            <h1>We would love to <span class="hl">hear from you</span></h1>
            <p class="ihero__lead">Questions about donating, volunteering or our work? Send us a message and our team will get back to you.</p>
            <ul class="chhero__pts">
                <li><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>We reply within 1 to 2 working days</li>
                <li><svg class="i" aria-hidden="true"><use href="#i-lock"/></svg>Your details stay private</li>
            </ul>
        </div>
        @if ($channels)
            <ul class="chhero__quick" aria-label="Quick contact">
                @foreach ($channels as $c)
                    <li>
                        <a href="{{ $c[3] }}" @if (str_starts_with($c[3], 'http')) target="_blank" rel="noopener" @endif>
                            <span class="chhero__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-{{ $c[0] }}"/></svg></span>
                            <span class="chhero__txt"><small>{{ $c[1] }}</small><strong>{{ $c[4] }}</strong></span>
                            <svg class="i chhero__go" aria-hidden="true"><use href="#i-arrow"/></svg>
                        </a>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</section>

{{-- 2. DETAILS + FORM --}}
<section class="section cmain">
    <div class="container cmain__grid">
        <aside class="cinfo">
            <header class="cinfo__head">
                <p class="kicker">Get in touch</p>
                <h2>Reach us <span class="hl">your way</span></h2>
            </header>
            <ul class="cinfo__list">
                @foreach ($channels as $key => $c)
                    <li class="cinfo__item cinfo__item--{{ $key }}">
                        <span class="cinfo__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-{{ $c[0] }}"/></svg></span>
                        <div>
                            <strong>{{ $c[1] }}</strong>
                            @if ($key === 'address')
                                <address>{{ $c[2] }}</address>
                            @else
                                <a href="{{ $c[3] }}" @if (str_starts_with($c[3], 'http')) target="_blank" rel="noopener" @endif>{{ $c[2] }}</a>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ul>

            @if ($socials)
                <div class="cinfo__social">
                    <span>Follow us</span>
                    @foreach ($socials as $net => $url)
                        <a href="{{ $url }}" target="_blank" rel="noopener" aria-label="{{ ucfirst($net) }}"><svg class="i" aria-hidden="true"><use href="#i-{{ $net }}"/></svg></a>
                    @endforeach
                </div>
            @endif

            <a class="cinfo__partner" href="{{ route('partner') }}">
                <span class="cinfo__partner-ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-users"/></svg></span>
                <span><strong>Partner as a company?</strong><small>See our CSR &amp; partner page</small></span>
                <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg>
            </a>
        </aside>

        <form class="card form cform" id="form" action="{{ route('contact.store') }}" method="post" novalidate>
            @csrf
            <header class="cform__head">
                <span class="cform__ico"><svg class="i i--lg" aria-hidden="true"><use href="#i-mail"/></svg></span>
                <div>
                    <h2>Send us a message</h2>
                    <p>Fill in the form and we will reply by email.</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="name" label="Your name" required autocomplete="name" maxlength="100" />
            <div class="form__row">
                <x-field name="email" label="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="Subject" maxlength="150" />
            <x-field name="message" label="Message" type="textarea" required :rows="6" maxlength="3000" />

            <button class="btn btn--green btn--lg btn--block" type="submit">Send message <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>

{{-- 3. QUICK ANSWERS (Admin > FAQs, "Show on the home page") --}}
@if ($faqs->isNotEmpty())
<section class="section section--soft cfaq">
    <div class="container">
        <header class="section__row">
            <div>
                <p class="kicker">Before you write</p>
                <h2>Quick <span class="hl">answers</span></h2>
            </div>
            <a class="link-all" href="{{ route('faq') }}">All FAQs <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </header>
        <div class="cfaq__grid" data-faq-list>
            @foreach ($faqs as $faq)
                <details class="homefaq__item">
                    <summary><span class="homefaq__n" aria-hidden="true">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span><span class="homefaq__q">{{ $faq->question }}</span><span class="homefaq__tog" aria-hidden="true"><svg class="i"><use href="#i-chevron"/></svg></span></summary>
                    <p>{{ $faq->answer }}</p>
                </details>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection