import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { usePageMeta } from "@/lib/seo";

const navigationItems = [
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "News", href: "/events" },
    { label: "Support Us", href: "/support-us" },
    { label: "Contact", href: "/contact" },
];

export const About = (): JSX.Element => {
    usePageMeta({
        title: "About",
        path: "/about",
        description:
            "Learn about Highland Group RDA, our mission, and how we support riders across the Highlands.",
    });
    return (
        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
            <main className="w-full">
                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div
                        className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
                        style={{
                            backgroundImage:
                                "url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp)",
                        }}
                    >
                        <div className="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25" />
                        <SiteHeader
                            navigationItems={navigationItems}
                            theme="dark"
                            className="px-6 sm:px-4"
                        />
                        <div className="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8">
                            <div className="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
                                    Who, why, where, when &amp; how?
                                </p>
                                <div className="mt-3 h-[2px] w-10 bg-white/70" />
                                <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
                                    Highland Group RDA was established in 1975.
                                </h1>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
                                    We are located at our own premises just
                                    outside Kirkhill, near Inverness. We operate
                                    from Spring to Autumn 4 days per week. The
                                    majority of our participants are Inverness
                                    and Ross-shire based with a reach including
                                    Glenurquhart, Dingwall and Inverness.
                                </p>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
                                    We are completely self-funded and rely on
                                    income from donations for our sessions,
                                    fundraising from local events and available
                                    grants to fund our services, upkeep of our
                                    facilities and most importantly fund the
                                    care and training of our wonderful ponies.
                                </p>
                            </div>
                        </div>
                        <a
                            className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
                            href="https://www.justgiving.com/charity/highlandgrouprda"
                            target="_blank"
                            rel="noreferrer"
                        >
                            <img
                                className="w-full h-full object-contain"
                                alt="Donate via JustGiving"
                                src="/Button.webp"
                            />
                        </a>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
                            <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                                Our Star Participants
                            </h2>
                            <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/60">
                                Stories and testimonials
                            </p>
                        </div>

                        <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[1.05fr_0.95fr]">
                            <div className="bg-white/70 px-6 py-6">
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
                                    Featured story
                                </p>
                                <h3 className="mt-2 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                    Samantha&apos;s Story
                                </h3>
                                <div
                                    className="mt-4 h-[200px] sm:h-[260px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
                                    style={{
                                        backgroundImage:
                                            "url(/Samantha-sStory-2880w.webp)",
                                    }}
                                />
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    Read Samantha&apos;s story and find out how
                                    her RDA sessions have not only improved her
                                    physical and mental wellbeing, but helped
                                    her to overcome her prognosis of never being
                                    able to walk.
                                </p>
                                <a
                                    className="mt-4 inline-flex items-center gap-2 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] underline"
                                    href="/Star-Participants-Samantha-s-story.pdf"
                                    target="_blank"
                                    rel="noreferrer"
                                >
                                    Full story (PDF)
                                </a>
                            </div>

                            <div className="bg-white/70 px-6 py-6">
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs uppercase tracking-[0.2em] text-black/70">
                                    Testimonials
                                </p>
                                <div className="mt-4 space-y-4">
                                    <blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm">
                                        <span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
                                            &ldquo;
                                        </span>
                                        <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                            Riding helps to correct her posture
                                            and protects the spine and hips
                                            while it strengthens the muscles.
                                            More than that, it gives a sense of
                                            achievement and of being just as
                                            &apos;able-bodied&apos; as everyone
                                            else on the back of a horse.
                                        </p>
                                    </blockquote>
                                    <blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/95 px-5 py-4 shadow-sm">
                                        <span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
                                            &ldquo;
                                        </span>
                                        <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                            He feels the responsibility of
                                            controlling such a large and
                                            powerful animal and it helps him
                                            understand life just that bit
                                            better. It&apos;s also very calming
                                            for him, especially at the end of a
                                            session when he can nurture the
                                            horse by brushing her and giving her
                                            some hay.
                                        </p>
                                    </blockquote>
                                </div>
                            </div>
                        </div>

                        <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
                                <span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
                                    &ldquo;
                                </span>
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    We cannot thank the team at RDA Highland
                                    enough for what they&apos;ve done for our
                                    child. To see only the individual and the
                                    pure joy of achievement, and not the
                                    disability is a tremendous gift. Our whole
                                    family benefits from these sessions. Thank
                                    you.
                                </p>
                            </blockquote>
                            <blockquote className="relative overflow-hidden rounded-[7px] border border-black/20 bg-white/85 px-6 py-5 shadow-sm">
                                <span className="absolute -left-2 -top-7 text-[96px] leading-none text-black/20">
                                    &ldquo;
                                </span>
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    RDA&apos;s gentle, calm and serene
                                    atmosphere coupled with the warm sentient
                                    creature that she can bond with and enjoy
                                    without needing words. I think it helps her
                                    to feel calm and grounded and gives a huge
                                    sense of achievement. RDA is such an
                                    important part of our lives and each of my
                                    children take something different away.
                                </p>
                            </blockquote>
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pt-0">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <div className="h-px w-24 bg-black/20" />
                        <h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Meet the ponies
                        </h2>
                        <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
                            <div className="bg-white/70 px-5 py-5">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
                                    Breagh
                                </h3>
                                <div
                                    className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
                                    style={{
                                        backgroundImage:
                                            "url(/Breagh-bc8e70e8-2880w.webp)",
                                    }}
                                />
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    13.2hh · Mare · 15 yo
                                    <br />
                                    She is very willing and independent
                                </p>
                            </div>
                            <div className="bg-white/70 px-5 py-5">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
                                    Connolly
                                </h3>
                                <div
                                    className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
                                    style={{
                                        backgroundImage:
                                            "url(/connolly-73f3e69f-2880w-2.webp)",
                                    }}
                                />
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    14.2hh · Gelding · 16 yo
                                    <br />A true gentleman and everyone&apos;s
                                    friend
                                </p>
                            </div>
                            <div className="bg-white/70 px-5 py-5">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
                                    Harley
                                </h3>
                                <div
                                    className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
                                    style={{
                                        backgroundImage:
                                            "url(/Harley-6ece9eca-2880w.webp)",
                                    }}
                                />
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    15.3hh · Gelding · 15 yo
                                    <br />
                                    He is the boss but very obliging
                                </p>
                            </div>
                            <div className="bg-white/70 px-5 py-5">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
                                    Puzzle
                                </h3>
                                <div
                                    className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
                                    style={{
                                        backgroundImage:
                                            "url(/puzzle-5de6e325-2880w.webp)",
                                    }}
                                />
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    15.3hh · Mare · 14 yo
                                    <br />
                                    She is very sensitive and gentle
                                </p>
                            </div>
                            <div className="bg-white/70 px-5 py-5">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
                                    Lady Suede
                                </h3>
                                <div
                                    className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_50%]"
                                    style={{
                                        backgroundImage:
                                            "url(/Suede-2880w.webp)",
                                    }}
                                />
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    13hh · Mare · 23 yo
                                    <br />
                                    RIP October 2024
                                </p>
                            </div>
                            <div className="bg-white/70 px-5 py-5">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl">
                                    Wispa
                                </h3>
                                <div
                                    className="mt-3 h-[160px] sm:h-[190px] w-full rounded-[7px] bg-cover bg-[50%_20%]"
                                    style={{
                                        backgroundImage:
                                            "url(/Wispa-2880w.webp)",
                                    }}
                                />
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    14.2hh · Gelding · 15 yo
                                    <br />
                                    RIP 2025
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <div className="h-px w-24 bg-black/20" />
                        <h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Apple foraging video
                        </h2>
                        <div className="mt-6 overflow-hidden rounded-[7px] bg-black">
                            <video
                                className="w-full h-auto"
                                src="/dbcdc995-6d2c-499f-b6a3-01a19b2b9886.mp4"
                                controls
                                preload="metadata"
                            />
                        </div>
                    </div>
                </section>

                <SiteFooter fullBleedOnMobile />
            </main>
        </div>
    );
};
