/* global React, Nav, Footer, Tag, useApi */

const PROGRAMS = [
  { id: "P-01", title: "Webinars", desc: "Monthly educational sessions featuring leaders in digital psychiatry, AI, and clinical innovation. Free and open to the public.", count: "12 / yr" },
  { id: "P-02", title: "Digital Navigator Training", desc: "A four-module curriculum grounded in Self-Determination Theory. Implemented at seven partner institutions across four continents.", count: "7 sites" },
  { id: "P-03", title: "JMIR Mental Health", desc: "SODP's official journal partnership supporting publication and dissemination of research in digital mental health worldwide.", count: "Open access" },
];

const PARTNERS = [
  { id: "01", name: "Beth Israel Deaconess Medical Center", loc: "Boston, USA", lat: "42.3°N" },
  { id: "02", name: "University of Sydney", loc: "Sydney, Australia", lat: "33.9°S" },
  { id: "03", name: "Centre for Addiction and Mental Health", loc: "Toronto, Canada", lat: "43.7°N" },
  { id: "04", name: "Brandenburg Medical School", loc: "Neuruppin, Germany", lat: "52.9°N" },
  { id: "05", name: "UNMC College of Nursing", loc: "Omaha, USA", lat: "41.3°N" },
  { id: "06", name: "University of Colorado Anschutz", loc: "Aurora, USA", lat: "39.7°N" },
  { id: "07", name: "UTHealth Houston", loc: "Houston, USA", lat: "29.8°N" },
];

/* ────────────────────────────────────────────────────────── */

function Header() {
  return (
    <section style={{ padding: "72px 0 48px", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <span className="rule-thick" />
          <span className="eyebrow">About the Society</span>
        </div>
        <h1 className="t-display" style={{ maxWidth: 1000 }}>
          A global community connecting clinicians, researchers, and technologists in digital mental health.
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: 720 }}>
          The Society of Digital Psychiatry brings together professionals across disciplines and geographies to share knowledge, advance evidence, and set standards for the field.
        </p>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function MissionVision() {
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 01</span>
            <span className="eyebrow">Mission & Vision</span>
          </div>
        </div>
        <div className="grid-split" style={{ border: "1px solid var(--rule)", borderRadius: 4, overflow: "hidden" }}>
          <div style={{ padding: 36, borderRight: "1px solid var(--rule)" }}>
            <span className="eyebrow eyebrow-ink">Mission</span>
            <p className="t-h2" style={{ marginTop: 14, color: "var(--ink)", fontWeight: 500 }}>
              Connect professionals to innovations in mental health by linking advancements as technologies and companies expand in this field.
            </p>
          </div>
          <div style={{ padding: 36, background: "var(--indigo-900)", color: "white", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 90% 10%, rgba(139,134,224,0.22), transparent 55%)", pointerEvents: "none" }} />
            <div style={{ position: "relative" }}>
              <span className="eyebrow" style={{ color: "var(--indigo-300)" }}>Vision</span>
              <p className="t-h2" style={{ marginTop: 14, color: "white", fontWeight: 500 }}>
                An international hub where digital psychiatry professionals connect, collaborate, and advance the field.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function Programs() {
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 02</span>
            <span className="eyebrow">Programs & Initiatives</span>
          </div>
        </div>
        <div className="table-scroll">
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: 70 }}>ID</th>
                <th style={{ width: "26%" }}>Program</th>
                <th>Description</th>
                <th style={{ width: 130 }} className="col-num">Scope</th>
              </tr>
            </thead>
            <tbody>
              {PROGRAMS.map(p => (
                <tr key={p.id}>
                  <td className="col-mono">{p.id}</td>
                  <td><strong style={{ fontSize: 15, color: "var(--ink)" }}>{p.title}</strong></td>
                  <td className="body-sm" style={{ color: "var(--ink-3)" }}>{p.desc}</td>
                  <td className="col-mono col-num" style={{ color: "var(--indigo-500)", fontWeight: 500 }}>{p.count}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function Network() {
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 03</span>
            <span className="eyebrow">Network · 500+ members across 50 countries</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            Fig. 01 · Members by country
          </span>
        </div>

        <div className="map-wrap" style={{ padding: 0, overflow: "hidden" }}>
          <img
            src="images/World%20Map.png"
            alt="Choropleth world map showing the global distribution of SODP members across 50+ countries, weighted by membership."
            style={{ width: "100%", display: "block" }}
          />
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "14px 20px", borderTop: "1px solid var(--rule)", background: "white",
            fontFamily: "var(--type-mono)", fontSize: 11, letterSpacing: "0.04em", color: "var(--ink-3)",
          }}>
            <span>Scale: 1 to 200 members per country</span>
            <span style={{ color: "var(--ink-4)" }}>Source: SODP membership registry · 2025</span>
          </div>
        </div>

        {/* Partner site table */}
        <div style={{ marginTop: 56 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
            <span className="eyebrow eyebrow-ink">Clinical partner sites · {PARTNERS.length}</span>
            <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
              Digital Navigator Training
            </span>
          </div>
          <div className="table-scroll">
            <table className="data-table">
              <thead>
                <tr>
                  <th style={{ width: 60 }}>#</th>
                  <th>Institution</th>
                  <th style={{ width: 220 }}>Location</th>
                  <th style={{ width: 120 }} className="col-num">Latitude</th>
                </tr>
              </thead>
              <tbody>
                {PARTNERS.map(p => (
                  <tr key={p.id}>
                    <td className="col-mono">{p.id}</td>
                    <td><strong style={{ fontSize: 14.5, color: "var(--ink)" }}>{p.name}</strong></td>
                    <td className="col-mono">{p.loc}</td>
                    <td className="col-mono col-num">{p.lat}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function Leaders() {
  const { data, loading } = useApi("members", []);
  const members = Array.isArray(data)
    ? data.slice().sort((a, b) => (a.order || 0) - (b.order || 0))
    : [];
  const count = members.length || 11;
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="head-l">
            <span className="num">/ 04</span>
            <span className="eyebrow">Co-Leadership · {count} co-leaders</span>
          </div>
          <a href="members.html" className="link" style={{ fontSize: 11 }}>Full bios →</a>
        </div>

        <div className="grid-intro" style={{ marginBottom: 36 }}>
          <h2 className="t-h1">A leadership board spanning four continents.</h2>
          <p className="body" style={{ color: "var(--ink-3)" }}>
            The Society's leadership is deliberately international. Clinical psychiatrists, nurses, researchers, lived-experience advocates, and implementation specialists together shape the field's standards and direction.
          </p>
        </div>

        <div className="portrait-grid">
          {loading && members.length === 0
            ? Array.from({ length: 11 }).map((_, i) => (
                <div key={i} className="portrait" style={{ pointerEvents: "none" }}>
                  <div className="img-wrap" style={{ background: "var(--rule)" }} />
                  <div className="meta">
                    <div className="name" style={{ background: "var(--rule)", color: "transparent", borderRadius: 3 }}>Loading name</div>
                  </div>
                </div>
              ))
            : members.map(p => (
                <div key={p.id || p.name} className="portrait">
                  <div className="img-wrap">
                    {p.avatar
                      ? <img src={p.avatar} alt={p.name} loading="lazy" />
                      : <span className="ini">{p.ini}</span>}
                  </div>
                  <div className="meta">
                    <div className="name">{p.name}</div>
                    <div className="aff">{p.role}</div>
                  </div>
                </div>
              ))}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function AboutPage() {
  return (
    <>
      <Nav active="about" />
      <Header />
      <MissionVision />
      <Programs />
      <Network />
      <Leaders />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage />);