---
import BaseLayout from "../../../layouts/BaseLayout.astro";
import SiteHeader from "../../../components/SiteHeader.astro";
import SiteFooter from "../../../components/SiteFooter.astro";
import { navigationItems } from "../../../lib/navigation";
import { getArticles } from "../../../lib/news";

const allArticles = await getArticles();
const currentPage = Number(Astro.params.page ?? "1");
const PER_PAGE = 6;
const totalPages = Math.ceil(allArticles.length / PER_PAGE);
const start = (currentPage - 1) * PER_PAGE;
const pagedArticles = allArticles.slice(start, start + PER_PAGE);
const pageHref = (page: number) => (page === 1 ? "/events" : `/events/page/${page}`);

const pageSeo = {
    title: `News — Page ${currentPage}`,
    description:
        "Stay updated with Highland Group RDA news, events, and stories.",
    keywords:
        "Highland RDA news, RDA events, disability riding stories, RDA updates",
    canonicalPath: `/events/page/${currentPage}`,
};

const categoryColors: Record<string, { bg: string; text: string }> = {
    News:        { bg: "#e8f0e7", text: "#4a7040" },
    Events:      { bg: "#e7eaf5", text: "#3a4a80" },
    Fundraising: { bg: "#fdf3cc", text: "#7a6010" },
};

function formatDate(date: string) {
    const d = new Date(date);
    if (isNaN(d.getTime())) return date;
    return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
}
---

<BaseLayout {...pageSeo}>
    <style>
        #site-nav {
            transition: background 0.4s ease, backdrop-filter 0.4s ease;
        }
        #site-nav.scrolled {
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(8px);
        }
        .post-card { transition: transform 0.28s ease; }
        .post-card:hover { transform: translateY(-4px); }
        .post-card:hover .post-title { text-decoration: underline; }
        .post-card-img { transition: transform 0.5s ease; }
        .post-card:hover .post-card-img { transform: scale(1.05); }

        .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px; }
        @media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
    </style>

    <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
        <SiteHeader navigationItems={navigationItems} theme="dark" />
    </div>

    <div class="flex flex-col min-h-screen bg-[#e2e2e2]">
        <main class="w-full">

            <!-- ── HERO ── -->
            <section class="relative w-full overflow-hidden" style="min-height: 50vh;">
                <img
                    class="absolute inset-0 h-full w-full object-cover"
                    style="object-position: 50% 30%;"
                    alt=""
                    src="/hero-events.webp"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5) 100%);"
                />
                <div
                    class="relative flex flex-col justify-end"
                    style="min-height: 50vh; padding: 120px 28px 64px;"
                >
                    <div style="max-width: 600px;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
                            Events &amp; News — Page {currentPage}
                        </p>
                        <div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
                        <h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1;">
                            What's on at Highland Group RDA.
                        </h1>
                    </div>
                </div>
            </section>

            <!-- ── ARTICLE GRID ── -->
            <section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; margin: 0 auto;">

                    <div class="post-grid">
                        {pagedArticles.map((post) => (
                            <a
                                class="post-card"
                                href={`/events/${post.slug}`}
                                style="background: #d6d6d6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;"
                            >
                                <div style="height: 200px; overflow: hidden; position: relative; flex-shrink: 0;">
                                    {post.image ? (
                                        <img
                                            src={post.image}
                                            alt={post.title}
                                            class="post-card-img"
                                            style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
                                            loading="lazy"
                                            decoding="async"
                                        />
                                    ) : (
                                        <div style="width: 100%; height: 100%; background: #1e2e1a;" />
                                    )}
                                </div>
                                <div style="padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1;">
                                    <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                                        <span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[post.category]?.bg ?? "#c8c8c8"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[post.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
                                            {post.category}
                                        </span>
                                        <span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.45);">
                                            {formatDate(post.date)}
                                        </span>
                                    </div>
                                    <h2 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: #000; line-height: 1.3;">
                                        {post.title}
                                    </h2>
                                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.6); line-height: 1.65; flex: 1;">
                                        {post.summary}
                                    </p>
                                    <span style="display: inline-flex; align-items: center; gap: 6px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #7DA371; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;">
                                        Read more
                                        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="#7DA371" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M3 8h10M9 4l4 4-4 4"/>
                                        </svg>
                                    </span>
                                </div>
                            </a>
                        ))}
                    </div>

                    <!-- Pagination -->
                    {totalPages > 1 && (
                        <nav aria-label="Pagination" style="display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;">
                            {currentPage > 1 ? (
                                <a
                                    href={pageHref(currentPage - 1)}
                                    style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000; text-decoration: none;"
                                >
                                    Previous
                                </a>
                            ) : (
                                <span style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.08); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.3);">
                                    Previous
                                </span>
                            )}
                            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                                <a
                                    href={pageHref(page)}
                                    aria-current={page === currentPage ? "page" : undefined}
                                    style={`width: 40px; height: 40px; border-radius: 9999px; border: 1.5px solid ${page === currentPage ? "#000" : "rgba(0,0,0,0.2)"}; background: ${page === currentPage ? "#000" : "transparent"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: ${page === currentPage ? "#fff" : "#000"}; display: flex; align-items: center; justify-content: center; text-decoration: none;`}
                                >
                                    {page}
                                </a>
                            ))}
                            {currentPage < totalPages ? (
                                <a
                                    href={pageHref(currentPage + 1)}
                                    style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000; text-decoration: none;"
                                >
                                    Next
                                </a>
                            ) : (
                                <span style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.08); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.3);">
                                    Next
                                </span>
                            )}
                        </nav>
                    )}

                </div>
            </section>

        </main>
        <SiteFooter fullBleedOnMobile />
    </div>

    <script>
        const nav = document.getElementById("site-nav");
        if (nav) {
            window.addEventListener("scroll", () => {
                nav.classList.toggle("scrolled", window.scrollY > 40);
            }, { passive: true });
        }
    </script>
</BaseLayout>