---
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: "About",
    description:
        "Highland Group RDA is a volunteer-led charity offering therapeutic horse riding in the Highlands. Learn about our mission, history, and community impact.",
    keywords:
        "Highland Group RDA, about Highland RDA, RDA charity, volunteer-led charity Scotland, therapeutic riding, equestrian therapy Highlands",
    canonicalPath: "/about",
};

const stats = [
    { number: "1975",    label: "Founded" },
    { number: "50+",     label: "Years serving the Highlands" },
    { number: "Free",    label: "Sessions for all participants" },
    { number: "Tue–Fri", label: "Morning sessions" },
];

const ponies = [
    { name: "Breagh",      img: "/Breagh-bc8e70e8-2880w.webp",      details: "13.2hh · Mare · 15 yo",    desc: "She is very willing and independent",       pos: "50% 50%" },
    { name: "Connolly",    img: "/connolly-73f3e69f-2880w-2.webp",   details: "14.2hh · Gelding · 16 yo", desc: "A true gentleman and everyone's friend",    pos: "50% 50%" },
    { name: "Harley",      img: "/Harley-6ece9eca-2880w.webp",       details: "15.3hh · Gelding · 15 yo", desc: "He is the boss but very obliging",           pos: "50% 50%" },
    { name: "Puzzle",      img: "/puzzle-5de6e325-2880w.webp",       details: "15.3hh · Mare · 14 yo",    desc: "She is very sensitive and gentle",          pos: "50% 50%" },
    { name: "Lady Suede",  img: "/Suede-2880w.webp",                 details: "13hh · Mare · 23 yo",      desc: "RIP October 2024",                          pos: "50% 50%", memorial: true },
    { name: "Wispa",       img: "/Wispa-2880w.webp",                 details: "14.2hh · Gelding · 15 yo", desc: "RIP 2025",                                  pos: "50% 20%", memorial: true },
];

const testimonials = [
    "Riding helps to correct her posture and protects the spine and hips while it strengthens the muscles. More than that, it gives a sense of achievement and of being just as 'able-bodied' as everyone else on the back of a horse.",
    "He feels the responsibility of controlling such a large and powerful animal and it helps him understand life just that bit better. It's also very calming for him, especially at the end of a session when he can nurture the horse by brushing her and giving her some hay.",
    "We cannot thank the team at RDA Highland enough for what they've done for our child. To see only the individual and the pure joy of achievement, and not the disability is a tremendous gift. Our whole family benefits from these sessions. Thank you.",
    "RDA's gentle, calm and serene atmosphere coupled with the warm sentient creature that she can bond with and enjoy without needing words. I think it helps her to feel calm and grounded and gives a huge sense of achievement. RDA is such an important part of our lives.",
];
---

<BaseLayout {...pageSeo}>
    <Fragment slot="head">
        <link
            rel="preload"
            as="image"
            href="/about-960.webp"
            imagesrcset="/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w"
            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; }

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

        .stat-card { transition: transform 0.25s ease; }
        .stat-card:hover { transform: translateY(-3px); }

        @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; }
            .who-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .location-grid { grid-template-columns: 1fr !important; }
        }
    </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: 68vh;">
                <img
                    class="absolute inset-0 h-full w-full object-cover"
                    style="object-position: 50% 42%;"
                    alt=""
                    src="/about-960.webp"
                    srcset="/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w"
                    sizes="100vw"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.75) 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: 68vh; padding: 120px 28px 64px;"
                >
                    <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;">
                            About 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, 58px); color: #F6F1E8; line-height: 1.1;">
                            Enriching lives through horses in the Highlands since 1975.
                        </h1>
                        <p style="margin-top: 22px; 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: 580px;">
                            We are a voluntary organisation based at Sandycroft, Reelig, Kirkhill — providing free therapeutic and recreational riding for people with disabilities across the Highlands.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ── MISSION ── -->
            <section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 860px; margin: 0 auto; text-align: center;">
                    <div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 28px;" />
                    <blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: clamp(18px, 2.2vw, 26px); color: #F6F1E8; line-height: 1.55;">
                        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.
                    </blockquote>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin: 28px auto 0;" />
                </div>
            </section>

            <!-- ── WHO WE ARE / WHAT WE DO ── -->
            <section style="background: #d6d6d6; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
                <div class="who-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px;">
                    <div>
                        <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;">Who we are</p>
                        <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 20px;">
                            A community of volunteers, coaches, and horses.
                        </h2>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7; margin-bottom: 16px;">
                            Highland Group RDA is entirely self-funded and run by committed volunteers and qualified coaches. We have been part of the community for over five decades, welcoming riders with a wide range of physical and mental disabilities.
                        </p>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7;">
                            We are a member of the national Riding for the Disabled Association (RDA) and the Grampian and Highland Regional RDA, and a registered Scottish Charitable Incorporated Organisation (<a href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357" target="_blank" rel="noreferrer" style="text-decoration: underline;">SC007357</a>).
                        </p>
                    </div>
                    <div>
                        <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;">What we do</p>
                        <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15; margin-bottom: 20px;">
                            Riding, carriage driving, and so much more.
                        </h2>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7; margin-bottom: 16px;">
                            We provide free riding and carriage driving sessions for participants with a wide range of disabilities. Working with horses improves balance, coordination, confidence, and provides a uniquely meaningful interaction with animals.
                        </p>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.7); line-height: 1.7;">
                            Sessions run Tuesday to Friday mornings from our base at Sandycroft. Each session is supported by trained volunteers and supervised by qualified coaches.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ── STATS ── -->
            <section style="background: #e2e2e2; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1100px; margin: 0 auto;">
                    <div class="stats-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;">
                        {stats.map((s) => (
                            <div class="stat-card" style="background: #d6d6d6; border-radius: 7px; padding: 36px 28px; text-align: center;">
                                <p style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(28px, 3vw, 42px); color: #7DA371; line-height: 1;">
                                    {s.number}
                                </p>
                                <p style="margin-top: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.6); letter-spacing: 0.05em; text-transform: uppercase;">
                                    {s.label}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <!-- ── OUR PONIES (image left, dark text right) ── -->
            <section class="split-panel" style="display: flex; width: 100%; min-height: 480px; overflow: hidden;">
                <div class="panel-wrap split-panel-img" style="flex: 0 0 55%; 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;">
                        Our ponies
                    </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: 20px;">
                        The heart of everything we do.
                    </h2>
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.78); line-height: 1.7; margin-bottom: 16px;">
                        Our ponies are carefully selected and trained to work safely with riders of all abilities. They are well cared for, happy, and central to the therapeutic experience we offer.
                    </p>
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.78); line-height: 1.7; margin-bottom: 32px;">
                        You can support them directly by sponsoring a pony — covering the costs of hoof trimming, hay, vet visits, and more.
                    </p>
                    <a
                        href="/support-us"
                        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 a pony
                        <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>

            <!-- ── PONY PROFILES ── -->
            <section style="background: #d6d6d6; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; 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;">
                        Meet the ponies
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 40px;" />
                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;">
                        {ponies.map((pony) => (
                            <div style={`background: ${pony.memorial ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.55)'}; border-radius: 7px; overflow: hidden;`}>
                                <div style="position: relative; height: 180px; overflow: hidden;">
                                    <img
                                        src={pony.img}
                                        alt={pony.name}
                                        style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos}; ${pony.memorial ? 'filter: grayscale(40%);' : ''}`}
                                        loading="lazy"
                                        decoding="async"
                                    />
                                </div>
                                <div style="padding: 18px 20px;">
                                    <h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #000; margin-bottom: 6px;">
                                        {pony.name}
                                    </h3>
                                    <p style={`font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: ${pony.memorial ? 'rgba(0,0,0,0.4)' : '#7DA371'}; margin-bottom: 4px;`}>
                                        {pony.details}
                                    </p>
                                    <p style={`font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: ${pony.memorial ? 'rgba(0,0,0,0.45)' : 'rgba(0,0,0,0.65)'}; line-height: 1.5;`}>
                                        {pony.desc}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <!-- ── TESTIMONIALS ── -->
            <section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; 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: #7DA371; margin-bottom: 14px;">
                        What families say
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 40px;" />
                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
                        {testimonials.map((quote) => (
                            <blockquote style="background: rgba(255,255,255,0.07); border-radius: 7px; padding: 28px; position: relative;">
                                <div style="width: 24px; height: 2px; background: #7DA371; margin-bottom: 16px;" />
                                <p style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 15px; color: rgba(246,241,232,0.85); line-height: 1.65;">
                                    "{quote}"
                                </p>
                            </blockquote>
                        ))}
                    </div>
                    <div style="margin-top: 40px; padding: 28px 32px; background: rgba(255,255,255,0.05); border-radius: 7px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
                        <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;">Featured story</p>
                            <h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #F6F1E8; line-height: 1.2; margin-bottom: 10px;">Samantha's Story</h3>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(246,241,232,0.75); line-height: 1.6; max-width: 560px;">
                                Read how Samantha's RDA sessions have not only improved her physical and mental wellbeing, but helped her overcome her prognosis of never being able to walk.
                            </p>
                        </div>
                        <a
                            href="/Star-Participants-Samantha-s-story.pdf"
                            target="_blank"
                            rel="noreferrer"
                            style="flex-shrink: 0; 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;"
                        >
                            Read her story (PDF)
                            <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>
            </section>

            <!-- ── OUR VOLUNTEERS (text left, image right) ── -->
            <section class="split-panel" style="display: flex; width: 100%; min-height: 420px; 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;">
                        Volunteers &amp; coaches
                    </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: 20px;">
                        We couldn't do it without you.
                    </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: 16px;">
                        Our sessions are made possible by a dedicated team of volunteers — side walkers, horse leaders, groomers, and more. You don't need any horse experience to join us.
                    </p>
                    <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;">
                        Qualified RDA coaches supervise all sessions and provide ongoing training and support for our volunteer team.
                    </p>
                    <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 50%; 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% 30%;"
                        loading="lazy"
                        decoding="async"
                    />
                </div>
            </section>

            <!-- ── LOCATION ── -->
            <section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
                <div class="location-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;">
                    <div>
                        <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;">
                            Find us
                        </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: 20px;">
                            Based at Sandycroft, Reelig.
                        </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: 8px;">
                            We are based at Sandycroft, Reelig, Kirkhill — on the outskirts of Inverness.
                        </p>
                        <address style="font-style: normal; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.65); line-height: 1.8; margin-bottom: 20px;">
                            Sandycroft, Reelig<br />
                            Kirkhill<br />
                            IV5 7PP
                        </address>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.6;">
                            Sessions: Tuesday to Friday mornings
                        </p>
                        <a
                            href="/contact"
                            style="margin-top: 24px; 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;"
                        >
                            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 style="height: 340px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);">
                        <iframe
                            title="Highland Group RDA location"
                            src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
                            style="width: 100%; height: 100%; border: 0; display: block;"
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                        ></iframe>
                    </div>
                </div>
            </section>

            <!-- ── CTA STRIP ── -->
            <section style="background: #f5d445; padding: clamp(36px, 6vw, 52px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;">
                    <div style="max-width: 640px;">
                        <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;">
                            We are able to carry out our life-changing activities thanks to you.
                        </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;">
                            Donate, volunteer, or sponsor a pony — every contribution makes a real difference.
                        </p>
                    </div>
                    <div style="display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; align-items: center;">
                        <a
                            href="/support-us"
                            style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: white; border-radius: 9999px; padding: 14px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
                        >
                            Support us
                        </a>
                        <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
                            <img
                                src="/Button.webp"
                                alt="Donate via JustGiving"
                                style="height: 46px; object-fit: contain; display: block;"
                                loading="lazy"
                            />
                        </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>
