import React from "react";
import { Card, CardContent } from "@/components/ui/card";
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: "/news" },
    { label: "Support Us", href: "/support" },
    { label: "Contact", href: "/contact" },
];

const cardData = [
    {
        title: "About Us",
        imageUrl: "/about-640.webp",
        imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
        href: "/about",
    },
    {
        title: "Support Us",
        imageUrl: "/support-640.webp",
        imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
        href: "/support",
    },
    {
        title: "Contact",
        imageUrl: "/contact-640.webp",
        imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
        href: "/contact",
    },
];

export const Desktop = (): JSX.Element => {
    usePageMeta({ title: "Home", path: "/" });
    return (
        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
            <main className="w-full">
                <section className="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
                    <div className="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden">
                        <img
                            className="absolute inset-0 h-full w-full object-cover"
                            alt=""
                            src="/Samantha-and-Connolly-1280.webp"
                            srcSet="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
                            sizes="100vw"
                            loading="eager"
                            fetchpriority="high"
                            decoding="async"
                        />
                        <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-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]">
                            <div className="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
                                <h1 className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
                                    <span className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
                                        Enriching lives through horses in
                                        the{" "}
                                    </span>
                                    <span className="underline">Highlands</span>
                                    <span className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
                                        {" "}
                                        since{" "}
                                    </span>
                                    <span className="underline">1975</span>
                                    <span className="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
                                        .
                                    </span>
                                </h1>
                            </div>
                        </div>
                        <div className="relative pb-16 sm:pb-[42px]">
                            <div className="flex justify-end px-4 sm:px-6">
                                <blockquote className="max-w-[520px] rounded-[7px] bg-black/35 px-5 py-5 sm:px-6 sm:py-6 [font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3] backdrop-blur-sm">
                                    &quot;Our mission is to bring about
                                    meaningful and positive changes in the
                                    health and well-being of people with
                                    physical or mental disabilities through
                                    activities with our horses and ponies.&quot;
                                </blockquote>
                            </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 sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0">
                    <div className="w-full">
                        <div className="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
                            <div className="text-center">
                                <p className="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]">
                                    Find out more about who we are, what we do
                                    and how you can support us to help make a
                                    difference.
                                </p>
                                <div className="mt-4 mx-auto h-[2px] w-16 bg-black/60" />
                            </div>

                            <div className="mt-8 sm:mt-[60px]">
                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]">
                                    {cardData.map((card, index) => (
                                        <Card
                                            key={index}
                                            className="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent"
                                        >
                                            <a
                                                className="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
                                                href={card.href}
                                            >
                                                <CardContent className="relative p-2.5 h-full flex flex-col overflow-hidden">
                                                    <img
                                                        className="absolute inset-0 h-full w-full object-cover"
                                                        alt={`${card.title} background`}
                                                        src={card.imageUrl}
                                                        srcSet={
                                                            card.imageSrcSet
                                                        }
                                                        sizes="(min-width: 640px) 33vw, 100vw"
                                                        loading="lazy"
                                                        decoding="async"
                                                    />
                                                    <div className="absolute inset-0 bg-black/40" />
                                                    <div className="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
                                                        <h3 className="group-hover:underline group-focus-visible:underline group-active:underline [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
                                                            {card.title}
                                                        </h3>
                                                    </div>
                                                </CardContent>
                                            </a>
                                        </Card>
                                    ))}
                                </div>
                            </div>

                            <div className="mt-6 sm:mt-8">
                                <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-[#d6d6d6] border-t border-black/20 px-6 sm:px-8 py-6 sm:py-8">
                                    <div className="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]">
                                        Highland Group RDA is a member of the
                                        National Riding for the Disabled
                                        Association (RDA), and of the Grampian
                                        and Highland Regional RDA.
                                        <br />
                                        <br />
                                        We are a registered Scottish Charitable
                                        Incorporated Organisation (SC007357).
                                    </div>
                                    <a
                                        href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
                                        target="_blank"
                                        rel="noreferrer"
                                        aria-label="View Highland Group RDA on the OSCR register"
                                    >
                                        <img
                                            className="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
                                            alt="Small mono"
                                            src="/small-mono.webp"
                                            loading="lazy"
                                            decoding="async"
                                        />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <SiteFooter fullBleedOnMobile />
            </main>
        </div>
    );
};