@php
    use Illuminate\Support\Facades\Route;
    // $registerUrl is supplied by HomeController (pre-tagged with the chosen event).
    // "Sponsor a participant" / "Search" → the fundraiser search page;
    // "Donate instead" → the general donation site.
    $sponsorUrl = route('search');
    $donateUrl = 'https://donation.yspi.ie';
    $sent = session('contact_status') === 'sent';

    // Contact lede: weave the editable email + phone into the sentence as links.
    $contactLede = str_replace(
        ['{email}', '{phone}'],
        [
            '<a href="mailto:'.e($c['contact.email']).'">'.e($c['contact.email']).'</a>',
            '<a href="tel:'.e(preg_replace('/\s+/', '', $c['contact.phone'])).'">'.e($c['contact.phone']).'</a>',
        ],
        e($c['contact.lede']),
    );
@endphp

<x-public.layout :title="$c['meta.title']">

    {{-- ===================== HERO ===================== --}}
    <section class="hero">
        <div class="hero-bg"></div>
        <div class="hero-scrim"></div>
        <div class="hero-inner">
            <div class="hero-col">
                <img src="/images/yspi-logo-white.webp" alt="Youth Suicide Prevention Ireland" class="hero-logo" style="margin-bottom:1.5rem;">
                <div style="margin-bottom:1rem;"><span class="hero-kicker"><i class="{{ $c['hero.kicker.icon'] }}"></i> {{ $c['hero.kicker'] }}</span></div>
                <h1 class="hero-event" style="margin-bottom:1rem;">{{ $c['hero.title'] }}</h1>
                <p class="hero-tagline" style="margin-bottom:1rem;">{{ $c['hero.tagline'] }} <span class="tl-accent">{{ $c['hero.tagline_accent'] }}</span></p>
                <p class="hero-support" style="margin-bottom:1.5rem;">{{ $c['hero.support'] }}</p>
                <div class="hero-cta" style="margin-bottom:1.5rem;">
                    <a href="{{ $registerUrl }}" class="btn btn-donate btn-lg"><i class="{{ $c['hero.cta_register.icon'] }}"></i>&nbsp; {{ $c['hero.cta_register.label'] }}</a>
                    <a href="{{ $sponsorUrl }}" class="btn btn-ghost-light btn-lg"><i class="{{ $c['hero.cta_sponsor.icon'] }}"></i>&nbsp; {{ $c['hero.cta_sponsor.label'] }}</a>
                </div>
                <div class="hero-facts-wrap">
                    <div class="hero-facts">
                        <div class="hero-fact">
                            <span class="hf-ico"><i class="{{ $c['hero.fact1.icon'] }}"></i></span>
                            <div><span class="hf-v">{{ $c['hero.fact1.value'] }}</span><span class="hf-k">{{ $c['hero.fact1.label'] }}<small>{{ $c['hero.fact1.sub'] }}</small></span></div>
                        </div>
                        <div class="hero-fact">
                            <span class="hf-ico"><i class="{{ $c['hero.fact2.icon'] }}"></i></span>
                            <div><span class="hf-v">{{ $c['hero.fact2.value'] }}</span><span class="hf-k">{{ $c['hero.fact2.label'] }}<small>{{ $c['hero.fact2.sub'] }}</small></span></div>
                        </div>
                        <div class="hero-fact">
                            <span class="hf-ico"><i class="{{ $c['hero.fact3.icon'] }}"></i></span>
                            <div><span class="hf-v">{{ $c['hero.fact3.value'] }}</span><span class="hf-k">{{ $c['hero.fact3.label'] }}<small>{{ $c['hero.fact3.sub'] }}</small></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="mx-auto w-full max-w-[1180px] px-4 sm:px-6">

        {{-- ===================== ACTION CARDS ===================== --}}
        <section class="grid grid-cols-1 md:grid-cols-3 gap-6 py-12" data-stagger>
            <div class="action-card">
                <div class="action-ico"><i class="{{ $c['cards.register.icon'] }}"></i></div>
                <h3>{{ $c['cards.register.title'] }}</h3>
                <p>{{ $c['cards.register.body'] }}</p>
                <a href="{{ $registerUrl }}" class="btn btn-donate" style="padding-inline:1.5rem;"><i class="{{ $c['cards.register.button_icon'] }}"></i>&nbsp; {{ $c['cards.register.button'] }}</a>
            </div>
            <div class="action-card">
                <div class="action-ico"><i class="{{ $c['cards.sponsor.icon'] }}"></i></div>
                <h3>{{ $c['cards.sponsor.title'] }}</h3>
                <p>{{ $c['cards.sponsor.body'] }}</p>
                <a href="{{ $sponsorUrl }}" class="btn btn-navy" style="padding-inline:1.5rem;"><i class="{{ $c['cards.sponsor.button_icon'] }}"></i>&nbsp; {{ $c['cards.sponsor.button'] }}</a>
            </div>
            <div class="action-card">
                <div class="action-ico"><i class="{{ $c['cards.search.icon'] }}"></i></div>
                <h3>{{ $c['cards.search.title'] }}</h3>
                <p>{{ $c['cards.search.body'] }}</p>
                <a href="{{ $sponsorUrl }}" class="btn btn-navy" style="padding-inline:1.5rem;"><i class="{{ $c['cards.search.button_icon'] }}"></i>&nbsp; {{ $c['cards.search.button'] }}</a>
            </div>
        </section>

        {{-- ===================== QUICK MENU ===================== --}}
        <section class="pb-12 reveal">
            <nav class="quickmenu">
                <a href="{{ route('home.public') }}"><i class="{{ $c['quickmenu.menu.icon'] }}"></i> {{ $c['quickmenu.menu.label'] }}</a>
                <a href="{{ $registerUrl }}"><i class="{{ $c['quickmenu.signup.icon'] }}"></i> {{ $c['quickmenu.signup.label'] }}</a>
                <a href="#contact-us"><i class="{{ $c['quickmenu.enquiry.icon'] }}"></i> {{ $c['quickmenu.enquiry.label'] }}</a>
                <a href="#services"><i class="{{ $c['quickmenu.services.icon'] }}"></i> {{ $c['quickmenu.services.label'] }}</a>
                <a href="#booking"><i class="{{ $c['quickmenu.booking.icon'] }}"></i> {{ $c['quickmenu.booking.label'] }}</a>
            </nav>
        </section>

        {{-- ===================== MISSION ===================== --}}
        <section id="mission" class="panel panel-pad" style="margin-bottom:3rem;">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 items-center">
                <div class="lg:col-span-5">
                    <img src="{{ $missionImage }}" alt="{{ $missionAlt }}" class="mission-img" style="aspect-ratio:4/3;">
                </div>
                <div class="lg:col-span-7">
                    <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $c['mission.eyebrow.icon'] }}"></i></span> {{ $c['mission.eyebrow'] }}</span>
                    <p class="lede" style="margin:1rem 0;">{{ $c['mission.lede'] }}</p>
                    <p style="margin-bottom:1rem;">{{ $c['mission.body'] }}</p>
                    <p class="motto" style="margin-bottom:1.5rem;">{{ $c['mission.motto'] }}</p>
                    <a href="{{ $registerUrl }}" class="btn btn-donate btn-lg" style="padding-inline:1.5rem;"><i class="{{ $c['mission.cta.icon'] }}"></i>&nbsp; {{ $c['mission.cta.label'] }}</a>
                </div>
            </div>
        </section>

        {{-- ===================== IMPACT ===================== --}}
        <section class="panel panel-pad reveal" style="margin-bottom:3rem;">
            <div class="text-center" style="margin-bottom:1.5rem;">
                <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $c['impact.eyebrow.icon'] }}"></i></span> {{ $c['impact.eyebrow'] }}</span>
                <h2 class="section-title text-2xl sm:text-3xl" style="margin-top:.5rem;">{{ $c['impact.heading'] }}</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <ul class="impact-list">
                    <li><i class="{{ $c['impact.item1.icon'] }} fa-fw"></i> {{ $c['impact.item1'] }}</li>
                    <li><i class="{{ $c['impact.item2.icon'] }} fa-fw"></i> {{ $c['impact.item2'] }}</li>
                </ul>
                <ul class="impact-list">
                    <li><i class="{{ $c['impact.item3.icon'] }} fa-fw"></i> {{ $c['impact.item3'] }}</li>
                    <li><i class="{{ $c['impact.item4.icon'] }} fa-fw"></i> {{ $c['impact.item4'] }}</li>
                </ul>
            </div>
        </section>

        {{-- ===================== SERVICES ===================== --}}
        <section id="services" class="panel panel-pad reveal" style="margin-bottom:3rem;">
            <div class="text-center" style="margin-bottom:1.5rem;">
                <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $c['services.eyebrow.icon'] }}"></i></span> {{ $c['services.eyebrow'] }}</span>
                <h2 class="section-title text-2xl sm:text-3xl" style="margin:.5rem 0;">{{ $c['services.heading'] }}</h2>
                <p class="lede mx-auto" style="max-width:40rem;">{{ $c['services.lede'] }}</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" data-stagger>
                <div class="service"><div class="chip"><i class="{{ $c['services.item1.icon'] }}"></i></div><div><h6>{{ $c['services.item1.title'] }}</h6><p>{{ $c['services.item1.body'] }}</p></div></div>
                <div class="service"><div class="chip"><i class="{{ $c['services.item2.icon'] }}"></i></div><div><h6>{{ $c['services.item2.title'] }}</h6><p>{{ $c['services.item2.body'] }}</p></div></div>
                <div class="service"><div class="chip"><i class="{{ $c['services.item3.icon'] }}"></i></div><div><h6>{{ $c['services.item3.title'] }}</h6><p>{{ $c['services.item3.body'] }}</p></div></div>
                <div class="service"><div class="chip"><i class="{{ $c['services.item4.icon'] }}"></i></div><div><h6>{{ $c['services.item4.title'] }}</h6><p>{{ $c['services.item4.body'] }}</p></div></div>
                <div class="service"><div class="chip"><i class="{{ $c['services.item5.icon'] }}"></i></div><div><h6>{{ $c['services.item5.title'] }}</h6><p>{{ $c['services.item5.body'] }}</p></div></div>
                <div class="service"><div class="chip"><i class="{{ $c['services.item6.icon'] }}"></i></div><div><h6>{{ $c['services.item6.title'] }}</h6><p>{{ $c['services.item6.body'] }}</p></div></div>
            </div>
            <div class="text-center" style="margin-top:1.5rem;"><a href="{{ $registerUrl }}" class="btn btn-donate btn-lg" style="padding-inline:1.5rem;"><i class="{{ $c['services.cta.icon'] }}"></i>&nbsp; {{ $c['services.cta.label'] }}</a></div>
        </section>

        {{-- ===================== BOOKING ===================== --}}
        <section id="booking" class="panel panel-pad reveal text-center" style="margin-bottom:3rem;">
            <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $c['booking.eyebrow.icon'] }}"></i></span> {{ $c['booking.eyebrow'] }}</span>
            <h2 class="section-title text-2xl sm:text-3xl" style="margin:.5rem 0;">{{ $c['booking.heading'] }}</h2>
            <p class="lede mx-auto" style="max-width:44rem; margin-bottom:1.5rem;">{{ $c['booking.lede'] }}</p>
            <img src="/images/skydive_explainer_landscape.webp" alt="{{ $c['booking.image_alt'] }}" class="mx-auto" style="max-width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow-sm); border:1px solid var(--line); margin-bottom:1.5rem;">
            <div><a href="{{ $registerUrl }}" class="btn btn-donate btn-lg" style="padding-inline:1.5rem;"><i class="{{ $c['booking.cta.icon'] }}"></i>&nbsp; {{ $c['booking.cta.label'] }}</a></div>
        </section>

        {{-- ===================== OUTCOME STATS ===================== --}}
        <section id="stats" class="panel panel-pad reveal" style="margin-bottom:3rem;">
            <div class="text-center" style="margin-bottom:1.5rem;">
                <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $c['stats.eyebrow.icon'] }}"></i></span> {{ $c['stats.eyebrow'] }}</span>
                <h2 class="section-title text-2xl sm:text-3xl" style="margin-top:.5rem;">{{ $c['stats.heading'] }}</h2>
            </div>
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4" data-stagger>
                <div class="stat-tile"><i class="{{ $c['stats.stat1.icon'] }}"></i><div class="v">{{ $c['stats.stat1.value'] }}</div><div class="k">{{ $c['stats.stat1.label'] }}</div></div>
                <div class="stat-tile"><i class="{{ $c['stats.stat2.icon'] }}"></i><div class="v">{{ $c['stats.stat2.value'] }}</div><div class="k">{{ $c['stats.stat2.label'] }}</div></div>
                <div class="stat-tile"><i class="{{ $c['stats.stat3.icon'] }}"></i><div class="v">{{ $c['stats.stat3.value'] }}</div><div class="k">{{ $c['stats.stat3.label'] }}</div></div>
                <div class="stat-tile"><i class="{{ $c['stats.stat4.icon'] }}"></i><div class="v">{{ $c['stats.stat4.value'] }}</div><div class="k">{{ $c['stats.stat4.label'] }}</div></div>
            </div>
        </section>

        {{-- ===================== CONTACT ===================== --}}
        <section id="contact-us" class="panel panel-pad reveal" style="margin-bottom:3rem;">
            <div class="text-center" style="margin-bottom:1.5rem;">
                <span class="eyebrow" style="margin-bottom:1rem;"><span class="ico"><i class="{{ $c['contact.eyebrow.icon'] }}"></i></span> {{ $c['contact.eyebrow'] }}</span>
                <h2 class="section-title text-2xl sm:text-3xl" style="margin:.5rem 0;">{{ $c['contact.heading'] }}</h2>
                <p class="lede mx-auto" style="max-width:42rem;">{!! $contactLede !!}</p>
            </div>

            @if ($sent)
                <div class="contact-sent">
                    <span class="ico"><i class="fa-light fa-check"></i></span>
                    <div>
                        <div class="t">{{ $c['contact.sent_title'] }}</div>
                        <div class="d">{{ $c['contact.sent_body'] }}</div>
                    </div>
                </div>
            @else
                <div class="reply-note" style="margin-bottom:1.5rem;">
                    <span class="ico"><i class="fa-light fa-clock"></i></span>
                    <div>
                        <div class="t">{{ $c['contact.reply_title'] }}</div>
                        <div class="d">{{ $c['contact.reply_body'] }}</div>
                    </div>
                </div>

                <form class="contact-form" action="{{ route('contact.store') }}" method="POST" novalidate>
                    @csrf
                    <input type="hidden" name="return" value="{{ route('home.public') }}">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="c_first" class="form-label req">First name</label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-user"></i></span>
                                <input type="text" class="form-control" id="c_first" name="firstname" value="{{ old('firstname') }}" placeholder="Your first name" autocomplete="given-name" required></div>
                            @error('firstname')<div class="form-status err">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label for="c_last" class="form-label req">Last name</label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-user"></i></span>
                                <input type="text" class="form-control" id="c_last" name="lastname" value="{{ old('lastname') }}" placeholder="Your last name" autocomplete="family-name" required></div>
                            @error('lastname')<div class="form-status err">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label for="c_email" class="form-label req">Email address</label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-envelope"></i></span>
                                <input type="email" class="form-control" id="c_email" name="email" value="{{ old('email') }}" placeholder="you@example.com" autocomplete="email" required></div>
                            @error('email')<div class="form-status err">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label for="c_mobile" class="form-label">Mobile <span style="color:var(--ink-soft); font-weight:400; font-size:.85rem;">· optional</span></label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-mobile-screen"></i></span>
                                <input type="tel" class="form-control" id="c_mobile" name="mobile" value="{{ old('mobile') }}" placeholder="Optional" autocomplete="tel"></div>
                        </div>
                        <div class="sm:col-span-2">
                            <label for="c_message" class="form-label req">Message</label>
                            <textarea class="form-control" id="c_message" name="message" rows="5" placeholder="How can we help?" required>{{ old('message') }}</textarea>
                            @error('message')<div class="form-status err">{{ $message }}</div>@enderror
                        </div>

                        {{-- Honeypot: hidden from humans; bots fill it. Server rejects if non-empty. --}}
                        <div style="position:absolute; left:-9999px; top:-9999px;" aria-hidden="true">
                            <label for="c_website">Leave this field blank</label>
                            <input type="text" id="c_website" name="website" tabindex="-1" autocomplete="off">
                        </div>

                        <div class="sm:col-span-1">
                            <label for="c_captcha" class="form-label req">Quick maths check:
                                <span id="c_question"><b>{{ $captcha['question'] }}</b></span>
                                <a href="#" id="c_refresh" data-url="{{ route('contact.captcha') }}" class="ms-1" style="font-size:.85rem;"><i class="fa-light fa-arrows-rotate"></i> New</a>
                            </label>
                            <div class="input-group"><span class="input-group-text"><i class="fa-light fa-calculator"></i></span>
                                <input type="text" class="form-control" id="c_captcha" name="captcha_answer" placeholder="Type the answer" autocomplete="off" inputmode="numeric" required></div>
                            @error('captcha_answer')<div class="form-status err">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div style="margin-top:1rem;">
                        <button type="submit" class="btn btn-donate btn-lg" style="padding-inline:2rem;"><i class="fa-light fa-paper-plane"></i>&nbsp; Send message</button>
                        <p class="form-text" style="margin-top:.5rem;"><i class="fa-light fa-lock"></i> Your details are processed securely and never shared.</p>
                    </div>
                </form>
            @endif
        </section>

        {{-- ===================== FINAL CTA ===================== --}}
        <section class="reveal" style="margin-bottom:3rem;">
            <div class="cta-final text-center" style="padding:3rem 1rem;">
                <div class="inner">
                    <span class="kicker" style="margin-bottom:1rem;"><i class="{{ $c['cta.kicker.icon'] }}"></i> {{ $c['cta.kicker'] }}</span>
                    <h2 style="margin-bottom:1rem;">{{ $c['cta.heading'] }}</h2>
                    <p class="mx-auto" style="max-width:40rem; color:#dceaf7; font-size:1.15rem; margin-bottom:1.5rem;">{{ $c['cta.body'] }}</p>
                    <div class="flex flex-wrap gap-4 justify-center" style="margin-bottom:1.5rem;">
                        <a href="{{ $registerUrl }}" class="btn btn-donate btn-lg" style="padding-inline:1.5rem;"><i class="{{ $c['cta.register.icon'] }}"></i>&nbsp; {{ $c['cta.register.label'] }}</a>
                        <a href="{{ $donateUrl }}" class="btn btn-white btn-lg" style="padding-inline:1.5rem;"><i class="{{ $c['cta.donate.icon'] }}"></i>&nbsp; {{ $c['cta.donate.label'] }}</a>
                    </div>
                    <p class="micro" style="margin-bottom:0;"><i class="fa-light fa-check"></i> {{ $c['cta.micro1'] }} &nbsp;&middot;&nbsp; <i class="fa-light fa-check"></i> {{ $c['cta.micro2'] }} &nbsp;&middot;&nbsp; <i class="fa-light fa-check"></i> {{ $c['cta.micro3'] }}</p>
                </div>
            </div>
        </section>

    </div>
</x-public.layout>