---
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 featured = allArticles[0];
const rest = allArticles.slice(1);

const pageSeo = {
    title: "News",
    description:
        "Stay updated with Highland Group RDA news, events, and stories. Discover how our riders, volunteers, and community are making a difference every day.",
    keywords:
        "Highland RDA news, RDA events, disability riding stories, RDA updates, equestrian therapy news, Highlands charity events",
    canonicalPath: "/events",
};

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" });
}

const upcomingEvents = [
    { date: "Spring 2026", day: "TBC",       title: "Sessions restart at new venue",             time: "TBC",              type: "Sessions" },
    { date: "Summer 2026", day: "TBC",       title: "Open Day — venue to be confirmed",          time: "TBC",              type: "Events" },
    { date: "Summer 2026", day: "TBC",       title: "Fundraising coffee morning",                time: "TBC",              type: "Fundraising" },
];

const typeColors: Record<string, string> = {
    Events:      "#7DA371",
    Sessions:    "#5b8fbe",
    Fundraising: "#b8962e",
};
---

<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);
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .anim-fade-up { animation: fadeUp 0.9s ease both; }

        .filter-pill {
            padding: 9px 22px;
            border-radius: 9999px;
            border: 1.5px solid rgba(0,0,0,0.18);
            font-family: 'Public Sans', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            background: transparent;
            color: #000;
            transition: all 0.2s ease;
        }
        .filter-pill:hover { border-color: #7DA371; color: #7DA371; }
        .filter-pill.active { background: #7DA371; border-color: #7DA371; color: #fff; }

        .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; }
        @media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }

        .event-row { transition: background 0.2s ease; }
        .event-row:hover { background: rgba(125,163,113,0.09) !important; }

        @media (max-width: 767px) {
            .events-grid { grid-template-columns: 80px 1fr !important; }
            .events-grid-time, .events-grid-badge { display: none; }
        }
    </style>

    <!-- Fixed nav -->
    <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.88) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.72) 100%);"
                />
                <div
                    class="relative flex flex-col justify-end"
                    style="min-height: 50vh; padding: 120px 28px 64px;"
                >
                    <div class="anim-fade-up" 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
                        </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; margin-bottom: 18px;">
                            What's on at Highland Group RDA.
                        </h1>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.82); line-height: 1.65;">
                            Upcoming events, session news, and fundraising updates from our group.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ── UPCOMING EVENTS ── -->
            <section style="background: #1e2e1a; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; margin: 0 auto;">
                    <div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap;">
                        <div>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 10px;">
                                Coming up
                            </p>
                            <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; line-height: 1.2;">
                                Upcoming events &amp; sessions
                            </h2>
                        </div>
                        <a
                            href="/contact"
                            style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: rgba(246,241,232,0.6); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; flex-shrink: 0;"
                        >
                            Get in touch
                        </a>
                    </div>
                    <div style="border-top: 1px solid rgba(255,255,255,0.1);">
                        {upcomingEvents.map((ev) => (
                            <div
                                class="event-row"
                                style="display: grid; grid-template-columns: 120px 1fr auto auto; gap: 24px; align-items: center; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 6px;"
                            >
                                <div>
                                    <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #F6F1E8; line-height: 1;">
                                        {ev.date}
                                    </p>
                                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(246,241,232,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;">
                                        {ev.day}
                                    </p>
                                </div>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 16px; color: #F6F1E8; line-height: 1.35;">
                                    {ev.title}
                                </p>
                                <p class="events-grid-time" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(246,241,232,0.55); white-space: nowrap;">
                                    {ev.time}
                                </p>
                                <span
                                    class="events-grid-badge"
                                    style={`padding: 5px 14px; border-radius: 9999px; background: rgba(255,255,255,0.07); border: 1px solid ${typeColors[ev.type] || "#7DA371"}40; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${typeColors[ev.type] || "#7DA371"}; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;`}
                                >
                                    {ev.type}
                                </span>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

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

                    <!-- Header + filter pills -->
                    <div style="display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 24px; flex-wrap: wrap;">
                        <div>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.4); margin-bottom: 10px;">
                                Latest
                            </p>
                            <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 32px); color: #000; line-height: 1.15;">
                                News &amp; updates
                            </h2>
                        </div>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;" id="filter-pills">
                            {["All", "News", "Events", "Fundraising"].map((cat) => (
                                <button class={`filter-pill${cat === "All" ? " active" : ""}`} data-filter={cat}>
                                    {cat}
                                </button>
                            ))}
                        </div>
                    </div>

                    <!-- Featured post -->
                    {featured && (
                        <a
                            id="featured-card"
                            class="post-card"
                            href={`/events/${featured.slug}`}
                            data-category={featured.category}
                            style="position: relative; height: 420px; border-radius: 7px; overflow: hidden; margin-bottom: 16px; display: block;"
                        >
                            {featured.image ? (
                                <img
                                    src={featured.image}
                                    alt={featured.title}
                                    class="post-card-img"
                                    style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
                                    loading="lazy"
                                    decoding="async"
                                />
                            ) : (
                                <div style="position: absolute; inset: 0; background: #1e2e1a;" />
                            )}
                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 65%);" />
                            <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 36px 40px;">
                                <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;">
                                    <span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[featured.category]?.bg ?? "#d6d6d6"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[featured.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
                                        {featured.category}
                                    </span>
                                    <span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.55);">
                                        {formatDate(featured.date)}
                                    </span>
                                </div>
                                <h3 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: white; line-height: 1.2; max-width: 700px; margin-bottom: 12px;">
                                    {featured.title}
                                </h3>
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.65; max-width: 620px;">
                                    {featured.summary}
                                </p>
                            </div>
                        </a>
                    )}

                    <!-- Article grid -->
                    <div id="post-grid" class="post-grid">
                        {rest.map((post) => (
                            <a
                                class="post-card"
                                href={`/events/${post.slug}`}
                                data-category={post.category}
                                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>
                                    <h3 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}
                                    </h3>
                                    <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>

                    <!-- Empty state (hidden by default, shown by JS) -->
                    <div id="empty-state" style="display: none; text-align: center; padding: 60px 0;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.4);">
                            No posts in this category yet.
                        </p>
                    </div>

                </div>
            </section>

            <!-- ── NEWSLETTER ── -->
            <section style="background: #f5d445; padding: clamp(40px, 7vw, 56px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 780px; margin: 0 auto; text-align: center;">
                    <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 30px); color: #000; line-height: 1.2; margin-bottom: 12px;">
                        Stay up to date.
                    </h2>
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.6); line-height: 1.65; margin-bottom: 28px;">
                        Follow us on Facebook or get in touch directly — we share news, events, and updates with our community.
                    </p>
                    <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
                        <a
                            href="/facebook"
                            style="display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; border-radius: 9999px; padding: 13px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
                        >
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                            </svg>
                            Follow on Facebook
                        </a>
                        <a
                            href="/contact"
                            style="display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #000; border: 2px solid #000; border-radius: 9999px; padding: 11px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;"
                        >
                            Contact us
                        </a>
                    </div>
                </div>
            </section>

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

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

        // Category filter pills
        const pills = document.querySelectorAll<HTMLButtonElement>(".filter-pill");
        const featured = document.getElementById("featured-card");
        const gridCards = document.querySelectorAll<HTMLElement>("#post-grid .post-card");
        const emptyState = document.getElementById("empty-state");

        pills.forEach((pill) => {
            pill.addEventListener("click", () => {
                const filter = pill.dataset.filter ?? "All";

                pills.forEach((p) => p.classList.remove("active"));
                pill.classList.add("active");

                let visible = 0;

                if (filter === "All") {
                    if (featured) { (featured as HTMLElement).style.display = ""; visible++; }
                    gridCards.forEach((c) => { c.style.display = ""; visible++; });
                } else {
                    if (featured) {
                        const show = (featured as HTMLElement).dataset.category === filter;
                        (featured as HTMLElement).style.display = show ? "" : "none";
                        if (show) visible++;
                    }
                    gridCards.forEach((c) => {
                        const show = c.dataset.category === filter;
                        c.style.display = show ? "" : "none";
                        if (show) visible++;
                    });
                }

                if (emptyState) emptyState.style.display = visible === 0 ? "block" : "none";
            });
        });
    </script>
</BaseLayout>