import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { formatNewsDate, newsArticles } from "@/lib/news";
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 News = (): JSX.Element => {
    usePageMeta({
        title: "News",
        path: "/events",
        description:
            "News, events, and updates from Highland Group RDA and our community.",
    });
    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(/news.webp)",
                        }}
                    >
                        <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-28 pt-6 sm:pb-20 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">
                                    Latest News
                                </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]">
                                    Updates from Highland Group RDA
                                </h1>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[700px]">
                                    Stories, milestones, and updates from the
                                    yard, our riders, volunteers, and
                                    supporters.
                                </p>
                            </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 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="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            {newsArticles.map((item) => (
                                <article key={item.slug}>
                                    <a
                                        className="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
                                        href={`/events/${item.slug}`}
                                        aria-label={`Read ${item.title}`}
                                    >
                                        <div className="flex flex-col gap-4">
                                            {item.image && (
                                                <div
                                                    className="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
                                                    style={{
                                                        backgroundImage: `url(${item.image})`,
                                                    }}
                                                />
                                            )}
                                            <p className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
                                                {formatNewsDate(item.date)}
                                            </p>
                                            <div className="h-px w-full bg-black/20" />
                                            <h2 className="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
                                                {item.title}
                                            </h2>
                                            <p className="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
                                                {item.summary}
                                            </p>
                                            <span className="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
                                                Read more
                                            </span>
                                        </div>
                                    </a>
                                </article>
                            ))}
                        </div>
                    </div>
                </section>
                <SiteFooter fullBleedOnMobile />
            </main>
        </div>
    );
};
