---
export const prerender = false;
import Base from "../layouts/Base.astro";
import Header from "../components/layout/Header.astro";
import Footer from "../components/layout/Footer.astro";
import Hero from "../components/layout/Hero.astro";
import PostCard from "../components/content/PostCard.astro";
import EventCard from "../components/events/EventCard.astro";
import CommunityCard from "../components/communities/CommunityCard.astro";
import GetInvolved from "../components/layout/GetInvolved.astro";
import { getLiveCollection } from "astro:content";
const communitiesResult = await getLiveCollection("communities");
const communities = (communitiesResult.entries ?? []).map(
  (entry) => entry.data,
);

const feedResult = await getLiveCollection("feed");
const mergedPosts = (feedResult.entries ?? [])
  .map((entry) => entry.data)
  .sort(
    (a, b) =>
      (b.publishedAt ?? b.sharedAt).getTime() -
      (a.publishedAt ?? a.sharedAt).getTime(),
  )
  .slice(0, 6);

const eventsResult = await getLiveCollection("events");
const events = (eventsResult.entries ?? [])
  .map((entry) => entry.data)
  .filter((event) => !event.isPast)
  .sort((a, b) => a.startsAt.getTime() - b.startsAt.getTime())
  .slice(0, 4);
---

<Base title="atmosphere.community">
  <Header slot="header" />

  <Hero subscriberCount={1000} groupCount={communities.length} />

  <!-- Latest Posts & Community Content -->
  <section class="section" aria-labelledby="posts-heading">
    <div class="container">
      <div class="section-header">
        <h2 id="posts-heading" class="section__title">
          Latest from the community
        </h2>
        <a href="/community-content" class="section__more">See all →</a>
      </div>
      <div class="posts-list">
        {
          mergedPosts.length > 0 ? (
            mergedPosts.map((post) => <PostCard {...post} />)
          ) : (
            <p class="empty-state">
              No posts yet. Check back soon or{" "}
              <a href="https://blog.atmosphere.community">visit the blog</a>.
            </p>
          )
        }
      </div>
    </div>
  </section>

  <!-- Upcoming Events -->
  <section class="section section--alt" aria-labelledby="events-heading">
    <div class="container">
      <div class="section-header">
        <h2 id="events-heading" class="section__title">Upcoming events</h2>
        <a href="/events" class="section__more">See all events →</a>
      </div>
      <div class="grid-2">
        {events.map((event) => <EventCard {...event} />)}
      </div>
    </div>
  </section>

  <!-- Communities -->
  <section class="section" aria-labelledby="communities-heading">
    <div class="container">
      <div class="section-header">
        <h2 id="communities-heading" class="section__title">
          Local communities
        </h2>
        <a href="/communities" class="section__more">See all →</a>
      </div>
      <div class="community-row">
        {
          communities
            .slice(0, 15)
            .map((community) => (
              <CommunityCard {...community} />
            ))
        }
      </div>
    </div>
  </section>

  <GetInvolved />

  <Footer slot="footer" />
</Base>

<style>
  .section--alt {
    background: var(--muted);
  }

  .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-base);
    margin-bottom: var(--space-xl);
  }

  .posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .community-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .empty-state {
    padding: var(--space-xl);
    text-align: center;
    color: var(--foreground-secondary);
    background: var(--muted);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }
</style>