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 Accessibility = (): JSX.Element => {
    usePageMeta({
        title: "Accessibility",
        path: "/accessibility",
        description:
            "Accessibility statement for Highland Group RDA and our commitment to inclusive access.",
    });

    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 pb-0">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 pt-6 sm:pt-4 pb-6 sm:pb-8">
                        <SiteHeader
                            navigationItems={navigationItems}
                            className="px-0"
                        />
                        <p className="mt-6 [font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
                            Accessibility Statement
                        </p>
                        <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-[34px] sm:text-[44px] leading-[1.15]">
                            Accessibility Statement
                        </h1>

                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            Highland Group RDA is committed to making our
                            website as accessible and inclusive as possible, so
                            that everyone can use it with confidence.
                        </p>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            We aim for our website to be easy to understand,
                            easy to navigate, and usable across a range of
                            devices and assistive technologies.
                        </p>

                        <h2 className="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            What we’re doing to support accessibility
                        </h2>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            We have designed this website so that it:
                        </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>Uses clear language and simple page layouts</li>
                            <li>
                                Works on mobile phones, tablets, and desktop
                                computers
                            </li>
                            <li>Can be navigated using a keyboard</li>
                            <li>
                                Uses readable font sizes and good colour
                                contrast
                            </li>
                            <li>
                                Is compatible with common screen readers and
                                accessibility tools
                            </li>
                        </ul>
                        <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            Behind the scenes, we use well-supported systems and
                            follow recognised accessibility guidance when adding
                            or updating content.
                        </p>

                        <h2 className="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Known limitations
                        </h2>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            We recognise that no website is perfect. Some
                            documents or older content may not yet be fully
                            accessible, particularly where materials were
                            created before accessibility standards were more
                            widely adopted.
                        </p>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            If you encounter any difficulties, we are very happy
                            to help.
                        </p>

                        <h2 className="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Alternative formats and support
                        </h2>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            If you need information from this website in a
                            different format — such as large print, plain text,
                            or by talking things through — please let us know.
                        </p>
                        <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 at:
                        </p>
                        <p className="mt-2 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            Email: info@highlandgrouprda.org.uk
                        </p>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            We will do our best to respond promptly and support
                            your needs.
                        </p>

                        <h2 className="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Accessibility beyond the website
                        </h2>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            Accessibility is central to everything we do as a
                            riding for the disabled group. Information shared
                            through our website, application forms, and
                            communications helps us understand individual needs
                            so that appropriate support can be provided safely
                            and respectfully during activities.
                        </p>

                        <h2 className="mt-8 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                            Continuous improvement
                        </h2>
                        <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]">
                            We are committed to improving accessibility over
                            time. As the website evolves, we will continue to
                            review and enhance it to ensure it remains welcoming
                            and usable for everyone.
                        </p>
                    </div>
                </section>
                <SiteFooter fullBleedOnMobile />
            </main>
        </div>
    );
};
