import React from "react";

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

export const About = (): JSX.Element => {
    return (
        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
            <header className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 pt-6 sm:pt-4">
                <div className="flex flex-row items-start justify-between gap-4">
                    <img
                        className="w-[150px] h-[80px] sm:w-[177px] sm:h-[93px]"
                        alt="Rdalogo"
                        src="/figmaAssets/rdalogo-1.svg"
                    />
                    <nav className="hidden sm:block [font-family:'Public_Sans',Helvetica] font-bold text-black text-lg sm:text-2xl tracking-[0] leading-[normal]">
                        <ul className="flex flex-wrap items-center justify-end gap-x-8 gap-y-2">
                            {navigationItems.map((item) => (
                                <li key={item.label}>
                                    <a
                                        className="hover:underline"
                                        href={item.href}
                                    >
                                        {item.label}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </nav>
                </div>
            </header>

            <main className="w-full">
                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-8 sm:mt-12">
                    <div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr] sm:items-center">
                        <div>
                            <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
                                Who, why, where, when &amp; how?
                            </p>
                            <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black 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-black 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-black 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
                            className="relative w-full h-[260px] sm:h-[360px] rounded-[7px] overflow-hidden bg-cover bg-[50%_50%]"
                            style={{
                                backgroundImage:
                                    "url(/Samantha-and-Connolly.jpg)",
                            }}
                        >
                            <div className="absolute inset-0 bg-black/20" />
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Our Star Participants
                        </h2>
                        <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div className="bg-white/70 px-6 py-6">
                                <h3 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl">
                                    Samantha&apos;s Story
                                </h3>
                                <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>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                                    Full Story here...
                                </p>
                            </div>
                            <div className="bg-white/70 px-6 py-6">
                                <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>
                                <p className="mt-4 [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>
                            </div>
                        </div>
                        <div className="mt-6 bg-white/70 px-6 py-6">
                            <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>
                            <p className="mt-4 [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>
                        </div>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <h2 className="[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>
                                <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>
                                <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>
                                <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>
                                <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>
                                <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>
                                <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                    14.2hh · Gelding · 15 yo
                                    <br />
                                    Wispa is cute and very cheeky!
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <footer className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-10 sm:mt-14 pb-8">
                    <div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
                        <p className="font-semibold">
                            Highland Group RDA is a registered charity in
                            <br />
                            Scotland SCIO 2342343
                        </p>
                        <p className="mt-4 font-semibold">
                            Site designed by{" "}
                            <a
                                className="underline"
                                href="https://muir.in"
                                target="_blank"
                                rel="noreferrer"
                            >
                                Calum Muir
                            </a>
                        </p>
                    </div>
                </footer>
            </main>
        </div>
    );
};
