---
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 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 monthly donation goes directly towards running our sessions, caring for our ponies, and keeping our facilities safe.",
        action: "Donate now",
        href: "#donate",
        external: false,
        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: "You can sponsor one of our ponies directly on this page — choose your pony, pick a sponsorship level, and set up your monthly gift in a few steps. You can cancel at any time.",
    },
];
---

<BaseLayout {...pageSeo}>
    <Fragment slot="head">
        <link
            rel="preload"
            as="image"
            href="/hero-support.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(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="/hero-support.webp"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.72) 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 WIDGET ── -->
            <section id="donate" style="background: #f5d445;">
                <!-- Collapsed header bar -->
                <div style="padding: clamp(28px, 4vw, 40px) 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: 6px;">
                                Donate today.
                            </h2>
                            <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;">
                                One-off or monthly — every gift goes directly to our riders and ponies.
                            </p>
                        </div>
                        <button id="dw-toggle-btn" onclick="dwOpen()"
                            style="flex-shrink:0;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:13px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background 0.18s ease;"
                            onmouseover="this.style.background='#222'" onmouseout="this.style.background='#000'">
                            Donate now
                            <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>
                        </button>
                    </div>
                </div>

                <!-- Expandable form panel -->
                <div id="dw-panel" style="display:none;opacity:0;transform:translateY(-8px);transition:opacity 0.3s ease,transform 0.3s ease;">
                    <div style="background:#F6F1E8;padding:clamp(28px,4vw,44px) clamp(24px,6vw,72px) clamp(32px,4vw,48px);">
                        <div style="max-width:1200px;margin:0 auto;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;">

                            <!-- Form column -->
                            <div style="flex:1 1 360px;min-width:0;">

                                <!-- Running total chip -->
                                <div id="dw-chip" style="display:flex;align-items:baseline;justify-content:space-between;gap:16px;background:#1e2e1a;color:#F6F1E8;border-radius:7px;padding:14px 18px;margin-bottom:22px;flex-wrap:wrap;">
                                    <span id="dw-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="dw-chip-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:26px;color:#F6F1E8;">£25</span>
                                        <span id="dw-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="dw-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>

                                <!-- Amount step -->
                                <div id="dw-step-amount">
                                    <div style="display:flex;background:rgba(0,0,0,0.08);border-radius:9999px;padding:4px;width:fit-content;margin-bottom:24px;">
                                        <button id="dw-tab-oneoff" onclick="dwSetMode('oneoff')"
                                            style="padding:9px 22px;border-radius:9999px;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.18s ease;background:#000;color:#fff;">
                                            One-off
                                        </button>
                                        <button id="dw-tab-monthly" onclick="dwSetMode('monthly')"
                                            style="padding:9px 22px;border-radius:9999px;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.18s ease;background:transparent;color:rgba(0,0,0,0.5);">
                                            Monthly
                                        </button>
                                    </div>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-bottom:12px;">Choose an amount</p>
                                    <div id="dw-chips-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;"></div>
                                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:24px;">
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);">Or</span>
                                        <div style="position:relative;flex:1;display:flex;align-items:center;">
                                            <span style="position:absolute;left:14px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px;color:rgba(0,0,0,0.5);">£</span>
                                            <input id="dw-other-input" type="number" min="1" placeholder="Other amount" oninput="dwOnOther()"
                                                style="width:100%;padding:12px 14px 12px 30px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px;background:white;outline:none;box-sizing:border-box;"
                                                onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                        </div>
                                        <span id="dw-other-mo" style="display:none;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);">/ mo</span>
                                    </div>
                                    <!-- Gift Aid -->
                                    <div style="background:white;border-radius:7px;padding:18px 20px;margin-bottom:24px;border:2px solid rgba(0,0,0,0.08);">
                                        <div onclick="dwToggleGA()" style="display:flex;align-items:flex-start;gap:14px;cursor:pointer;">
                                            <span id="dw-ga-check" style="flex-shrink:0;margin-top:2px;width:20px;height:20px;border-radius:5px;border:2px solid rgba(0,0,0,0.25);background:white;display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;">
                                                <svg id="dw-ga-tick" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0;transition:opacity 0.15s ease;"><path d="M2 6l3 3 5-5"/></svg>
                                            </span>
                                            <div>
                                                <p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#000;margin-bottom:2px;">Boost your donation with Gift Aid</p>
                                                <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(0,0,0,0.55);line-height:1.5;">We can claim 25p of Gift Aid for every £1 you give at no extra cost to you.</p>
                                            </div>
                                        </div>
                                        <div id="dw-ga-fields" style="max-height:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease;opacity:0;">
                                            <div style="margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                                                <input placeholder="First name" oninput="dwGaField('firstName',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                                <input placeholder="Last name" oninput="dwGaField('lastName',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                                <input placeholder="Address" oninput="dwGaField('address',this.value)" style="grid-column:1/-1;padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                                <input placeholder="Town / City" oninput="dwGaField('town',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                                <input placeholder="Postcode" oninput="dwGaField('postcode',this.value)" style="padding:10px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                            </div>
                                            <p style="margin-top:10px;font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(0,0,0,0.45);line-height:1.6;">I am a UK taxpayer and understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations in that tax year it is my responsibility to pay any difference.</p>
                                        </div>
                                    </div>
                                    <button onclick="dwProceed()"
                                        style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;"
                                        onmouseover="this.style.background='#2d4427'" onmouseout="this.style.background='#1e2e1a'">
                                        Continue to payment
                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#F6F1E8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                                    </button>
                                </div>

                                <!-- Pay step -->
                                <div id="dw-step-pay" style="display:none;">
                                    <button onclick="dwBack()" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);padding:0;margin-bottom:22px;">
                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
                                        Back
                                    </button>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-bottom:12px;">Express checkout</p>
                                    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;">
                                        <button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:black;color:white;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">Apple Pay</button>
                                        <button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:black;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">G Pay</button>
                                        <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer" style="display:flex;align-items:center;justify-content:center;padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:#003087;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;text-decoration:none;">PayPal</a>
                                    </div>
                                    <div style="display:flex;align-items:center;gap:12px;margin-bottom: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:12px;color:rgba(0,0,0,0.4);">Or pay with card</span>
                                        <div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
                                    </div>
                                    <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
                                        <input type="email" placeholder="Email address" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                        <input placeholder="Card number" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                                            <input placeholder="MM / YY" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                            <input placeholder="CVC" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                        </div>
                                        <input placeholder="Name on card" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                                            <select style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:white;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'">
                                                <option>United Kingdom</option>
                                                <option>United States</option>
                                                <option>Other</option>
                                            </select>
                                            <input placeholder="Postcode" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                        </div>
                                    </div>
                                    <div id="dw-dd-note" style="display:none;background:rgba(0,0,0,0.05);border-radius:7px;padding:12px 16px;margin-bottom:16px;">
                                        <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;">Monthly donations are collected via Direct Debit. You can cancel at any time.</p>
                                    </div>
                                    <button id="dw-pay-btn" onclick="dwComplete()"
                                        style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;margin-bottom:14px;"
                                        onmouseover="this.style.background='#2d4427'" onmouseout="this.style.background='#1e2e1a'">
                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#F6F1E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="12" height="9" rx="2"/><path d="M5 5V4a3 3 0 016 0v1"/></svg>
                                        <span id="dw-pay-label">Donate £25</span>
                                    </button>
                                    <div style="display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;">
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Secured by Stripe</span>
                                        <span style="color:rgba(0,0,0,0.2);">·</span>
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Cancel anytime</span>
                                        <span style="color:rgba(0,0,0,0.2);">·</span>
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">SC007357</span>
                                    </div>
                                </div>

                                <!-- Done step -->
                                <div id="dw-step-done" style="display:none;text-align:center;padding:40px 0 24px;">
                                    <div style="width:56px;height:56px;background:#7DA371;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                                    </div>
                                    <h3 style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;color:#000;margin-bottom:10px;">Thank you.</h3>
                                    <p id="dw-done-msg" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px;color:rgba(0,0,0,0.6);line-height:1.6;max-width:400px;margin:0 auto 28px;"></p>
                                    <button onclick="dwClose()" style="display:inline-flex;align-items:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;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;cursor:pointer;">
                                        Close
                                    </button>
                                </div>

                            </div>

                            <!-- Summary rail (desktop) -->
                            <div id="dw-rail" style="display:none;flex:0 0 260px;background:#1e2e1a;border-radius:7px;padding:28px 24px;align-self:flex-start;position:sticky;top:90px;">
                                <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,241,232,0.5);margin-bottom:16px;">Your support</p>
                                <div id="dw-rail-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:38px;color:#F6F1E8;margin-bottom:4px;">£25</div>
                                <div id="dw-rail-freq" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.5);margin-bottom:20px;">one-off gift</div>
                                <div id="dw-rail-impact" style="background:rgba(255,255,255,0.08);border-radius:6px;padding:14px 16px;margin-bottom:20px;">
                                    <p id="dw-rail-impact-text" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.75);line-height:1.5;"></p>
                                </div>
                                <div id="dw-rail-ga" style="display:none;">
                                    <div style="height:1px;background:rgba(255,255,255,0.1);margin-bottom:16px;"></div>
                                    <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.6);">Your gift</span>
                                        <span id="dw-rail-ga-base" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#F6F1E8;"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;margin-bottom:12px;">
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.6);">Gift Aid</span>
                                        <span id="dw-rail-ga-extra" style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:#7DA371;"></span>
                                    </div>
                                    <div style="display:flex;justify-content:space-between;">
                                        <span style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#F6F1E8;">Total to charity</span>
                                        <span id="dw-rail-ga-total" style="font-family:'Merriweather',serif;font-weight:900;font-size:16px;color:#F6F1E8;"></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <!-- ── SPONSOR A PONY ── -->
            <section id="sponsor">

                <!-- Step 0: Idle -->
                <div id="sp-idle" style="display:flex;width:100%;min-height:520px;overflow:hidden;" class="split-panel">
                    <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;"></div>
                        <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>
                        <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>
                        <button onclick="spStart()"
                            style="align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:#7DA371;color:white;border:none;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;cursor:pointer;transition:background 0.18s ease;"
                            onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'">
                            Choose a pony to sponsor
                            <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>
                        </button>
                    </div>
                </div>

                <!-- Step 1: Pony picker -->
                <div id="sp-picker" style="display:none;background:#1e2e1a;padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px);">
                    <div style="max-width:1100px;margin:0 auto;">
                        <button onclick="spBack(1)" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.5);padding:0;margin-bottom:28px;">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
                            Back
                        </button>
                        <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:12px;">Sponsor a pony</p>
                        <h2 style="font-family:'Merriweather',serif;font-weight:700;font-size:clamp(22px,2.5vw,32px);color:#F6F1E8;line-height:1.2;margin-bottom:8px;">Who would you like to sponsor?</h2>
                        <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;color:rgba(246,241,232,0.65);margin-bottom:36px;">Each of our four ponies plays a unique role in our sessions.</p>
                        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;">
                            <button onclick="spSelectPony('breagha')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                                <img src="/Breagh-bc8e70e8-2880w.webp" alt="Breagha" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
                                <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
                                <div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
                                    <p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Breagha</p>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">13hh · Skewbald cob mare · 19yo</p>
                                </div>
                            </button>
                            <button onclick="spSelectPony('harley')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                                <img src="/Harley-6ece9eca-2880w.webp" alt="Harley" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
                                <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
                                <div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
                                    <p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Harley</p>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">15.3hh · Skewbald cob · 17yo</p>
                                </div>
                            </button>
                            <button onclick="spSelectPony('connolly')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                                <img src="/connolly-73f3e69f-2880w-2.webp" alt="Connolly" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
                                <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
                                <div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
                                    <p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Connolly</p>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">15.1hh · Piebald cob gelding · 18yo</p>
                                </div>
                            </button>
                            <button onclick="spSelectPony('puzzle')" style="position:relative;aspect-ratio:3/4;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:transparent;padding:0;transition:transform 0.2s ease;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                                <img src="/puzzle-5de6e325-2880w.webp" alt="Puzzle" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;" />
                                <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 60%);"></div>
                                <div style="position:absolute;bottom:0;left:0;right:0;padding:20px 18px;">
                                    <p style="font-family:'Merriweather',serif;font-weight:700;font-size:20px;color:white;margin-bottom:3px;">Puzzle</p>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,0.7);">15.1hh · Skewbald cob mare · 16yo</p>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Tier picker -->
                <div id="sp-tier" style="display:none;background:#1e2e1a;padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px);">
                    <div style="max-width:800px;margin:0 auto;">
                        <button onclick="spBack(2)" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(246,241,232,0.5);padding:0;margin-bottom:28px;">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
                            Back
                        </button>
                        <p id="sp-tier-pony-name" style="font-family:'Merriweather',serif;font-weight:900;font-size:clamp(22px,2.5vw,32px);color:#F6F1E8;margin-bottom:8px;"></p>
                        <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;color:rgba(246,241,232,0.65);margin-bottom:32px;">Choose your sponsorship level.</p>
                        <div id="sp-tier-rows" style="display:flex;flex-direction:column;gap:10px;margin-bottom:28px;"></div>
                        <!-- Gift Aid -->
                        <div style="background:rgba(255,255,255,0.07);border-radius:7px;padding:18px 20px;margin-bottom:24px;">
                            <div onclick="spToggleGA()" style="display:flex;align-items:flex-start;gap:14px;cursor:pointer;">
                                <span id="sp-ga-check" style="flex-shrink:0;margin-top:2px;width:20px;height:20px;border-radius:5px;border:2px solid rgba(246,241,232,0.3);background:transparent;display:flex;align-items:center;justify-content:center;transition:all 0.15s ease;">
                                    <svg id="sp-ga-tick" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0;transition:opacity 0.15s ease;"><path d="M2 6l3 3 5-5"/></svg>
                                </span>
                                <div>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#F6F1E8;margin-bottom:2px;">Boost your sponsorship with Gift Aid</p>
                                    <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.55);line-height:1.5;">We can claim 25p for every £1 you give at no extra cost.</p>
                                </div>
                            </div>
                            <div id="sp-ga-fields" style="max-height:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease;opacity:0;">
                                <div style="margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                                    <input placeholder="First name" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
                                    <input placeholder="Last name" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
                                    <input placeholder="Address" style="grid-column:1/-1;padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
                                    <input placeholder="Town / City" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
                                    <input placeholder="Postcode" style="padding:10px 14px;border:2px solid rgba(246,241,232,0.2);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;background:rgba(255,255,255,0.07);color:#F6F1E8;" />
                                </div>
                            </div>
                        </div>
                        <button onclick="spProceedToPayment()"
                            style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#7DA371;color:white;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;"
                            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="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
                        </button>
                    </div>
                </div>

                <!-- Step 3: Payment -->
                <div id="sp-pay" style="display:none;background:#1e2e1a;padding:clamp(40px,6vw,72px) clamp(24px,6vw,72px);">
                    <div style="max-width:1000px;margin:0 auto;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;">
                        <div style="flex:1 1 360px;min-width:0;background:#F6F1E8;border-radius:10px;padding:32px;">
                            <button onclick="spBack(3)" style="display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:700;font-size:13px;color:rgba(0,0,0,0.5);padding:0;margin-bottom:22px;">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M7 4L3 8l4 4"/></svg>
                                Back
                            </button>
                            <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-bottom:12px;">Express checkout</p>
                            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;">
                                <button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:black;color:white;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">Apple Pay</button>
                                <button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:black;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">G Pay</button>
                                <button style="padding:12px;border:2px solid rgba(0,0,0,0.12);border-radius:8px;background:white;color:#003087;cursor:pointer;font-family:'Public Sans',sans-serif;font-weight:800;font-size:12px;">PayPal</button>
                            </div>
                            <div style="display:flex;align-items:center;gap:12px;margin-bottom: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:12px;color:rgba(0,0,0,0.4);">Or pay with card</span>
                                <div style="flex:1;height:1px;background:rgba(0,0,0,0.12);"></div>
                            </div>
                            <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
                                <input type="email" placeholder="Email address" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                <input placeholder="Card number" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                                    <input placeholder="MM / YY" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                    <input placeholder="CVC" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                                </div>
                                <input placeholder="Name on card" style="padding:12px 14px;border:2px solid rgba(0,0,0,0.15);border-radius:7px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;outline:none;" onfocus="this.style.borderColor='#7DA371'" onblur="this.style.borderColor='rgba(0,0,0,0.15)'" />
                            </div>
                            <div style="background:rgba(0,0,0,0.05);border-radius:7px;padding:12px 16px;margin-bottom:16px;">
                                <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;">Sponsorship is collected monthly via Direct Debit. You can cancel at any time.</p>
                            </div>
                            <button id="sp-pay-btn" onclick="spComplete()"
                                style="width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1e2e1a;color:#F6F1E8;border:none;border-radius:9999px;padding:16px 28px;font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:background 0.18s ease;margin-bottom:14px;"
                                onmouseover="this.style.background='#2d4427'" onmouseout="this.style.background='#1e2e1a'">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#F6F1E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="12" height="9" rx="2"/><path d="M5 5V4a3 3 0 016 0v1"/></svg>
                                <span id="sp-pay-label">Sponsor Breagha — £5/mo</span>
                            </button>
                            <div style="display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;">
                                <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Secured by Stripe</span>
                                <span style="color:rgba(0,0,0,0.2);">·</span>
                                <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">Cancel anytime</span>
                                <span style="color:rgba(0,0,0,0.2);">·</span>
                                <span style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;color:rgba(0,0,0,0.35);">SC007357</span>
                            </div>
                        </div>
                        <!-- Summary sidebar -->
                        <div style="flex:0 0 260px;background:rgba(255,255,255,0.06);border-radius:10px;padding:28px 24px;">
                            <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,241,232,0.5);margin-bottom:16px;">Your sponsorship</p>
                            <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
                                <img id="sp-pay-pony-img" src="" alt="" style="width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0;" />
                                <div>
                                    <p id="sp-pay-pony-name" style="font-family:'Merriweather',serif;font-weight:700;font-size:18px;color:#F6F1E8;"></p>
                                    <p id="sp-pay-pony-desc" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(246,241,232,0.55);"></p>
                                </div>
                            </div>
                            <div style="height:1px;background:rgba(255,255,255,0.1);margin-bottom:16px;"></div>
                            <p id="sp-pay-tier-name" style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:14px;color:#F6F1E8;margin-bottom:4px;"></p>
                            <p id="sp-pay-tier-amount" style="font-family:'Merriweather',serif;font-weight:900;font-size:28px;color:#7DA371;margin-bottom:4px;"></p>
                            <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.5);">per month</p>
                        </div>
                    </div>
                </div>

                <!-- Step 4: Done -->
                <div id="sp-done" style="display:none;background:#1e2e1a;padding:clamp(60px,8vw,100px) clamp(24px,6vw,72px);text-align:center;">
                    <div style="max-width:560px;margin:0 auto;">
                        <div style="width:64px;height:64px;background:#7DA371;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                        </div>
                        <h2 style="font-family:'Merriweather',serif;font-weight:900;font-size:clamp(26px,3vw,38px);color:#F6F1E8;margin-bottom:14px;">Thank you.</h2>
                        <p id="sp-done-msg" style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:17px;color:rgba(246,241,232,0.7);line-height:1.7;margin-bottom:32px;"></p>
                        <button onclick="spReset()" style="display:inline-flex;align-items:center;gap:10px;background:#7DA371;color:white;border:none;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;cursor:pointer;">
                            Back to support page
                        </button>
                    </div>
                </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 is:inline>
        // ── Nav scroll ────────────────────────────────────────────
        const nav = document.getElementById("site-nav");
        if (nav) {
            window.addEventListener("scroll", () => {
                nav.classList.toggle("scrolled", window.scrollY > 40);
            }, { passive: true });
        }

        // ── Donate Widget (inline) ────────────────────────────────
        const DW_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 _dw_open = false, _dw_mode = 'oneoff', _dw_amount = 25, _dw_other = '', _dw_ga = false;
        let _dw_gaFields = {};

        function dwGetAmt() {
            return _dw_other ? (Number(_dw_other) || 0) : _dw_amount;
        }

        function dwRenderChips() {
            const grid = document.getElementById('dw-chips-grid');
            if (!grid) return;
            const presets = DW_PRESETS[_dw_mode];
            grid.innerHTML = presets.map(p => {
                const sel = p.amount === _dw_amount && !_dw_other;
                return `<button onclick="dwSelectChip(${p.amount})"
                    style="padding:16px;border:2px solid ${sel ? '#000' : 'rgba(0,0,0,0.14)'};
                    border-radius:8px;background:${sel ? '#000' : 'white'};color:${sel ? 'white' : '#000'};
                    cursor:pointer;text-align:left;transition:all 0.15s ease;">
                    <p style="font-family:'Merriweather',serif;font-weight:900;font-size:22px;line-height:1;margin-bottom:4px;">£${p.amount}</p>
                    <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;line-height:1.4;opacity:${sel ? '0.7' : '0.55'};">${p.impact}</p>
                </button>`;
            }).join('');
        }

        function dwUpdateSummary() {
            const amt = dwGetAmt();
            const ga = _dw_ga ? Math.round(amt * 0.25 * 100) / 100 : 0;

            const chipAmt  = document.getElementById('dw-chip-amount');
            const chipFreq = document.getElementById('dw-chip-freq');
            const chipGA   = document.getElementById('dw-chip-ga');
            const chipLbl  = document.getElementById('dw-chip-label');
            if (chipAmt)  chipAmt.textContent  = `£${Number.isFinite(amt) ? amt : 0}`;
            if (chipFreq) chipFreq.style.display = _dw_mode === 'monthly' ? 'inline' : 'none';
            if (chipGA)   { chipGA.style.display = (_dw_ga && amt > 0) ? 'inline' : 'none'; chipGA.textContent = `+ £${ga.toFixed(2)} Gift Aid`; }
            if (chipLbl)  chipLbl.textContent  = _dw_mode === 'monthly' ? 'Your monthly gift' : 'Your gift';

            const payLabel = document.getElementById('dw-pay-label');
            if (payLabel) {
                const total = amt + ga;
                payLabel.textContent = `Donate £${Number.isFinite(total) ? total : 0}${_dw_mode === 'monthly' ? '/mo' : ''}`;
            }

            const rail = document.getElementById('dw-rail');
            if (rail) rail.style.display = (window.innerWidth >= 768) ? 'block' : 'none';
            const railAmt  = document.getElementById('dw-rail-amount');
            const railFreq = document.getElementById('dw-rail-freq');
            if (railAmt)  railAmt.textContent  = `£${Number.isFinite(amt) ? amt : 0}`;
            if (railFreq) railFreq.textContent = _dw_mode === 'monthly' ? 'per month' : 'one-off gift';

            const presets   = DW_PRESETS[_dw_mode];
            const match     = presets.find(p => p.amount === (_dw_other ? null : _dw_amount));
            const impactTxt = document.getElementById('dw-rail-impact-text');
            const impactBlk = document.getElementById('dw-rail-impact');
            if (impactTxt && impactBlk) {
                if (match) { impactBlk.style.display = 'block'; impactTxt.textContent = match.impact; }
                else { impactBlk.style.display = 'none'; }
            }

            const railGA = document.getElementById('dw-rail-ga');
            if (railGA) {
                railGA.style.display = (_dw_ga && amt > 0) ? 'block' : 'none';
                if (_dw_ga && amt > 0) {
                    const b = document.getElementById('dw-rail-ga-base');
                    const e = document.getElementById('dw-rail-ga-extra');
                    const t = document.getElementById('dw-rail-ga-total');
                    if (b) b.textContent = `£${amt}`;
                    if (e) e.textContent = `+£${ga.toFixed(2)}`;
                    if (t) t.textContent = `£${(amt + ga).toFixed(2)}`;
                }
            }
        }

        function dwOpen() {
            if (_dw_open) return;
            _dw_open = true;
            _dw_mode = 'oneoff'; _dw_amount = 25; _dw_other = ''; _dw_ga = false;

            const btn = document.getElementById('dw-toggle-btn');
            if (btn) {
                btn.innerHTML = 'Close <svg width="12" height="12" 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 3l10 10M13 3L3 13"/></svg>';
                btn.onclick = dwClose;
            }

            dwShowStep('amount');
            dwRenderChips();
            dwUpdateSummary();

            const panel = document.getElementById('dw-panel');
            if (panel) {
                panel.style.display = 'block';
                requestAnimationFrame(() => requestAnimationFrame(() => {
                    panel.style.opacity = '1';
                    panel.style.transform = 'translateY(0)';
                }));
            }
            if (window.innerWidth >= 768) {
                const r = document.getElementById('dw-rail');
                if (r) r.style.display = 'block';
            }
            setTimeout(() => {
                document.getElementById('donate')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 50);
        }

        function dwClose() {
            _dw_open = false;
            const panel = document.getElementById('dw-panel');
            if (panel) {
                panel.style.opacity = '0';
                panel.style.transform = 'translateY(-8px)';
                setTimeout(() => { panel.style.display = 'none'; }, 300);
            }
            const btn = document.getElementById('dw-toggle-btn');
            if (btn) {
                btn.innerHTML = 'Donate now <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>';
                btn.style.background = '#000';
                btn.onclick = dwOpen;
            }
        }

        function dwShowStep(step) {
            ['amount','pay','done'].forEach(s => {
                const el = document.getElementById(`dw-step-${s}`);
                if (el) el.style.display = s === step ? 'block' : 'none';
            });
            const chip = document.getElementById('dw-chip');
            if (chip) chip.style.display = step === 'done' ? 'none' : 'flex';
        }

        function dwSetMode(mode) {
            _dw_mode = mode;
            _dw_amount = mode === 'monthly' ? 10 : 25;
            _dw_other  = '';
            const oo = document.getElementById('dw-tab-oneoff');
            const mo = document.getElementById('dw-tab-monthly');
            if (oo) { oo.style.background = mode === 'oneoff' ? '#000' : 'transparent'; oo.style.color = mode === 'oneoff' ? '#fff' : 'rgba(0,0,0,0.5)'; }
            if (mo) { mo.style.background = mode === 'monthly' ? '#000' : 'transparent'; mo.style.color = mode === 'monthly' ? '#fff' : 'rgba(0,0,0,0.5)'; }
            const inp = document.getElementById('dw-other-input');
            if (inp) inp.value = '';
            const otherMo = document.getElementById('dw-other-mo');
            if (otherMo) otherMo.style.display = mode === 'monthly' ? 'inline' : 'none';
            dwRenderChips();
            dwUpdateSummary();
        }

        function dwSelectChip(amount) {
            _dw_amount = amount; _dw_other = '';
            const inp = document.getElementById('dw-other-input');
            if (inp) inp.value = '';
            dwRenderChips(); dwUpdateSummary();
        }

        function dwOnOther() {
            const inp = document.getElementById('dw-other-input');
            _dw_other = inp ? inp.value : '';
            dwRenderChips(); dwUpdateSummary();
        }

        function dwToggleGA() {
            _dw_ga = !_dw_ga;
            const chk = document.getElementById('dw-ga-check');
            const tck = document.getElementById('dw-ga-tick');
            const fld = document.getElementById('dw-ga-fields');
            if (chk) { chk.style.background = _dw_ga ? '#7DA371' : 'white'; chk.style.borderColor = _dw_ga ? '#7DA371' : 'rgba(0,0,0,0.25)'; }
            if (tck) tck.style.opacity = _dw_ga ? '1' : '0';
            if (fld) { fld.style.maxHeight = _dw_ga ? '320px' : '0'; fld.style.opacity = _dw_ga ? '1' : '0'; }
            dwUpdateSummary();
        }

        function dwGaField(f, v) { _dw_gaFields[f] = v; }

        function dwProceed() {
            dwShowStep('pay');
            const dd = document.getElementById('dw-dd-note');
            if (dd) dd.style.display = _dw_mode === 'monthly' ? 'block' : 'none';
            dwUpdateSummary();
        }

        function dwBack() { dwShowStep('amount'); dwRenderChips(); }

        function dwComplete() {
            dwShowStep('done');
            const msg = document.getElementById('dw-done-msg');
            const amt = dwGetAmt();
            if (msg) {
                msg.textContent = _dw_mode === 'monthly'
                    ? `Your £${amt}/month regular gift means the world to us. You can cancel at any time.`
                    : `Your gift of £${amt} goes directly to our ponies and riders. Thank you so much.`;
            }
        }

        // ── Sponsor Pony Widget ───────────────────────────────────
        const SP_PONIES = {
            breagha:  { name: 'Breagha',   img: '/Breagh-bc8e70e8-2880w.webp',     desc: '13hh · Skewbald cob mare · 19yo'     },
            harley:   { name: 'Harley',    img: '/Harley-6ece9eca-2880w.webp',      desc: '15.3hh · Skewbald cob · 17yo'        },
            connolly: { name: 'Connolly',  img: '/connolly-73f3e69f-2880w-2.webp', desc: '15.1hh · Piebald cob gelding · 18yo' },
            puzzle:   { name: 'Puzzle',    img: '/puzzle-5de6e325-2880w.webp',      desc: '15.1hh · Skewbald cob mare · 16yo'   },
        };
        const SP_TIERS = [
            { id: 'companion', label: 'Companion', amount: 5,  perks: 'Monthly update + name on our sponsor board' },
            { id: 'partner',   label: 'Partner',   amount: 15, perks: 'All above + annual photo of your pony'      },
            { id: 'guardian',  label: 'Guardian',  amount: 25, perks: 'All above + visit invitation each year'     },
            { id: 'patron',    label: 'Patron',    amount: 40, perks: 'All above + personal thank-you from the team' },
        ];

        let _sp_pony = null, _sp_tier = null, _sp_ga = false;

        function spShowStep(step) {
            ['idle','picker','tier','pay','done'].forEach(s => {
                const el = document.getElementById(`sp-${s}`);
                if (!el) return;
                if (s === step) {
                    el.style.display = s === 'idle' ? 'flex' : 'block';
                } else {
                    el.style.display = 'none';
                }
            });
        }

        function spStart() {
            spShowStep('picker');
            document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function spSelectPony(ponyId) {
            _sp_pony = ponyId; _sp_tier = null; _sp_ga = false;
            const nameEl = document.getElementById('sp-tier-pony-name');
            if (nameEl) nameEl.textContent = `Sponsor ${SP_PONIES[ponyId].name}`;
            spRenderTiers();
            spShowStep('tier');
            document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function spRenderTiers() {
            const container = document.getElementById('sp-tier-rows');
            if (!container) return;
            container.innerHTML = SP_TIERS.map(t => {
                const sel = t.id === _sp_tier;
                return `<button onclick="spSelectTier('${t.id}')"
                    style="display:flex;align-items:center;justify-content:space-between;gap:16px;
                    padding:18px 20px;border-radius:8px;cursor:pointer;text-align:left;width:100%;
                    border:2px solid ${sel ? '#7DA371' : 'rgba(255,255,255,0.15)'};
                    background:${sel ? 'rgba(125,163,113,0.2)' : 'rgba(255,255,255,0.06)'};
                    transition:all 0.15s ease;">
                    <div>
                        <p style="font-family:'Public Sans',sans-serif;font-weight:800;font-size:15px;color:#F6F1E8;margin-bottom:3px;">${t.label}</p>
                        <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:13px;color:rgba(246,241,232,0.55);line-height:1.4;">${t.perks}</p>
                    </div>
                    <div style="text-align:right;flex-shrink:0;">
                        <p style="font-family:'Merriweather',serif;font-weight:900;font-size:22px;color:#7DA371;line-height:1;">£${t.amount}</p>
                        <p style="font-family:'Public Sans',sans-serif;font-weight:600;font-size:12px;color:rgba(246,241,232,0.45);">/ month</p>
                    </div>
                </button>`;
            }).join('');
        }

        function spSelectTier(tierId) { _sp_tier = tierId; spRenderTiers(); }

        function spToggleGA() {
            _sp_ga = !_sp_ga;
            const chk = document.getElementById('sp-ga-check');
            const tck = document.getElementById('sp-ga-tick');
            const fld = document.getElementById('sp-ga-fields');
            if (chk) { chk.style.background = _sp_ga ? '#7DA371' : 'transparent'; chk.style.borderColor = _sp_ga ? '#7DA371' : 'rgba(246,241,232,0.3)'; }
            if (tck) tck.style.opacity = _sp_ga ? '1' : '0';
            if (fld) { fld.style.maxHeight = _sp_ga ? '320px' : '0'; fld.style.opacity = _sp_ga ? '1' : '0'; }
        }

        function spProceedToPayment() {
            if (!_sp_tier) {
                const rows = document.getElementById('sp-tier-rows');
                if (rows) { rows.style.outline = '2px solid #f5d445'; rows.style.borderRadius = '8px'; setTimeout(() => { rows.style.outline = 'none'; }, 1400); }
                return;
            }
            const pony = SP_PONIES[_sp_pony];
            const tier = SP_TIERS.find(t => t.id === _sp_tier);

            const img  = document.getElementById('sp-pay-pony-img');
            const nm   = document.getElementById('sp-pay-pony-name');
            const dsc  = document.getElementById('sp-pay-pony-desc');
            const tnm  = document.getElementById('sp-pay-tier-name');
            const tamt = document.getElementById('sp-pay-tier-amount');
            const lbl  = document.getElementById('sp-pay-label');

            if (img)  { img.src = pony.img; img.alt = pony.name; }
            if (nm)   nm.textContent   = pony.name;
            if (dsc)  dsc.textContent  = pony.desc;
            if (tnm)  tnm.textContent  = tier.label;
            if (tamt) tamt.textContent = `£${tier.amount}`;
            if (lbl)  lbl.textContent  = `Sponsor ${pony.name} — £${tier.amount}/mo`;

            spShowStep('pay');
            document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function spComplete() {
            const pony = SP_PONIES[_sp_pony];
            const tier = SP_TIERS.find(t => t.id === _sp_tier);
            const msg  = document.getElementById('sp-done-msg');
            if (msg) msg.textContent = `You are now a ${tier.label} sponsor of ${pony.name}. Your £${tier.amount}/month will help cover their care costs. A confirmation has been sent to your email.`;
            spShowStep('done');
            document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function spBack(fromStep) {
            if (fromStep === 1) spShowStep('idle');
            else if (fromStep === 2) spShowStep('picker');
            else if (fromStep === 3) spShowStep('tier');
            document.getElementById('sponsor')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function spReset() { _sp_pony = null; _sp_tier = null; _sp_ga = false; spShowStep('idle'); }
    </script>
</BaseLayout>
