---
import Base from "../../layouts/Base.astro";
import SiteHeader from "../../components/SiteHeader.astro";
import SiteFooter from "../../components/SiteFooter.astro";
import { navigationItems } from "../../lib/navigation";
import { newsArticles, formatNewsDate } from "../../lib/news";

export function getStaticPaths() {
  return newsArticles.map((article) => ({
    params: { slug: article.slug },
    props: { article },
  }));
}

const { article } = Astro.props;
---

<Base
  title={article.title}
  path={`/events/${article.slug}`}
  description={article.summary}
  image={article.image || "/news.webp"}
>
  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
    <main class="w-full">
      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
        <div
          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
          style={`background-image: url(${article.image || "/news.webp"});`}
        >
          <div class="absolute inset-0 bg-black/45"></div>
          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
          <div class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8">
            <div class="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 class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
                {formatNewsDate(article.date)}
              </p>
              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
                {article.title}
              </h1>
              <p class="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
            class="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 class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
          </a>
        </div>
      </section>

      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
          <div
            class="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]"
            set:html={article.html}
          ></div>
          <div class="mt-8">
            <a class="[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>
</Base>
