import React from "react";
import { useRoute } from "wouter";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { formatNewsDate, getNewsArticle } from "@/lib/news";
import { usePageMeta } from "@/lib/seo";
import NotFound from "@/pages/not-found";

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 NewsArticle = (): JSX.Element => {
    const [, params] = useRoute("/events/:slug");
    const article = getNewsArticle(params?.slug ?? "");

    if (!article) {
        return <NotFound />;
    }

    usePageMeta({
        title: article.title,
        path: `/events/${article.slug}`,
        description: article.summary,
        image: article.image,
    });

    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: article.image
                                ? `url(${article.image})`
                                : "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">
                                    {formatNewsDate(article.date)}
                                </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]">
                                    {article.title}
                                </h1>
                                <p className="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6]">
                                    {article.summary}
                                </p>
                            </div>
                        </div>
                        <a
                            className="absolute bottom-2 left-4 sm:bottom-4 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="prose prose-neutral max-w-[720px] text-base sm:text-lg [font-family:'Public_Sans',Helvetica] prose-headings:font-['Merriweather',Helvetica] prose-headings:font-bold prose-p:leading-[1.75] prose-li:leading-[1.75]"
                            dangerouslySetInnerHTML={{ __html: article.html }}
                        />
                        <div className="mt-8">
                            <a
                                className="[font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline"
                                href="/events"
                            >
                                Back to news
                            </a>
                        </div>
                    </div>
                </section>
                <SiteFooter fullBleedOnMobile />
            </main>
        </div>
    );
};
