import React from "react";

type SiteFooterProps = {
    fullBleedOnMobile?: boolean;
};

export const SiteFooter = ({
    fullBleedOnMobile = false,
}: SiteFooterProps): JSX.Element => {
    const outerClass = fullBleedOnMobile
        ? "mt-0 w-full max-w-[1200px] mx-auto px-0 sm:px-8"
        : "mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8";
    return (
        <footer className={outerClass}>
            <div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-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{" "}
                        <a
                            className="underline"
                            href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
                            target="_blank"
                            rel="noreferrer"
                        >
                            SC007357
                        </a>
                    </p>
                    <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                        <p className="font-semibold">
                            Highland Group RDA, Sandycroft, Reelig, Kirkhill,
                            IV5 7PP
                        </p>
                        <p className="font-semibold">
                            Tel: +447500 203226 · Email:{" "}
                            <a
                                className="underline"
                                href="mailto:info@highlandgrouprda.org.uk?subject=Website%20visitor%20contact"
                            >
                                info@highlandgrouprda.org.uk
                            </a>
                        </p>
                    </div>
                    <p className="mt-4 font-semibold">
                        <a className="underline" href="/privacy">
                            Privacy Policy
                        </a>{" "}
                        ·{" "}
                        <a className="underline" href="/accessibility">
                            Accessibility
                        </a>
                    </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>
            </div>
        </footer>
    );
};
