---
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: "Highland Group RDA",
    description:
        "Highland Group RDA provides horse riding for people with disabilities in the Highlands, offering safe, fun, and therapeutic equestrian activities.",
    keywords:
        "Highland Group RDA, horse riding for disabilities, therapeutic riding Highlands, RDA Scotland, equestrian therapy, disability riding lessons",
    canonicalPath: "/",
};

const ctaCards = [
    {
        label: "Fundraising",
        title: "Sponsor a pony",
        sub: "Your support keeps our ponies healthy and our sessions running — from hoof trimming to hay bales.",
        img: "/alineofponies-1920w.webp",
        objectPos: "50% 50%",
        href: "/support-us",
    },
    {
        label: "Get involved",
        title: "Apply to volunteer",
        sub: "No horse experience needed. Sidestep walkers, groomers, fundraisers — all roles make a real difference.",
        img: "/Vols5-2880w-1024x768.avif",
        objectPos: "50% 30%",
        href: "/volunteer-application",
    },
    {
        label: "Riding sessions",
        title: "Apply to participate",
        sub: "We welcome riders and carriage drivers with a wide range of physical and mental disabilities.",
        img: "/Samantha-and-Connolly-1280.webp",
        objectPos: "50% 38%",
        href: "/participant-application",
    },
];
---

<BaseLayout {...pageSeo}>
    <Fragment slot="head">
        <link
            rel="preload"
            as="image"
            href="/Samantha-and-Connolly-1280.webp"
            imagesrcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
            imagesizes="100vw"
        />
    </Fragment>

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

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

        .cta-editorial {
            display: flex;
            width: 100%;
            height: 520px;
            overflow: hidden;
        }
        .cta-card {
            position: relative;
            flex: 1 1 0;
            overflow: hidden;
            transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
            color: inherit;
            text-decoration: none;
        }
        .cta-card:hover { flex: 1.3 1 0; }
        .cta-card-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .cta-card:hover .cta-card-img { transform: scale(1.04); }
        .cta-sub, .cta-more {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .cta-card:hover .cta-sub { opacity: 1; }
        .cta-card:hover .cta-more { opacity: 1; }

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

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

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

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

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

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

            <!-- ── HERO ── -->
            <section class="relative w-full overflow-hidden" style="min-height: 63vh;">
                <img
                    class="absolute inset-0 h-full w-full object-cover"
                    style="object-position: 50% 38%;"
                    alt=""
                    src="/Samantha-and-Connolly-1280.webp"
                    srcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
                    sizes="100vw"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.52) 100%);"
                />

                <!-- Hero content -->
                <div
                    class="relative flex flex-col"
                    style="min-height: 63vh; padding: 120px 28px 72px;"
                >
                    <!-- Headline block -->
                    <div class="anim-fade-up" style="max-width: 640px; margin-top: 16px;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.75);">
                            Highland Group RDA · Since 1975
                        </p>
                        <div style="margin-top: 14px; width: 48px; height: 2px; background: #7DA371;" />
                        <h1 style="margin-top: 18px; font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 62px); color: #F6F1E8; line-height: 1.12;">
                            Enriching lives through horses in the Highlands.
                        </h1>
                    </div>

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

                <!-- Donate button (absolute, hidden on mobile) -->
                <a
                    href="https://www.justgiving.com/charity/highlandgrouprda"
                    target="_blank"
                    rel="noreferrer"
                    class="absolute hero-donate"
                    style="bottom: 40px; right: 28px;"
                >
                    <img
                        src="/Button.webp"
                        alt="Donate via JustGiving"
                        style="height: 46px; object-fit: contain; display: block;"
                        loading="eager"
                    />
                </a>

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

            <!-- ── VIDEO ── -->
            <section style="background: #1e2e1a; padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 56px);">
                <div style="max-width: 960px; margin: 0 auto;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; margin-bottom: 12px;">
                        Our Story
                    </p>
                    <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 3vw, 38px); color: #F6F1E8; margin-bottom: 20px; line-height: 1.2; max-width: 600px;">
                        What is Riding for the Disabled?
                    </h2>
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.65; max-width: 680px; margin-bottom: 40px;">
                        Across the Highlands, we provide riding sessions for people with a wide range of physical and mental disabilities — connecting them with our ponies in a way that's therapeutic, joyful, and life-changing.
                    </p>
                    <div class="video-embed" style="max-width: 860px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
                        <iframe
                            src="https://www.youtube.com/embed/IX2DGd6m8BU?rel=0&modestbranding=1"
                            title="What is Riding for the Disabled Association (RDA)?"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen
                        />
                    </div>
                </div>
            </section>

            <!-- ── INTRO STRIP ── -->
            <section style="background: #f5d445; padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 56px);">
                <div style="max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
                    <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #000; line-height: 1.4; max-width: 700px;">
                        Find out more about <a href="/about" style="text-decoration: underline; color: inherit;">who we are</a>, what we do, and <a href="/support-us" style="text-decoration: underline; color: inherit;">how you can support us</a> to help make a difference.
                    </p>
                    <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>
            </section>

            <!-- ── CTA EDITORIAL ── -->
            <div class="cta-editorial">
                {ctaCards.map((card) => (
                    <a class="cta-card" href={card.href}>
                        <img
                            class="cta-card-img"
                            src={card.img}
                            alt={card.title}
                            style={`object-position: ${card.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 32px; background: rgba(0,0,0,0.48); backdrop-filter: blur(4px);">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
                                {card.label}
                            </p>
                            <h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); color: white; line-height: 1.2; margin-bottom: 10px;">
                                {card.title}
                            </h3>
                            <p class="cta-sub" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 260px;">
                                {card.sub}
                            </p>
                            <div class="cta-more" style="margin-top: 16px; display: flex; align-items: center; gap: 8px;">
                                <span style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: white; letter-spacing: 0.08em; text-transform: uppercase;">
                                    Find out more
                                </span>
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M3 8h10M9 4l4 4-4 4"/>
                                </svg>
                            </div>
                        </div>
                    </a>
                ))}
            </div>

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

                    <!-- Current sponsors -->
                    <div style="display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; margin-bottom: 64px;">
                        <div class="sponsor-logo">
                            <img src="/sponsors/ffordes_logo.png" alt="Ffordes" loading="lazy" decoding="async" />
                        </div>
                    </div>

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

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

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

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

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