// Catalog
function CatalogScreen({ nav, signedIn }) {
  const [filter, setFilter] = React.useState("all");
  return (
    <>
      <section className="catalog-hero container">
        <div className="eyebrow">Catalog</div>
        <h1 className="display-l">The <em style={{ fontStyle: "italic" }}>I Am Intuitive</em> Course</h1>
        <p>A video course built from the chapters of Dr. Arlene Dijamco's book <em>I Am Intuitive</em>. New modules release throughout the year; start with what calls to you.</p>

        <div className="catalog-banner">
          <div className="banner-text">
            <strong>Start with “Your Body as a Compass”</strong> — the first module in the series.
          </div>
          <Button size="sm" onClick={() => nav("/m/body-compass")}>Open module</Button>
        </div>
      </section>

      <div className="container">
        <div className="filter-bar" role="tablist" aria-label="Catalog filters">
          {[["all","All"],["free","Free"],["purchased","Purchased"]].map(([k,l]) => (
            <button key={k}
              className={`filter-chip${filter === k ? " is-active" : ""}`}
              disabled={k === "purchased" && !signedIn}
              title={k === "purchased" && !signedIn ? "Sign in to see your library" : undefined}
              onClick={() => k === "purchased" && !signedIn ? nav("/auth/sign-in") : setFilter(k)}>
              {l}{k === "purchased" && !signedIn ? " · sign in" : ""}
            </button>
          ))}
        </div>
      </div>

      <div className="container">
        {COURSE.parts.map((part) => (
          <section key={part.id} className="part-section">
            <div className="part-head">
              <div>
                <div className="part-eyebrow">{part.id === "I" ? "Part One" : part.id === "II" ? "Part Two" : part.id === "III" ? "Part Three" : "Part Four"}</div>
                <h2>{part.title.replace(/^Part [IV]+ — /, "")}</h2>
                <p>{part.blurb}</p>
              </div>
              <div className="part-right">
                <Chip tone="ghost">Buy the Part — $99 · save 15%</Chip>
              </div>
            </div>
            <div className="cards-grid">
              {part.modules.map((m) => (
                <ModuleCard key={m.id} module={m} part={part} onOpen={nav} />
              ))}
            </div>
          </section>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { CatalogScreen });