import type { Metadata } from "next";
import { Container } from "@/components/Container";
import { AtlasHero } from "@/components/atlas/AtlasHero";
import { RegionCard } from "@/components/atlas/RegionCard";
import {
  listPublishedRegions,
  listPublishedConditions,
} from "@/lib/atlas/queries";

export const metadata: Metadata = {
  title: "Atlas Regions — OrthoGlobe",
  description:
    "Browse the OrthoGlobe Atlas by body region — knee, hip, shoulder, spine, foot and ankle, hand and wrist, and elbow.",
};

export const dynamic = "force-dynamic";

export default async function AtlasRegionsPage() {
  const [regions, conditions] = await Promise.all([
    listPublishedRegions(),
    listPublishedConditions(),
  ]);

  const countByRegion = new Map<string, number>();
  for (const c of conditions) {
    countByRegion.set(c.regionSlug, (countByRegion.get(c.regionSlug) ?? 0) + 1);
  }

  return (
    <>
      <AtlasHero
        eyebrow="Atlas · Regions"
        title="Browse by body region."
        lede={`${regions.length} anatomical regions, each with a curated library of orthopaedic conditions written for clinicians. Pick a region to see its full condition list.`}
        backHref="/products/atlas"
        backLabel="Atlas overview"
      />

      <section className="bg-white py-10 md:py-14">
        <Container>
          <div className="mx-auto max-w-6xl">
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {regions.map((r, i) => (
                <RegionCard
                  key={r.slug}
                  slug={r.slug}
                  name={r.name}
                  summary={r.summary}
                  conditionCount={countByRegion.get(r.slug) ?? 0}
                  index={i}
                  photoUrl={r.photoUrl}
                  photoAlt={r.photoAlt}
                />
              ))}
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}
