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

export const metadata: Metadata = {
  title: "Atlas Conditions — OrthoGlobe",
  description:
    "Search and filter the full OrthoGlobe Atlas library of orthopaedic conditions by region and category.",
};

export const dynamic = "force-dynamic";

export default async function AtlasConditionsPage() {
  const [regions, conditions] = await Promise.all([
    listPublishedRegions(),
    listPublishedConditions(),
  ]);
  return (
    <>
      <AtlasHero
        eyebrow="Atlas · Conditions"
        title="All conditions, one library."
        lede="Every orthopaedic condition in the Atlas, searchable and filterable by anatomical region. Each entry is written for clinicians and cites the evidence where it matters."
        backHref="/products/atlas"
        backLabel="Atlas overview"
      />

      <section className="bg-white py-10 md:py-14">
        <Container>
          <div className="mx-auto max-w-6xl">
            <ConditionsBrowser conditions={conditions} regions={regions} />
          </div>
        </Container>
      </section>
    </>
  );
}
