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

const LEADERSHIP = [
  { name: "John Torous, MD", aff: "BIDMC · Harvard Medical School", img: null, ini: "JT" },
  { name: "Kathryn Taylor Ledley, BA", aff: "Division of Digital Psychiatry, BIDMC", img: null, ini: "KL" },
  { name: "Carla Gorban", aff: "University of Sydney", img: "images/carla-gorban.jpg", ini: "CG" },
  { name: "Gillian Strudwick, RN, PhD", aff: "Centre for Addiction and Mental Health, Toronto", img: "images/gillian-strudwick.jpg", ini: "GS" },
  { name: "Julian Schwarz, MD", aff: "Brandenburg Medical School, Germany", img: null, ini: "JS" },
  { name: "Soumya Choudhary, MSc, PhD", aff: "Digital Psychiatry Research Group, India", img: "images/soumya-choudhary.webp", ini: "SC" },
  { name: "Margaret R. Emerson, DNP", aff: "University of Nebraska Medical Center", img: "images/margaret-emerson.jpg", ini: "ME" },
  { name: "Michelle Patriquin, PhD", aff: "UTHealth Houston", img: "images/michelle-patriquin.webp", ini: "MP" },
  { name: "Allison G. Dempsey, MEd, PhD", aff: "University of Colorado Anschutz", img: null, ini: "AD" },
  { name: "Jason Bantjes, PhD", aff: "South African Medical Research Council", img: "images/jason-bantjes.webp", ini: "JB" },
  { name: "Laura Ospina-Pinillos, MD, PhD", aff: "Pontificia Universidad Javeriana, Colombia", img: null, ini: "LO" },
  { name: "Ben Nelson", aff: "Society of Digital Psychiatry", img: "images/ben-nelson.webp", ini: "BN" },
];

const PROGRAMS = [
  { id: "P-01", title: "Webinars", desc: "Monthly educational sessions featuring leaders in digital psychiatry, AI, and clinical innovation. Open to all members.", 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: "AI Standards (AI++)", desc: "Objective evaluation frameworks for AI in mental health through MindBench.ai, systematic reviews, and bias research. Built with NAMI.", count: "1 platform" },
  { id: "P-04", 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/sodp-world-map.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 — 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() {
  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 · {LEADERSHIP.length} co-leaders</span>
          </div>
        </div>

        <div className="grid-intro" style={{ marginBottom: 36 }}>
          <h2 className="t-h1">Eleven co-leaders, 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 who together shape the field's standards and direction.
          </p>
        </div>

        <div className="portrait-grid">
          {LEADERSHIP.map(p => (
            <div key={p.name} className="portrait">
              <div className="img-wrap">
                {p.img
                  ? <img src={p.img} alt={p.name} />
                  : <span className="ini">{p.ini}</span>}
              </div>
              <div className="meta">
                <div className="name">{p.name}</div>
                <div className="aff">{p.aff}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

function CTA() {
  return (
    <section style={{ padding: "100px 0", background: "var(--indigo-900)", color: "white", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 80% 30%, rgba(139,134,224,0.18), transparent 55%)", pointerEvents: "none" }} />
      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <h2 className="t-display" style={{ color: "white", fontSize: "clamp(36px, 4vw, 56px)" }}>
          Join the Society.
        </h2>
        <p className="lede" style={{ color: "rgba(255,255,255,0.78)", marginTop: 20, maxWidth: 540, margin: "20px auto 0" }}>
          Membership is free and open to clinicians, researchers, students, and professionals working in digital mental health.
        </p>
        <div style={{ marginTop: 32 }}>
          <a href="apply.html" className="btn btn-onDark">Apply to Join →</a>
        </div>
      </div>
    </section>
  );
}

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

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

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