---
import BaseLayout from "../layouts/BaseLayout.astro";
import SiteHeader from "../components/SiteHeader.astro";
import SiteFooter from "../components/SiteFooter.astro";
import { navigationItems } from "../lib/navigation";

const pageSeo = {
    title: "Support Us",
    description:
        "Support Highland Group RDA through donations, volunteering, or fundraising. Help us provide free, life-changing horse riding sessions in the Highlands.",
    keywords:
        "Support Highland RDA, donate to RDA, RDA fundraising, volunteer with RDA, charity donations Scotland, equestrian therapy support",
    canonicalPath: "/support-us",
};

const ways = [
    {
        label: "Donate",
        heading: "Give today",
        body: "A one-off or regular donation via JustGiving goes directly towards running our sessions, caring for our ponies, and keeping our facilities safe.",
        action: "Donate via JustGiving",
        href: "https://www.justgiving.com/charity/highlandgrouprda",
        external: true,
        img: "/contact-640.webp",
        objectPos: "50% 40%",
    },
    {
        label: "Sponsor a pony",
        heading: "Sponsor one of our ponies",
        body: "Cover the real costs of keeping a pony — hoof trimming, hay, vet visits, and more. A tangible, direct way to make a lasting difference.",
        action: "Find out more",
        href: "#sponsor",
        external: false,
        img: "/alineofponies-1920w.webp",
        objectPos: "50% 45%",
    },
    {
        label: "Volunteer",
        heading: "Give your time",
        body: "No horse experience needed. Side walkers, horse leaders, groomers, fundraisers — there is a role for everyone who wants to help.",
        action: "Apply to volunteer",
        href: "#volunteer",
        external: false,
        img: "/Vols5-2880w-1024x768.avif",
        objectPos: "50% 28%",
    },
];

const costs = [
    { amount: "£34", period: "every 6 weeks", label: "Hoof trimming" },
    { amount: "£35", period: "per bale",      label: "Large hay bale" },
    { amount: "£60", period: "per visit",     label: "Vet visit" },
    { amount: "£30", period: "per session",   label: "Fund a riding session" },
    { amount: "£20", period: "per bag",       label: "Bag of feed" },
    { amount: "£75", period: "one-off",       label: "Riding hat" },
];

const volunteerRoles = [
    { role: "Side walker",    desc: "Walk alongside the rider to provide support and encouragement during sessions." },
    { role: "Horse leader",   desc: "Lead the pony safely around the arena while the rider is in session." },
    { role: "Groomer",        desc: "Help prepare the ponies before and after sessions — grooming and tacking up." },
    { role: "Fundraiser",     desc: "Help organise events and campaigns to raise vital funds for the group." },
    { role: "Maintenance",    desc: "General upkeep of facilities, fencing, painting, and equipment." },
    { role: "Admin support",  desc: "Assist with communications, social media, and administrative tasks." },
];

const faqs = [
    {
        q: "Can I volunteer if I have no experience with horses?",
        a: "Absolutely. Most of our volunteers had no prior horse experience when they joined us. Full training and support is provided for all roles.",
    },
    {
        q: "How much time do I need to commit?",
        a: "Sessions run Tuesday to Friday mornings. Any regular commitment is welcome — even one morning a week makes a real difference. Flexible arrangements are available, especially during summer.",
    },
    {
        q: "How old do I need to be?",
        a: "All volunteers must be 12 or over. There is no upper age limit. We have Public Liability insurance and Trustee Indemnity for all volunteers. Volunteers aged between 12 and 90 also have Personal Accident insurance (with some restrictions for those aged 80–90).",
    },
    {
        q: "What checks are required?",
        a: "You will need to provide 2 referees who are not a relative or partner and who have known you for more than 1 year. Volunteers aged 16 and over who are actively involved with sessions are required to undergo an enhanced disclosure check, as they are volunteering with vulnerable adults and children.",
    },
    {
        q: "Are there other ways to fundraise?",
        a: "Yes — sponsored walks, bake sales, and local events all help enormously. Get in touch and we can advise on how to fundraise on our behalf.",
    },
    {
        q: "Can organisations or businesses support us?",
        a: "We welcome corporate sponsorship and partnerships. Please contact us to discuss how your organisation could get involved.",
    },
    {
        q: "How do I pay to sponsor a pony?",
        a: "We are currently working on a dedicated payment method — thank you for your patience. In the meantime, you can donate via JustGiving or contact us directly to discuss sponsorship arrangements.",
    },
];
---

<BaseLayout {...pageSeo}>
    <Fragment slot="head">
        <link
            rel="preload"
            as="image"
            href="/Vols5-2880w-1024x768.avif"
            imagesizes="100vw"
        />
    </Fragment>

    <style>
        #site-nav {
            transition: background 0.4s ease, backdrop-filter 0.4s ease;
        }
        #site-nav.scrolled {
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(8px);
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .anim-fade-up { animation: fadeUp 0.9s ease both; }

        /* Three-ways editorial cards */
        .ways-strip {
            display: flex;
            width: 100%;
            height: 480px;
            overflow: hidden;
        }
        .way-card {
            position: relative;
            flex: 1 1 0;
            overflow: hidden;
            transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
            color: inherit;
            text-decoration: none;
        }
        .way-card:hover { flex: 1.35 1 0; }
        .way-card-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .way-card:hover .way-card-img { transform: scale(1.04); }
        .way-body, .way-action { opacity: 0; transition: opacity 0.3s ease; }
        .way-card:hover .way-body  { opacity: 1; }
        .way-card:hover .way-action { opacity: 1; }

        @media (max-width: 767px) {
            .ways-strip { flex-direction: column; height: auto; }
            .way-card   { flex: none; height: 200px; }
            .way-body, .way-action { opacity: 1; }
        }

        /* Split panels */
        .panel-img { transition: transform 0.55s ease; }
        .panel-wrap:hover .panel-img { transform: scale(1.03); }

        @media (max-width: 767px) {
            .split-panel { flex-direction: column !important; }
            .split-panel-img  { flex: none !important; height: 260px; }
            .split-panel-text { padding: 40px 24px !important; }
        }

        /* Cost cards */
        .cost-card { transition: transform 0.25s ease; }
        .cost-card:hover { transform: translateY(-4px); }

        /* Volunteer role cards */
        .role-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        @media (max-width: 640px) {
            .role-grid { grid-template-columns: 1fr; }
        }

        /* FAQ accordion */
        details { border-bottom: 1px solid rgba(0,0,0,0.12); }
        details summary {
            list-style: none;
            cursor: pointer;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
        }
        details summary::-webkit-details-marker { display: none; }
        details summary:hover .faq-q { text-decoration: underline; }
        details summary .faq-icon { transition: transform 0.25s ease; flex-shrink: 0; }
        details[open] summary .faq-icon { transform: rotate(45deg); }
        .faq-body {
            padding-bottom: 20px;
            font-family: 'Public Sans', sans-serif;
            font-weight: 600;
            font-size: 15px;
            color: rgba(0,0,0,0.65);
            line-height: 1.7;
        }
    </style>

    <!-- Fixed nav -->
    <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
        <SiteHeader navigationItems={navigationItems} theme="dark" />
    </div>

    <div class="flex flex-col min-h-screen bg-[#e2e2e2]">
        <main class="w-full">

            <!-- ── HERO ── -->
            <section class="relative w-full overflow-hidden" style="min-height: 62vh;">
                <img
                    class="absolute inset-0 h-full w-full object-cover"
                    style="object-position: 50% 28%;"
                    alt=""
                    src="/Vols5-2880w-1024x768.avif"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.55) 100%);"
                />
                <div
                    class="relative flex flex-col justify-end"
                    style="min-height: 62vh; padding: 120px 28px 72px;"
                >
                    <div class="anim-fade-up" style="max-width: 700px;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
                            Support Us
                        </p>
                        <div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
                        <h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 56px); color: #F6F1E8; line-height: 1.1; margin-bottom: 22px;">
                            We are able to carry out our life-changing activities thanks to you.
                        </h1>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.85); line-height: 1.65; max-width: 560px;">
                            We couldn't do what we do without the generosity of our donors, sponsors, and volunteers. Every contribution — however big or small — directly supports our riders.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ── THREE WAYS ── -->
            <div class="ways-strip">
                {ways.map((w) => (
                    <a
                        class="way-card"
                        href={w.href}
                        target={w.external ? "_blank" : undefined}
                        rel={w.external ? "noreferrer" : undefined}
                    >
                        <img
                            class="way-card-img"
                            src={w.img}
                            alt={w.heading}
                            style={`object-position: ${w.objectPos};`}
                            loading="lazy"
                            decoding="async"
                        />
                        <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.05) 100%);" />
                        <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 34px; background: rgba(0,0,0,0.48); backdrop-filter: blur(4px);">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 8px;">
                                {w.label}
                            </p>
                            <h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 26px); color: white; line-height: 1.2; margin-bottom: 10px;">
                                {w.heading}
                            </h3>
                            <p class="way-body" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.6; max-width: 280px; margin-bottom: 14px;">
                                {w.body}
                            </p>
                            <div class="way-action" style="display: flex; align-items: center; gap: 8px;">
                                <span style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: white; letter-spacing: 0.08em; text-transform: uppercase;">
                                    {w.action}
                                </span>
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M3 8h10M9 4l4 4-4 4"/>
                                </svg>
                            </div>
                        </div>
                    </a>
                ))}
            </div>

            <!-- ── DONATE BAND ── -->
            <section style="background: #f5d445; padding: clamp(32px, 5vw, 44px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
                    <div>
                        <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 28px); color: #000; line-height: 1.3; margin-bottom: 8px;">
                            Donate today via JustGiving.
                        </h2>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.65); line-height: 1.6;">
                            One-off or regular — every donation goes directly towards our riders and ponies.
                        </p>
                    </div>
                    <a
                        href="https://www.justgiving.com/charity/highlandgrouprda"
                        target="_blank"
                        rel="noreferrer"
                        style="flex-shrink: 0;"
                    >
                        <img
                            src="/Button.webp"
                            alt="Donate via JustGiving"
                            style="height: 52px; object-fit: contain; display: block;"
                            loading="lazy"
                        />
                    </a>
                </div>
            </section>

            <!-- ── SPONSOR A PONY ── -->
            <section id="sponsor" class="split-panel" style="display: flex; width: 100%; min-height: 520px; overflow: hidden;">
                <div class="panel-wrap split-panel-img" style="flex: 0 0 48%; position: relative; overflow: hidden;">
                    <img
                        class="panel-img"
                        src="/alineofponies-1920w.webp"
                        alt="Our ponies"
                        style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;"
                        loading="lazy"
                        decoding="async"
                    />
                </div>
                <div class="split-panel-text" style="flex: 1 1 0; background: #1e2e1a; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 14px;">
                        Sponsor a pony
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
                    <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #F6F1E8; line-height: 1.15; margin-bottom: 16px;">
                        By sponsoring a pony, you enable us to enrich lives.
                    </h2>
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.7; margin-bottom: 32px;">
                        Our ponies need regular farriery, feed, and veterinary care. Sponsoring one — even partially — makes a direct, tangible difference to a real animal and the riders who depend on them.
                    </p>
                    <!-- Cost grid -->
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px;">
                        {costs.map((c) => (
                            <div class="cost-card" style="background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 16px 18px;">
                                <p style="font-family: 'Merriweather', serif; font-weight: 900; font-size: 26px; color: #7DA371; line-height: 1;">
                                    {c.amount}
                                </p>
                                <p style="margin-top: 4px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 11px; color: rgba(246,241,232,0.45); text-transform: uppercase; letter-spacing: 0.08em;">
                                    {c.period}
                                </p>
                                <p style="margin-top: 8px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: #F6F1E8; line-height: 1.4;">
                                    {c.label}
                                </p>
                            </div>
                        ))}
                    </div>
                    <a
                        href="https://www.justgiving.com/charity/highlandgrouprda"
                        target="_blank"
                        rel="noreferrer"
                        style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
                    >
                        Sponsor via JustGiving
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M3 8h10M9 4l4 4-4 4"/>
                        </svg>
                    </a>
                </div>
            </section>

            <!-- ── VOLUNTEERING ── -->
            <section id="volunteer" class="split-panel" style="display: flex; width: 100%; min-height: 520px; overflow: hidden;">
                <div class="split-panel-text" style="flex: 1 1 0; background: #d6d6d6; display: flex; flex-direction: column; justify-content: center; padding: 64px 72px;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
                        Volunteering
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
                    <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 34px); color: #000; line-height: 1.15; margin-bottom: 16px;">
                        We welcome all volunteers — no horse experience needed.
                    </h2>
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.7; margin-bottom: 32px;">
                        Sessions run Tuesday to Friday mornings. Regular help is ideal, but flexible arrangements are available — especially during summer.
                    </p>
                    <!-- Role grid -->
                    <div class="role-grid" style="margin-bottom: 36px;">
                        {volunteerRoles.map((v) => (
                            <div style="background: #e2e2e2; border-radius: 6px; padding: 14px 18px; border-left: 3px solid #7DA371;">
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; color: #000; margin-bottom: 4px;">
                                    {v.role}
                                </p>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.6); line-height: 1.5;">
                                    {v.desc}
                                </p>
                            </div>
                        ))}
                    </div>
                    <a
                        href="/volunteer-application"
                        style="align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: white; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
                    >
                        Apply to volunteer
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M3 8h10M9 4l4 4-4 4"/>
                        </svg>
                    </a>
                </div>
                <div class="panel-wrap split-panel-img" style="flex: 0 0 46%; position: relative; overflow: hidden;">
                    <img
                        class="panel-img"
                        src="/Vols5-2880w-1024x768.avif"
                        alt="Our volunteers"
                        style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;"
                        loading="lazy"
                        decoding="async"
                    />
                </div>
            </section>

            <!-- ── FAQ ── -->
            <section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 860px; margin: 0 auto;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
                        Common questions
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 22px;" />
                    <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 40px;">
                        Good to know.
                    </h2>

                    <div style="border-top: 1px solid rgba(0,0,0,0.12);">
                        {faqs.map((item) => (
                            <details>
                                <summary>
                                    <span class="faq-q" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(15px, 1.5vw, 18px); color: #000; line-height: 1.3;">
                                        {item.q}
                                    </span>
                                    <svg class="faq-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#7DA371" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M10 4v12M4 10h12"/>
                                    </svg>
                                </summary>
                                <p class="faq-body">{item.a}</p>
                            </details>
                        ))}
                    </div>

                    <!-- Still have questions callout -->
                    <div style="margin-top: 48px; background: #d6d6d6; border-radius: 7px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
                        <div>
                            <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #000; margin-bottom: 6px;">
                                Still have questions?
                            </p>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.6); line-height: 1.6;">
                                We'd love to hear from you.
                            </p>
                        </div>
                        <a
                            href="/contact"
                            style="display: inline-flex; align-items: center; gap: 10px; border: 2px solid #7DA371; color: #000; border-radius: 9999px; padding: 12px 26px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0;"
                        >
                            Contact us
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M3 8h10M9 4l4 4-4 4"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </section>

        </main>
        <SiteFooter fullBleedOnMobile />
    </div>

    <script>
        const nav = document.getElementById("site-nav");
        if (nav) {
            window.addEventListener("scroll", () => {
                nav.classList.toggle("scrolled", window.scrollY > 40);
            }, { passive: true });
        }
    </script>
</BaseLayout>
