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

const pageSeo = {
    title: "Highland Group RDA",
    description:
        "Highland Group RDA provides horse riding for people with disabilities in the Highlands, offering safe, fun, and therapeutic equestrian activities.",
    keywords:
        "Highland Group RDA, horse riding for disabilities, therapeutic riding Highlands, RDA Scotland, equestrian therapy, disability riding lessons",
    canonicalPath: "/",
};

// ── Fallback content (used when Sanity is not configured or document is empty) ─
const DEFAULTS = {
    heroHeadline:   "Enriching lives through horses in the Highlands.",
    heroMission:    "Our mission is to bring about meaningful and positive changes in the health and well-being of people with physical or mental disabilities through activities with our horses and ponies.",
    videoHeading:   "What is Riding for the Disabled?",
    videoBody:      "Across the Highlands, we provide riding sessions for people with a wide range of physical and mental disabilities — connecting them with our ponies in a way that's therapeutic, joyful, and life-changing.",
    videoYoutubeId: "IX2DGd6m8BU",
    sponsorHeading: "We are grateful for the generous support of our sponsors.",
    ctaCards: [
        { label: "Fundraising",    title: "Sponsor a pony",       description: "Your support keeps our ponies healthy and our sessions running — from hoof trimming to hay bales.", image: "/alineofponies-1920w.webp",           href: "/support-us" },
        { label: "Get involved",   title: "Apply to volunteer",   description: "No horse experience needed. Sidestep walkers, groomers, fundraisers — all roles make a real difference.", image: "/Vols5-2880w-1024x768.avif",    href: "/volunteer-application" },
        { label: "Riding sessions",title: "Apply to participate", description: "We welcome riders and carriage drivers with a wide range of physical and mental disabilities.", image: "/Samantha-and-Connolly-1280.webp", href: "/participant-application" },
    ],
    sponsors: [
        { name: "Ffordes", logo: "/sponsors/ffordes_logo.png", url: null },
    ],
};

const cms = isSanityConfigured() ? (await getSanityHomePage()) : null;

const heroHeadline   = cms?.heroHeadline   || DEFAULTS.heroHeadline;
const heroMission    = cms?.heroMission    || DEFAULTS.heroMission;
const videoHeading   = cms?.videoHeading   || DEFAULTS.videoHeading;
const videoBody      = cms?.videoBody      || DEFAULTS.videoBody;
const videoYoutubeId = cms?.videoYoutubeId || DEFAULTS.videoYoutubeId;
const sponsorHeading = cms?.sponsorHeading || DEFAULTS.sponsorHeading;
const ctaCards       = cms?.ctaCards?.length ? cms.ctaCards : DEFAULTS.ctaCards;
const sponsors       = cms?.sponsors?.length  ? cms.sponsors  : DEFAULTS.sponsors;
---

<BaseLayout {...pageSeo}>
    <Fragment slot="head">
        <link
            rel="preload"
            as="image"
            href="/hero-home.webp"
            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(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .anim-fade-up  { animation: fadeUp 1s ease both; }
        .anim-fade-up2 { animation: fadeUp 1s ease both 0.2s; }

        .cta-editorial {
            display: flex;
            width: 100%;
            height: 520px;
            overflow: hidden;
        }
        .cta-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;
        }
        .cta-card:hover { flex: 1.3 1 0; }
        .cta-card-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .cta-card:hover .cta-card-img { transform: scale(1.04); }
        .cta-sub, .cta-more {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .cta-card:hover .cta-sub { opacity: 1; }
        .cta-card:hover .cta-more { opacity: 1; }

        @media (max-width: 767px) {
            .cta-editorial { flex-direction: column; height: auto; }
            .cta-card { flex: none; height: 200px; }
        }

        .video-embed {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 7px;
        }
        .video-embed iframe {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border: 0;
        }

        .sponsor-logo {
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sponsor-logo img {
            max-height: 64px;
            max-width: 200px;
            object-fit: contain;
            filter: brightness(0) invert(1);
            opacity: 0.85;
            transition: opacity 0.2s ease;
        }
        .sponsor-logo img:hover {
            opacity: 1;
        }
        .sponsor-cta {
            border: 2px dashed rgba(255, 255, 255, 0.25);
            border-radius: 8px;
            padding: 20px 28px;
            text-align: center;
            max-width: 380px;
            margin: 0 auto;
        }

        @media (max-width: 767px) {
            .scroll-indicator { display: none; }
            .hero-donate { display: none; }
        }

        /* ── Donate modal ── */
        .donate-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1000;
            align-items: flex-start;
            justify-content: center;
            padding: 4vh 16px 48px;
            overflow-y: auto;
            background: rgba(0,0,0,0);
            -webkit-backdrop-filter: blur(0);
            backdrop-filter: blur(0);
            transition: background 0.28s ease, backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease;
        }
        .donate-overlay.visible {
            background: rgba(0,0,0,0.55);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }
        .donate-panel {
            position: relative;
            width: 100%;
            max-width: 680px;
            background: #F6F1E8;
            border-radius: 7px;
            padding: clamp(28px, 4vw, 44px);
            margin: auto;
            box-shadow: 0 24px 80px rgba(0,0,0,0.4);
            transform: translateY(16px) scale(0.985);
            opacity: 0;
            transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.28s ease;
        }
        .donate-overlay.visible .donate-panel {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        .donate-fi {
            font-family: 'Public Sans', sans-serif;
            font-weight: 600;
            font-size: 15px;
            color: #000;
            background: #fff;
            border: 1.5px solid rgba(0,0,0,0.15);
            border-radius: 6px;
            padding: 12px 14px;
            outline: none;
            width: 100%;
            box-sizing: border-box;
            transition: border-color 0.18s, box-shadow 0.18s;
        }
        .donate-fi:focus {
            border-color: #7DA371;
            box-shadow: 0 0 0 3px rgba(125,163,113,0.2);
        }
    </style>

    <!-- Fixed nav wrapper — transparent until scrolled -->
    <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: 63vh;">
                <img
                    class="absolute inset-0 h-full w-full object-cover"
                    style="object-position: 50% 38%;"
                    alt=""
                    src="/hero-home.webp"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.52) 100%);"
                />

                <!-- Hero content -->
                <div
                    class="relative flex flex-col"
                    style="min-height: 63vh; padding: 120px 28px 72px;"
                >
                    <!-- Headline block -->
                    <div class="anim-fade-up" style="max-width: 640px; margin-top: 16px;">
                        <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.75);">
                            Highland Group RDA · Since 1975
                        </p>
                        <div style="margin-top: 14px; width: 48px; height: 2px; background: #7DA371;" />
                        <h1 style="margin-top: 18px; font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 62px); color: #F6F1E8; line-height: 1.12;">
                            {heroHeadline}
                        </h1>
                    </div>

                    <!-- Mission blockquote -->
                    <div
                        class="anim-fade-up2"
                        style="margin-top: auto; max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
                    >
                        <div style="width: 32px; height: 3px; background: #7DA371; margin-bottom: 14px;" />
                        <blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: #F6F1E8; line-height: 1.55; margin: 0;">
                            {heroMission}
                        </blockquote>
                    </div>
                </div>

                <!-- Donate button (absolute, hidden on mobile) -->
                <button
                    onclick="openDonateModal()"
                    class="absolute hero-donate"
                    style="bottom: 40px; right: 28px; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: #fff; border: none; border-radius: 9999px; padding: 16px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: background 0.18s ease;"
                    onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'"
                    aria-label="Open donation form"
                >
                    Donate
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                </button>

                <!-- Scroll indicator (absolute, hidden on mobile) -->
                <div
                    class="scroll-indicator absolute"
                    style="bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.6;"
                >
                    <div style="width: 1px; height: 36px; background: white;" />
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: white;">
                        Scroll
                    </p>
                </div>
            </section>

            <!-- ── VIDEO ── -->
            <section style="background: #1e2e1a; padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 56px);">
                <div style="max-width: 960px; margin: 0 auto;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; margin-bottom: 12px;">
                        Our Story
                    </p>
                    <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 3vw, 38px); color: #F6F1E8; margin-bottom: 20px; line-height: 1.2; max-width: 600px;">
                        {videoHeading}
                    </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.65; max-width: 680px; margin-bottom: 40px;">
                        {videoBody}
                    </p>
                    <div class="video-embed" style="max-width: 860px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
                        <iframe
                            src={`https://www.youtube.com/embed/${videoYoutubeId}?rel=0&modestbranding=1`}
                            title="What is Riding for the Disabled Association (RDA)?"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen
                        />
                    </div>
                </div>
            </section>

            <!-- ── INTRO STRIP ── -->
            <section style="background: #f5d445; padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 56px);">
                <div style="max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
                    <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #000; line-height: 1.4; max-width: 700px;">
                        Find out more about <a href="/about" style="text-decoration: underline; color: inherit;">who we are</a>, what we do, and <a href="/support-us" style="text-decoration: underline; color: inherit;">how you can support us</a> to help make a difference.
                    </p>
                    <button
                        onclick="openDonateModal()"
                        style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; border: none; border-radius: 9999px; padding: 16px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease;"
                        onmouseover="this.style.background='#222'" onmouseout="this.style.background='#000'"
                        aria-label="Open donation form"
                    >
                        Donate now
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                    </button>
                </div>
            </section>

            <!-- ── CTA EDITORIAL ── -->
            <div class="cta-editorial">
                {ctaCards.map((card) => (
                    <a class="cta-card" href={card.href}>
                        <img
                            class="cta-card-img"
                            src={card.image ?? ''}
                            alt={card.title}
                            style="object-position: 50% 35%;"
                            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 32px; 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: rgba(255,255,255,0.65); margin-bottom: 8px;">
                                {card.label}
                            </p>
                            <h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); color: white; line-height: 1.2; margin-bottom: 10px;">
                                {card.title}
                            </h3>
                            <p class="cta-sub" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 260px;">
                                {card.description}
                            </p>
                            <div class="cta-more" style="margin-top: 16px; 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;">
                                    Find out more
                                </span>
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M3 8h10M9 4l4 4-4 4"/>
                                </svg>
                            </div>
                        </div>
                    </a>
                ))}
            </div>

            <!-- ── SPONSORS ── -->
            <section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 5vw, 56px);">
                <div style="max-width: 1100px; margin: 0 auto;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; text-align: center; margin-bottom: 10px;">
                        Supporters &amp; Sponsors
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 32px;" />
                    <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; text-align: center; margin-bottom: 48px; line-height: 1.2;">
                        {sponsorHeading}
                    </p>

                    <!-- Current sponsors -->
                    <div style="display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; margin-bottom: 64px;">
                        {sponsors.map((s) => (
                            <div class="sponsor-logo">
                                {s.url
                                    ? <a href={s.url} target="_blank" rel="noreferrer"><img src={s.logo ?? ''} alt={s.name} loading="lazy" decoding="async" /></a>
                                    : <img src={s.logo ?? ''} alt={s.name} loading="lazy" decoding="async" />
                                }
                            </div>
                        ))}
                    </div>

                    <!-- Corporate sponsorship package -->
                    <div style="border-top: 1px solid rgba(255,255,255,0.12); padding-top: 56px;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; text-align: center; margin-bottom: 12px;">
                            Corporate Sponsorship
                        </p>
                        <h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; text-align: center; margin-bottom: 12px; line-height: 1.2;">
                            Sponsor one of our horses — £750 per year
                        </h3>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.7); text-align: center; max-width: 620px; margin: 0 auto 48px; line-height: 1.65;">
                            Your sponsorship covers the annual livery costs of one of our horses, making a direct and lasting difference to the lives of our participants.
                        </p>

                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto 48px;">
                            <div style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 24px 22px;">
                                <div style="width: 32px; height: 32px; background: #7DA371; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="white" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.5 6.5l-4 4-2-2-1 1 3 3 5-5-1-1z"/></svg>
                                </div>
                                <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px; color: #F6F1E8; margin-bottom: 8px; line-height: 1.3;">Social media recognition</p>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(246,241,232,0.65); line-height: 1.6;">Your company featured in our posts on Facebook and Instagram, and in any press coverage we receive.</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 24px 22px;">
                                <div style="width: 32px; height: 32px; background: #7DA371; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="white" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.5 6.5l-4 4-2-2-1 1 3 3 5-5-1-1z"/></svg>
                                </div>
                                <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px; color: #F6F1E8; margin-bottom: 8px; line-height: 1.3;">Branded banner at Sandycroft</p>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(246,241,232,0.65); line-height: 1.6;">A 1m × 1.8m printed banner with your company logo displayed at our Sandycroft base, seen by volunteers, participants, and the public.</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 24px 22px;">
                                <div style="width: 32px; height: 32px; background: #7DA371; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="white" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.5 6.5l-4 4-2-2-1 1 3 3 5-5-1-1z"/></svg>
                                </div>
                                <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px; color: #F6F1E8; margin-bottom: 8px; line-height: 1.3;">Logo on our website</p>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(246,241,232,0.65); line-height: 1.6;">Your company logo displayed as a sponsor banner on the Highland Group RDA website.</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 24px 22px;">
                                <div style="width: 32px; height: 32px; background: #7DA371; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="white" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm3.5 6.5l-4 4-2-2-1 1 3 3 5-5-1-1z"/></svg>
                                </div>
                                <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px; color: #F6F1E8; margin-bottom: 8px; line-height: 1.3;">Event invitations &amp; pony updates</p>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(246,241,232,0.65); line-height: 1.6;">Invitations to Highland Group RDA events, plus three-monthly updates on the specific pony you are sponsoring.</p>
                            </div>
                        </div>

                        <div style="text-align: center;">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 15px; color: rgba(246,241,232,0.8); margin-bottom: 20px;">
                                Interested in becoming a corporate sponsor?
                            </p>
                            <a href="/contact" style="display: inline-block; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #1e2e1a; background: #7DA371; border-radius: 999px; padding: 12px 28px; text-decoration: none; transition: opacity 0.2s ease;">
                                Get in touch
                            </a>
                            <span style="display: inline-block; margin: 0 12px; color: rgba(246,241,232,0.4); font-size: 14px;">or</span>
                            <a href="/support-us" style="display: inline-block; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,241,232,0.85); border: 1px solid rgba(246,241,232,0.3); border-radius: 999px; padding: 12px 28px; text-decoration: none;">
                                Support us
                            </a>
                        </div>
                    </div>
                </div>
            </section>

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

    <!-- ── DONATE MODAL ── -->
    <div id="donate-overlay" class="donate-overlay" role="dialog" aria-modal="true" aria-labelledby="donate-modal-title">
        <div id="donate-panel" class="donate-panel">

            <!-- Header -->
            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px;">
                <div>
                    <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:10px;">Donate · Highland Group RDA</p>
                    <h2 id="donate-modal-title" style="font-family:'Merriweather',serif;font-weight:900;font-size:clamp(22px,2.6vw,30px);color:#000;line-height:1.2;margin:0;">Make a donation</h2>
                    <p id="donate-header-sub" style="margin-top:6px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:14px;color:rgba(0,0,0,0.6);line-height:1.5;">Every gift goes directly to our ponies and riders.</p>
                </div>
                <button onclick="closeDonateModal()" aria-label="Close"
                    style="flex-shrink:0;width:38px;height:38px;border-radius:9999px;border:none;background:rgba(0,0,0,0.07);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.18s;"
                    onmouseover="this.style.background='rgba(0,0,0,0.14)'" onmouseout="this.style.background='rgba(0,0,0,0.07)'">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg>
                </button>
            </div>

            <!-- Running total chip -->
            <div id="donate-total-chip" style="display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#1e2e1a;color:#F6F1E8;border-radius:7px;padding:14px 18px;margin-bottom:22px;">
                <span id="donate-chip-label" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(246,241,232,0.6);">Your gift</span>
                <span>
                    <span id="donate-chip-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:26px;color:#F6F1E8;">£25</span>
                    <span id="donate-chip-freq" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.6);margin-left:4px;">/ month</span>
                    <span id="donate-chip-ga" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#7DA371;margin-left:10px;"></span>
                </span>
            </div>

            <!-- ─── STEP: AMOUNT ─── -->
            <div id="donate-step-amount">
                <!-- Mode toggle -->
                <div role="tablist" style="display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,0.06);border:1.5px solid rgba(0,0,0,0.1);border-radius:9999px;padding:4px;margin-bottom:22px;">
                    <button id="donate-tab-oneoff" role="tab" aria-selected="true" type="button" onclick="dSetMode('oneoff')"
                        style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.02em;padding:11px 18px;border-radius:9999px;border:none;cursor:pointer;background:#000;color:#fff;transition:all 0.22s;">
                        One-off donation
                    </button>
                    <button id="donate-tab-monthly" role="tab" aria-selected="false" type="button" onclick="dSetMode('monthly')"
                        style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.02em;padding:11px 18px;border-radius:9999px;border:none;cursor:pointer;background:transparent;color:rgba(0,0,0,0.55);transition:all 0.22s;">
                        Monthly donation
                    </button>
                </div>

                <!-- Choose an amount label -->
                <p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(0,0,0,0.55);margin-bottom:12px;">Choose an amount</p>

                <!-- 2×2 chips grid — filled by JS -->
                <div id="donate-chips-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;"></div>

                <!-- "Or another amount" inline row -->
                <div style="display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid rgba(0,0,0,0.12);border-radius:7px;padding:14px 16px;margin-bottom:22px;">
                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:14px;color:rgba(0,0,0,0.55);">Or another amount</span>
                    <span style="margin-left:auto;font-family:'Merriweather',serif;font-weight:900;font-size:22px;color:rgba(0,0,0,0.65);">£</span>
                    <input id="donate-other" type="number" inputmode="decimal" min="1" placeholder="0"
                        oninput="dOnOther()"
                        style="width:86px;text-align:right;font-family:'Merriweather',serif;font-weight:900;font-size:22px;border:none;outline:none;background:transparent;color:#000;" />
                    <span id="donate-other-mo" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.55);">/ month</span>
                </div>

                <!-- Gift Aid block -->
                <div style="background:rgba(0,0,0,0.03);border:1.5px solid rgba(0,0,0,0.1);border-radius:7px;padding:16px 18px;margin-bottom:22px;">
                    <div style="display:flex;gap:12px;cursor:pointer;align-items:flex-start;" onclick="dToggleGA()">
                        <span id="donate-ga-box"
                            style="flex-shrink:0;width:22px;height:22px;border-radius:4px;margin-top:1px;background:#fff;border:1.5px solid rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;transition:all 0.18s;">
                        </span>
                        <span>
                            <span style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#000;display:block;margin-bottom:4px;">Make my donation worth 25% more with Gift Aid</span>
                            <span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(0,0,0,0.6);line-height:1.5;">I'm a UK taxpayer and I'd like Highland Group RDA to reclaim Gift Aid on my donation and any donations I make in the future or have made in the last four years.</span>
                        </span>
                    </div>
                    <!-- Expandable name/address fields -->
                    <div id="donate-ga-fields" style="overflow:hidden;max-height:0;transition:max-height 0.4s ease;">
                        <div style="display:flex;flex-direction:column;gap:10px;padding-top:16px;">
                            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                                <label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
                                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">First name</span>
                                    <input type="text" placeholder="Jane" class="donate-fi" />
                                </label>
                                <label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
                                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Last name</span>
                                    <input type="text" placeholder="MacDonald" class="donate-fi" />
                                </label>
                            </div>
                            <label style="display:flex;flex-direction:column;gap:6px;">
                                <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Home address</span>
                                <input type="text" placeholder="House number and street" class="donate-fi" />
                            </label>
                            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                                <label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
                                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Town</span>
                                    <input type="text" placeholder="Inverness" class="donate-fi" />
                                </label>
                                <label style="display:flex;flex-direction:column;gap:6px;flex:1 1 120px;">
                                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Postcode</span>
                                    <input type="text" placeholder="IV5 7PP" class="donate-fi" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Continue button -->
                <button type="button" id="donate-continue-btn" onclick="dProceed()"
                    style="display:inline-flex;align-items:center;gap:10px;background:#7DA371;color:#fff;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;padding:16px 28px;border-radius:9999px;transition:background 0.18s;"
                    onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
                    Continue to payment
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                </button>
            </div>

            <!-- ─── STEP: PAY ─── -->
            <div id="donate-step-pay" style="display:none;">
                <!-- Back -->
                <button type="button" onclick="dBack()"
                    style="background:transparent;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.6);display:inline-flex;align-items:center;gap:6px;padding:0;margin-bottom:20px;">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="transform:rotate(180deg);"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                    Back to amount
                </button>

                <!-- Express checkout -->
                <p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(0,0,0,0.55);margin-bottom:12px;">Express checkout</p>
                <div style="display:flex;gap:8px;margin-bottom:20px;">
                    <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" onclick="closeDonateModal()"
                        style="flex:1;height:46px;border-radius:6px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;gap:4px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:14px;transition:filter 0.18s;"
                        onmouseover="this.style.filter='brightness(0.8)'" onmouseout="this.style.filter='none'">
                        <svg width="13" height="15" viewBox="0 0 14 16" fill="white" aria-hidden="true"><path d="M10.4 8.5c0-1.9 1.5-2.8 1.6-2.8-.9-1.3-2.2-1.5-2.7-1.5-1.2-.1-2.2.7-2.8.7-.6 0-1.5-.7-2.5-.6-1.3 0-2.5.7-3.1 1.9-1.4 2.3-.3 5.8 1 7.6.7.9 1.5 1.9 2.5 1.8 1 0 1.4-.6 2.6-.6 1.2 0 1.5.6 2.6.6 1.1 0 1.8-.9 2.4-1.8.4-.6.7-1.1.9-1.9-1.5-.6-2.5-1.8-2.5-3.4zM8.6 2.8c.6-.7 1-1.7.8-2.7-.9 0-1.9.5-2.5 1.2-.5.6-1 1.6-.9 2.6 1 .1 2-.5 2.6-1.1z"/></svg>
                        Pay
                    </a>
                    <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" onclick="closeDonateModal()"
                        style="flex:1;height:46px;border-radius:6px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;transition:filter 0.18s;"
                        onmouseover="this.style.filter='brightness(0.8)'" onmouseout="this.style.filter='none'">
                        <span style="font-weight:600;"><span style="color:#4285F4;">G</span>Pay</span>
                    </a>
                    <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" onclick="closeDonateModal()"
                        style="flex:1;height:46px;border-radius:6px;background:#FFC439;display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:Verdana,sans-serif;font-weight:900;font-style:italic;font-size:15px;letter-spacing:-0.02em;transition:filter 0.18s;"
                        onmouseover="this.style.filter='brightness(0.92)'" onmouseout="this.style.filter='none'">
                        <span style="color:#003087;">Pay</span><span style="color:#009CDE;">Pal</span>
                    </a>
                </div>

                <!-- Or divider -->
                <div style="display:flex;align-items:center;gap:12px;margin:4px 0 20px;">
                    <div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(0,0,0,0.45);">Or pay with card</span>
                    <div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
                </div>

                <!-- Card form (visual mock) -->
                <div style="display:flex;flex-direction:column;gap:14px;margin-bottom:16px;">
                    <label style="display:flex;flex-direction:column;gap:6px;">
                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Email</span>
                        <input type="email" placeholder="you@example.com" class="donate-fi" />
                    </label>
                    <label style="display:flex;flex-direction:column;gap:6px;">
                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Card information</span>
                        <div style="background:#fff;border:1.5px solid rgba(0,0,0,0.15);border-radius:6px;display:flex;align-items:center;overflow:hidden;">
                            <input type="text" placeholder="1234 1234 1234 1234"
                                style="flex:1;padding:12px 14px;border:none;outline:none;font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;background:transparent;" />
                            <div style="display:flex;align-items:center;gap:4px;padding-right:10px;">
                                <span style="display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 5px;border-radius:3px;background:#1A1F71;color:#fff;font-family:'Public Sans',sans-serif;font-weight:900;font-size:9px;letter-spacing:0.04em;">VISA</span>
                                <span style="display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 5px;border-radius:3px;background:#EB001B;color:#fff;font-family:'Public Sans',sans-serif;font-weight:900;font-size:9px;">MC</span>
                                <span style="display:inline-flex;align-items:center;justify-content:center;height:18px;padding:0 5px;border-radius:3px;background:#016FD0;color:#fff;font-family:'Public Sans',sans-serif;font-weight:900;font-size:9px;">AMEX</span>
                            </div>
                        </div>
                    </label>
                    <div style="display:flex;gap:10px;">
                        <label style="display:flex;flex-direction:column;gap:6px;flex:1;">
                            <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Expiry</span>
                            <input type="text" placeholder="MM / YY" class="donate-fi" />
                        </label>
                        <label style="display:flex;flex-direction:column;gap:6px;flex:1;">
                            <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">CVC</span>
                            <input type="text" placeholder="123" class="donate-fi" />
                        </label>
                    </div>
                    <label style="display:flex;flex-direction:column;gap:6px;">
                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Name on card</span>
                        <input type="text" placeholder="Full name" class="donate-fi" />
                    </label>
                    <div style="display:flex;gap:10px;">
                        <label style="display:flex;flex-direction:column;gap:6px;flex:1;">
                            <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Country</span>
                            <select class="donate-fi" style="cursor:pointer;appearance:none;">
                                <option>United Kingdom</option>
                                <option>Ireland</option>
                                <option>United States</option>
                                <option>Other</option>
                            </select>
                        </label>
                        <label style="display:flex;flex-direction:column;gap:6px;flex:1;">
                            <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.65);">Postcode</span>
                            <input type="text" placeholder="IV5 7PP" class="donate-fi" />
                        </label>
                    </div>
                </div>

                <!-- Direct Debit note (monthly only) -->
                <div id="donate-dd-note" style="display:none;margin-bottom:16px;padding:12px 14px;background:rgba(0,0,0,0.04);border-radius:6px;border:1px dashed rgba(0,0,0,0.18);">
                    <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#000;margin-bottom:4px;">Prefer Direct Debit?</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;">We can also set up your monthly gift via Direct Debit (BACS). <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" style="text-decoration:underline;">Donate via JustGiving →</a></p>
                </div>

                <!-- Donate button -->
                <button type="button" id="donate-pay-btn" onclick="dComplete()"
                    style="margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#7DA371;color:#fff;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;padding:16px 28px;border-radius:9999px;box-sizing:border-box;transition:background 0.18s;"
                    onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
                    <svg width="12" height="13" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></svg>
                    <span id="donate-pay-label">Donate £25</span>
                </button>

                <!-- Trust row -->
                <div style="display:flex;flex-wrap:wrap;gap:16px;row-gap:8px;align-items:center;padding-top:16px;border-top:1px solid rgba(0,0,0,0.1);margin-top:16px;">
                    <span style="display:inline-flex;align-items:center;gap:5px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.55);">
                        <svg width="11" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></svg>
                        Secured by <span style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;color:#635BFF;margin-left:2px;">stripe</span>
                    </span>
                    <span id="donate-trust-cancel" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.55);">You can cancel anytime</span>
                    <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px;color:rgba(0,0,0,0.55);">Charity SC007357</span>
                </div>
            </div>

            <!-- ─── STEP: DONE ─── -->
            <div id="donate-step-done" style="display:none;">
                <div style="display:flex;flex-direction:column;gap:16px;padding:32px 0 8px;text-align:left;">
                    <div style="width:56px;height:56px;border-radius:9999px;background:#7DA371;display:flex;align-items:center;justify-content:center;">
                        <svg width="28" height="28" 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 8l3.5 3.5L13 5"/></svg>
                    </div>
                    <h3 style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;color:#000;line-height:1.2;">Thank you — from all of us at Highland Group RDA.</h3>
                    <p id="donate-done-msg" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px;color:rgba(0,0,0,0.7);line-height:1.6;max-width:520px;"></p>
                    <button type="button" onclick="closeDonateModal()"
                        style="align-self:flex-start;margin-top:8px;background:transparent;color:#000;border:1.5px solid #7DA371;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;padding:12px 24px;border-radius:9999px;transition:background 0.18s;"
                        onmouseover="this.style.background='rgba(125,163,113,0.1)'" onmouseout="this.style.background='transparent'">
                        Close
                    </button>
                </div>
            </div>

        </div>
    </div>

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

        // ── Donate modal ──
        const D_PRESETS = {
            oneoff: [
                { amount: 10,  impact: 'Hay for a pony for two days' },
                { amount: 25,  impact: "Funds one rider's session" },
                { amount: 50,  impact: 'Covers a routine vet visit' },
                { amount: 100, impact: 'A full week of farriery' },
            ],
            monthly: [
                { amount: 5,   impact: 'A grooming kit each month' },
                { amount: 10,  impact: 'Helps feed our ponies' },
                { amount: 20,  impact: 'Funds a weekly session' },
                { amount: 35,  impact: "A pony's regular farriery" },
            ],
        };

        let _dMode = 'oneoff';
        let _dAmt  = 25;
        let _dOther = '';
        let _dGA   = false;

        function dGetAmt() {
            const v = Number(_dOther);
            return (_dOther && v > 0) ? v : _dAmt;
        }

        function dRenderChips() {
            const grid = document.getElementById('donate-chips-grid');
            if (!grid) return;
            const presets = D_PRESETS[_dMode];
            const noOther = !_dOther;
            grid.innerHTML = presets.map(({ amount, impact }) => {
                const sel = noOther && _dAmt === amount;
                return `<button type="button" onclick="dSelectChip(${amount})"
                    style="text-align:left;cursor:pointer;
                    background:${sel ? '#000' : '#fff'};
                    color:${sel ? '#fff' : '#000'};
                    border:1.5px solid ${sel ? '#000' : 'rgba(0,0,0,0.12)'};
                    border-radius:7px;padding:16px 18px;
                    display:flex;flex-direction:column;gap:4px;
                    transition:all 0.18s;"
                    onmouseover="if(this.dataset.sel!=='1'){this.style.borderColor='rgba(0,0,0,0.3)';}"
                    onmouseout="if(this.dataset.sel!=='1'){this.style.borderColor='rgba(0,0,0,0.12)';}"
                    data-sel="${sel ? '1' : '0'}">
                    <span style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;line-height:1;">£${amount}</span>
                    <span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;line-height:1.4;opacity:${sel ? 0.9 : 0.75};">${impact}</span>
                </button>`;
            }).join('');
        }

        function dUpdateChip() {
            const amt = dGetAmt();
            const gaAmt = _dGA && amt > 0 ? Math.round(amt * 0.25 * 100) / 100 : 0;
            const el = (id) => document.getElementById(id);
            if (el('donate-chip-label')) el('donate-chip-label').textContent = _dMode === 'monthly' ? 'Your monthly gift' : 'Your gift';
            if (el('donate-chip-amount')) el('donate-chip-amount').textContent = '£' + (Number.isFinite(amt) ? amt : 0);
            if (el('donate-chip-freq')) el('donate-chip-freq').style.display = _dMode === 'monthly' ? 'inline' : 'none';
            if (el('donate-chip-ga')) {
                el('donate-chip-ga').style.display = (_dGA && amt > 0) ? 'inline' : 'none';
                el('donate-chip-ga').textContent = `+ £${gaAmt.toFixed(2)} Gift Aid`;
            }
            // Update pay button label
            const gaTotal = amt + gaAmt;
            const payLabel = el('donate-pay-label');
            if (payLabel) {
                payLabel.textContent = `Donate £${Number.isFinite(amt) ? amt : 0}${_dMode === 'monthly' ? ' / month' : ''}${_dGA && amt > 0 ? ` (£${gaTotal.toFixed(2)} with Gift Aid)` : ''}`;
            }
        }

        function dSelectChip(amount) {
            _dAmt = amount;
            _dOther = '';
            const inp = document.getElementById('donate-other');
            if (inp) inp.value = '';
            dRenderChips();
            dUpdateChip();
        }

        function dOnOther() {
            const inp = document.getElementById('donate-other');
            _dOther = inp ? inp.value : '';
            dRenderChips();
            dUpdateChip();
        }

        function dSetMode(mode) {
            _dMode = mode;
            const toOne = document.getElementById('donate-tab-oneoff');
            const toMo  = document.getElementById('donate-tab-monthly');
            if (toOne) { toOne.style.background = mode === 'oneoff' ? '#000' : 'transparent'; toOne.style.color = mode === 'oneoff' ? '#fff' : 'rgba(0,0,0,0.55)'; toOne.setAttribute('aria-selected', String(mode === 'oneoff')); }
            if (toMo)  { toMo.style.background  = mode === 'monthly' ? '#000' : 'transparent'; toMo.style.color  = mode === 'monthly' ? '#fff' : 'rgba(0,0,0,0.55)'; toMo.setAttribute('aria-selected', String(mode === 'monthly')); }
            _dAmt = mode === 'oneoff' ? 25 : 10;
            _dOther = '';
            const inp = document.getElementById('donate-other');
            if (inp) inp.value = '';
            const moTag = document.getElementById('donate-other-mo');
            if (moTag) moTag.style.display = mode === 'monthly' ? 'inline' : 'none';
            dRenderChips();
            dUpdateChip();
        }

        function dToggleGA() {
            _dGA = !_dGA;
            const box    = document.getElementById('donate-ga-box');
            const fields = document.getElementById('donate-ga-fields');
            if (box) {
                box.style.background    = _dGA ? '#7DA371' : '#fff';
                box.style.borderColor   = _dGA ? '#7DA371' : 'rgba(0,0,0,0.3)';
                box.innerHTML = _dGA
                    ? '<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8l3.5 3.5L13 5"/></svg>'
                    : '';
            }
            if (fields) fields.style.maxHeight = _dGA ? '420px' : '0';
            dUpdateChip();
        }

        function dProceed() {
            const el = (id) => document.getElementById(id);
            el('donate-step-amount').style.display = 'none';
            el('donate-step-pay').style.display = 'block';
            const dd = el('donate-dd-note');
            if (dd) dd.style.display = _dMode === 'monthly' ? 'block' : 'none';
            const tc = el('donate-trust-cancel');
            if (tc) tc.style.display = _dMode === 'monthly' ? 'inline' : 'none';
            dUpdateChip();
            document.getElementById('donate-overlay')?.scrollTo(0, 0);
        }

        function dBack() {
            document.getElementById('donate-step-pay').style.display = 'none';
            document.getElementById('donate-step-amount').style.display = 'block';
        }

        function dComplete() {
            const amt = dGetAmt();
            const gaAmt = _dGA && amt > 0 ? Math.round(amt * 0.25 * 100) / 100 : 0;
            const el = (id) => document.getElementById(id);
            el('donate-step-pay').style.display = 'none';
            el('donate-step-done').style.display = 'block';
            el('donate-total-chip').style.display = 'none';
            el('donate-modal-title').textContent = 'Thank you.';
            el('donate-header-sub').style.display = 'none';
            const msg = el('donate-done-msg');
            if (msg) {
                msg.innerHTML = `Your ${_dMode === 'monthly' ? 'monthly' : 'one-off'} gift of <strong>£${Number.isFinite(amt) ? amt : 0}</strong>${_dGA ? ` (worth £${(amt + gaAmt).toFixed(2)} with Gift Aid)` : ''} goes directly to our ponies and riders. A receipt is on its way to your inbox.`;
            }
            document.getElementById('donate-overlay')?.scrollTo(0, 0);
        }

        function openDonateModal() {
            const el = (id) => document.getElementById(id);
            // Reset state
            _dMode = 'oneoff'; _dAmt = 25; _dOther = ''; _dGA = false;
            // Reset UI
            dSetMode('oneoff');
            const gaBox = el('donate-ga-box');
            const gaFields = el('donate-ga-fields');
            const otherInp = el('donate-other');
            if (gaBox) { gaBox.style.background = '#fff'; gaBox.style.borderColor = 'rgba(0,0,0,0.3)'; gaBox.innerHTML = ''; }
            if (gaFields) gaFields.style.maxHeight = '0';
            if (otherInp) otherInp.value = '';
            // Reset steps
            el('donate-step-amount').style.display = 'block';
            el('donate-step-pay').style.display = 'none';
            el('donate-step-done').style.display = 'none';
            el('donate-total-chip').style.display = 'flex';
            el('donate-modal-title').textContent = 'Make a donation';
            const sub = el('donate-header-sub');
            if (sub) sub.style.display = 'block';
            dRenderChips();
            dUpdateChip();
            // Open overlay with animation
            const overlay = el('donate-overlay');
            if (overlay) {
                overlay.style.display = 'flex';
                document.body.style.overflow = 'hidden';
                requestAnimationFrame(() => requestAnimationFrame(() => overlay.classList.add('visible')));
            }
        }

        function closeDonateModal() {
            const overlay = document.getElementById('donate-overlay');
            if (!overlay) return;
            overlay.classList.remove('visible');
            document.body.style.overflow = '';
            setTimeout(() => { overlay.style.display = 'none'; }, 300);
        }

        document.getElementById('donate-overlay')?.addEventListener('click', function(e) {
            if (e.target === this) closeDonateModal();
        });
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') closeDonateModal();
        });

        Object.assign(window, { openDonateModal, closeDonateModal, dSetMode, dSelectChip, dOnOther, dToggleGA, dProceed, dBack, dComplete });

        dRenderChips();
        dUpdateChip();
    </script>
</BaseLayout>