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 SupportUs = (): JSX.Element => {
    usePageMeta({
        title: "Support Us",
        path: "/support-us",
        description:
            "Support Highland Group RDA through donations, volunteering, and fundraising.",
    });
    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(/Kenneth.jpg)" }}
                    >
                        <div className="absolute inset-0 bg-black/45" />
                        <SiteHeader
                            navigationItems={navigationItems}
                            theme="dark"
                            className="px-6 sm:px-4"
                        />
                        <div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 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">
                                    Support Us
                                </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]">
                                    We are able to carry out our life-changing
                                    activities thanks to you.
                                </h1>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
                                    We couldn&apos;t do what we do without the
                                    hard work and dedication of our wonderful
                                    volunteers and fundraisers. We wouldn&apos;t
                                    be where we are without the kindness and
                                    generosity of our sponsors and donors.
                                </p>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[820px]">
                                    We understand not everyone is in the
                                    position to be able to volunteer but
                                    donations are just as impactful. We are
                                    truly grateful for any and every donation
                                    received as we can only do what we do as a
                                    result of self-funding.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div className="bg-[#f5d445] px-6 sm:px-8 py-6 sm:py-8">
                        <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                                    Donate today!
                                </h2>
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] max-w-[620px]">
                                    Head over to our Just Giving Page to give a
                                    one-off donation today.
                                </p>
                            </div>
                            <a
                                className="w-full sm:w-[240px] 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>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div className="relative">
                        <img
                            className="w-full h-[140px] object-cover"
                            style={{ objectPosition: "50% 35%" }}
                            alt=""
                            src="/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w.webp"
                        />
                        <div className="absolute inset-0 bg-black/35" />
                        <h2 className="absolute inset-0 flex items-end px-6 sm:px-8 pb-3 [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-3xl">
                            Volunteering
                        </h2>
                    </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="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
                            <div>
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    We welcome all volunteers, you don&apos;t
                                    have to know anything about horses, or even
                                    like being around animals, there are plenty
                                    of other opportunities for you to get
                                    involved and help us. We also need lots of
                                    help with other tasks such as fundraising,
                                    publicity, painting, creating new activities
                                    for the participants and general
                                    maintenance.
                                </p>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    Volunteering for sessions involves:
                                </p>
                                <ul className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
                                    <li>Grooming</li>
                                    <li>Tacking up the ponies</li>
                                    <li>
                                        Leading the ponies and/or walking beside
                                        the ponies to support the riders
                                    </li>
                                    <li>Poo picking the fields</li>
                                </ul>
                            </div>
                            <div className="space-y-6">
                                <div>
                                    <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                        How much time do I need to commit?
                                    </h3>
                                    <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                        If you are keen to work with our
                                        participants then you would need to be
                                        available during one of our session
                                        times - Tuesday - Friday mornings. If
                                        you can commit to helping regularly it
                                        would be great, but everyone understands
                                        that&apos;s not always possible and
                                        there are usually many other flexible
                                        options available - especially in
                                        summer.
                                    </p>
                                </div>
                                <div>
                                    <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                        How can I apply?
                                    </h3>
                                    <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                        You can contact us via email or phone by{" "}
                                        <a
                                            className="underline"
                                            href="/contact"
                                        >
                                            clicking here
                                        </a>
                                        .
                                    </p>
                                </div>
                                <div>
                                    <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                        How old do I need to be and what
                                        credentials do I need to have?
                                    </h3>
                                    <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                        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 between 80
                                        and 90).
                                    </p>
                                    <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                        You will need to provide the names and
                                        contact details of 2 referees who are
                                        not a relative or partner and who have
                                        known you for more than 1 year.
                                        Volunteers of 16 years of age and over
                                        who are actively involved with our
                                        sessions are required to undergo an
                                        enhanced disclosure check because they
                                        are volunteering with vulnerable adults
                                        and children.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div className="relative">
                        <img
                            className="w-full h-[140px] object-cover"
                            style={{ objectPosition: "50% 35%" }}
                            alt=""
                            src="/274864973_7295359163837841_5927911936073070889_n-1920w.webp"
                        />
                        <div className="absolute inset-0 bg-black/35" />
                        <h2 className="absolute inset-0 flex items-end px-6 sm:px-8 pb-3 [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-3xl">
                            Sponsor a pony
                        </h2>
                    </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="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2">
                            <div>
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                    Why sponsor a pony?
                                </h3>
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    We currently have a school of ponies which
                                    all require care and attention. Our
                                    volunteers and coaches work hard every day
                                    all year round to ensure our ponies are well
                                    looked after and suitable for our riders. By
                                    sponsoring a pony, you are enabling us to
                                    enrich the lives of disabled children and
                                    adults throughout the Highlands.
                                </p>
                                <h3 className="mt-6 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                    How do I pay?
                                </h3>
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    We are working on a payment method so we
                                    thank you for bearing with us. If you would
                                    like more information, please get in touch.
                                </p>
                            </div>
                            <div>
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                    How much does it cost to sponsor a Highland
                                    Group RDA pony?
                                </h3>
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    You can sponsor as little or as much as you
                                    like but here are some of the things we
                                    regularly need to look after our ponies and
                                    ensure we can keep running our RDA sessions.
                                </p>
                                <ul className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6] list-disc pl-6 space-y-2">
                                    <li>£34 every 6 weeks for hoof trimming</li>
                                    <li>£35 for a large bale of hay</li>
                                    <li>£60 for a vet to visit</li>
                                    <li>£20 for a bag of feed</li>
                                    <li>£4 for a bag of carrots</li>
                                    <li>£30 to fund a riding session</li>
                                    <li>£75 to buy a riding hat</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <div className="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-[320px_1fr] sm:items-start">
                            <div className="relative">
                                <img
                                    className="w-full h-[240px] sm:h-[260px] object-cover"
                                    alt="Ponies lined up"
                                    src="/alineofponies-1920w.webp"
                                />
                                <h2 className="absolute left-0 bottom-0 m-3 px-3 py-2 bg-black/55 [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-3xl">
                                    Fundraising
                                </h2>
                            </div>
                            <div>
                                <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    Highland Group RDA is self-funded, as are
                                    all RDA groups. We have to self fund
                                    coaching fees, the care of our beautiful
                                    ponies, riding equipment, insurance and
                                    everything else that comes with running an
                                    RDA group.
                                </p>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    One of the ways we raise money for the
                                    upkeep of Highland Group RDA is through
                                    fundraising. We run a variety of events
                                    throughout the year and are always looking
                                    for volunteers to support in running these
                                    events. If you can spare some time to assist
                                    or are aware of any fundraising
                                    opportunities, please get in touch.
                                    We&apos;d love to hear from you!
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <SiteFooter fullBleedOnMobile />
            </main>
        </div>
    );
};
