---
import Base from "../layouts/Base.astro";
import Header from "../components/layout/Header.astro";
import Footer from "../components/layout/Footer.astro";
import CommunityCard from "../components/communities/CommunityCard.astro";
import { getLiveCollection } from "astro:content";

const communitiesResult = await getLiveCollection("communities");
const communities = communitiesResult.entries?.map((entry) => entry.data) ?? [];

const REGION_ORDER = ["North America — USA", "North America — Canada", "South America", "Europe", "Online", "Other"];
const grouped = new Map<string, typeof communities>();
for (const community of communities) {
  const region = community.region ?? "Other";
  if (!grouped.has(region)) grouped.set(region, []);
  grouped.get(region)!.push(community);
}
const regionRank = (r: string) => {
  const i = REGION_ORDER.indexOf(r);
  return i === -1 ? REGION_ORDER.length : i;
};
const regions = [...grouped.keys()].sort(
  (a, b) => regionRank(a) - regionRank(b) || a.localeCompare(b),
);
---

<Base title="Communities" description="Find AT Protocol communities around the world.">
  <Header slot="header" />

  <section class="communities-page section">
    <div class="container">
      <h1>Communities</h1>
      <p class="communities-sub">
        AT Protocol communities around the world. Each group is run independently by local organizers.
        Find one near you or <a href="https://bsky.app/profile/ngerakines.me" rel="noopener noreferrer" target="_blank">start your own</a>.
      </p>

      {regions.map((region) => (
        <section class="region-group">
          <h2 class="region-heading">{region}</h2>
          <div class="communities-grid">
            {grouped.get(region)!.map(c => (
              <div class="community-entry">
                <div class="community-entry__primary">
                  <CommunityCard {...c} />
                  {c.description && <p class="community-desc">{c.description}</p>}
                </div>
              </div>
            ))}
          </div>
        </section>
      ))}
    </div>
  </section>

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

<style>
  .communities-page h1 {
    margin-bottom: var(--space-sm);
  }

  .communities-sub {
    color: var(--foreground-secondary);
    font-size: var(--text-sm);
    max-width: 55ch;
    line-height: var(--leading-relaxed);
  }

  .region-group {
    margin-top: var(--space-xl);
  }

  .region-heading {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--foreground-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-base);
  }

  .communities-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .community-entry {
    display: block;
    align-items: center;
    gap: var(--space-base) var(--space-lg);
  }

  .community-entry__primary {
    display: flex;
    align-items: center;
    gap: var(--space-base);
    flex-wrap: wrap;
    min-width: 0;
  }

  .community-desc {
    font-size: var(--text-sm);
    color: var(--foreground-secondary);
  }
</style>