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

const { useState } = React;

const SIGNUP_URL = "https://forms.office.com/r/FTSED461DV";

const NEEDS = [
  {
    name: "Digital Autonomy",
    def: "The capacity to utilize technology without external support for self-defined purposes",
    note: "motivated behavior toward agency & expression",
  },
  {
    name: "Digital Competence",
    def: "The capacity to accomplish tasks using technology and learn more about technology",
    note: "motivated behavior toward knowledge, skills & learning",
  },
  {
    name: "Digital Relatedness",
    def: "The capacity to utilize technology to connect with others and the world at large",
    note: "interpersonal connection",
  },
];

const INCLUDES = ["A Facilitator Guide", "Slides", "Assessments", "Practice Activities"];

const MODULES = [
  {
    id: "01",
    title: "Troubleshooting & Digital Autonomy",
    body: `In this lesson, trainees will be introduced to the fundamentals of the Digital Navigator (DN) role as it pertains to closing the “Digital Divide” in healthcare. Following a discussion of the three main functions of DNs (technical support, digital literacy training, and resource connection), trainees will be introduced in more depth to the technical support role of DNs. Trainees will learn about facilitating the Digital Autonomy of their clients by making them partners in resolving technical issues, both solving the immediate issue while also giving clients the tools to resolve future problems with their devices. Trainees will then be asked to work through sample technical support scenarios and then discuss as a full group. Depending on the size of the group, the session will end with an assessment of trainees consisting of either 1) a challenging technical support scenario that the trainee must walk the facilitator through, or 2) a multiple choice quiz about the content of the lesson.`,
  },
  {
    id: "02",
    title: "DOORS & Digital Competence",
    body: `In this lesson, trainees will be introduced to the process of assessing and improving their client’s Digital Competence. The lesson begins with a brief review of the last session’s focus, which was Digital Autonomy. Trainees then learn about Digital Competence, and the role they play in filling skills-gaps for their clients using the DOORS (Digital Outreach for Obtaining Literacy and Skills) program. After being presented with a sample of the DOORS material, they will be tasked with matching clients to particular modules. Trainees will then be introduced to the “Problem-Solving” approach to education, in which the student and teacher are collaborators in developing solutions to mutually-understood problems, as well as best practices for implementing this approach with DOORS materials.`,
  },
  {
    id: "03",
    title: "Healthcare & Digital Relatedness",
    body: `In this lesson, trainees will be introduced to a novel function of Digital Navigation in healthcare-adjacent settings, which is to support the use of digital health tools. Trainees will be introduced to the MindApps, a robust database of healthcare applications maintained by the Division of Digital Psychiatry at BIDMC. After being introduced to the functions of MindApps, trainees will learn how to match digital health tools with the individuated needs of their clients, create plans to support their ongoing use, and ultimately foster the Digital Relatedness (i.e. an interpersonally supportive environment) necessary for clients to achieve their health goals. Finally, trainees will learn about how to integrate their work into a variety of healthcare-adjacent settings to increase the visibility of Digital Navigation services and improve digital equity.`,
    pub: "Ryan RM, Deci EL. Self-determination theory and the facilitation of intrinsic motivation, social development, and well-being. Am Psychol. 2000;55:68–78. [PubMed: 11392867]",
  },
  {
    id: "04",
    title: "Motivational Interviewing & Digital Navigation",
    body: `In this lesson, trainees will be introduced to the fundamentals of Motivational Interviewing, a clinically focused style of conversation that is designed to facilitate change and develop intrinsic motivation. After an overview of the premises, purposes, main components, and phases of a motivational interview, trainees will be taught the following techniques to strengthen their conversational skills: Open-Ended Questions, Affirmations, Reflexive Listening, and Summaries (OARS). Practice activities will be interleaved with each of these techniques, after which the trainees will engage in a summative role-play exercise that will allow the facilitator to evaluate their application of motivational interviewing techniques.`,
  },
];

const COLLABS = [
  {
    id: "c1",
    name: "Division of Digital Psychiatry — Beth Israel Deaconess Medical Center",
    loc: "Boston, MA",
    img: "images/DN%20Images/BIDMC.webp",
    blocks: [
      {
        heading: "Digital Clinic",
        text: `Over the past decade, there have been growing demands for mental health care. In response, there has been a shift to virtual care models. As such, the team at Digital Psychiatry, led by John Torous, has implemented a hybrid care model called the Digital Clinic that integrates three key components: a licensed clinician, the mindLAMP smartphone application, and a digital navigator. The digital navigator role in this clinical model serves to support patients through troubleshooting technology and the app itself while also enhancing app engagement with symptom monitoring. This role is crucial to the therapy provided as the symptom monitoring can often inform care and reorient towards certain cognitive behavioral therapy skill interventions that may be more inherently related to a patient. These individuals are often undergraduate, tech-savvy college students or clinical research coordinators. To qualify for the Digital Clinic, the patient needs to have WiFi access and the ability to use Zoom, which allows the clinic to serve a wide variety of ages, psychiatric conditions, and levels of digital literacy. Due to this diversity, the digital navigator training involves multiple case studies, shadowing sessions, and mock sessions to acquaint themselves with the role responsibilities.`,
      },
      {
        heading: "Digital Clinic Psychosis",
        text: `The growing demands of mental health care have continued to impact a variety of mental health conditions such as psychosis spectrum disorders. As early detection and intervention is crucial for these patients, it is even more important to provide them with accessible psychosis-specific care. The team at Digital Psychiatry, led by John Torous has created the BEACON clinical model which involves a clinician, the mindLAMP symptom-monitoring smartphone application, and a digital navigator. Built off the Digital Clinic model for anxiety and depression disorders, the BEACON model provides CBT-psychosis teletherapy to patients with psychosis spectrum disorders. Patients utilize the mindLAMP smartphone application for monitoring symptoms and completing CBT activities. While these smartphone applications can be a useful tool to help with reality checking for hallucinations or understanding their condition clinically, digital navigators play a crucial role in making the smartphone application accessible to use. Many times digital literacy becomes a barrier as well and the digital navigator can help to educate patients about how to use these tools in meaningful ways. Digital Navigators are trained to encourage app engagement and analyze collected data reports with patients. Furthermore, digital navigator training consists of psychoeducation on psychosis and an in-depth training on suicide and homicide risk assessments. There are also related case studies provided in the training, as psychosis symptoms can present differently in various patients. Thus, the digital navigator importantly communicates with providers about a patient's presentation, which can then inform future therapy sessions.`,
      },
    ],
    pubs: [
      "Burns J, Chen K, Flathers M, Currey D, Macrynikola N, Vaidyam A, Langholm C, Barnett I, Byun A, Lane E, Torous J. Transforming Digital Phenotyping Raw Data Into Actionable Biomarkers, Quality Metrics, and Data Visualizations Using Cortex Software Package: Tutorial. J Med Internet Res 2024;26:e58502. URL: https://www.jmir.org/2024/1/e58502. DOI: 10.2196/58502",
      "Chang S, Gray L, Torous J. Smartphone app engagement and clinical outcomes in a hybrid clinic. Psychiatry Res. 2023 Jan;319:115015. doi: 10.1016/j.psychres.2022.115015. Epub 2022 Dec 18. PMID: 36549096",
      "Chen, K., Lane, E., Burns, J., Macrynikola, N., Chang, S., & Torous, J. (2024). The Digital Navigator: Standardizing Human Technology Support in App-Integrated Clinical Care. Telemedicine and E-Health, 30(7), e1963–e1970. https://doi.org/10.1089/tmj.2024.0023",
      "Chen, K., Huang, J.J. & Torous, J. Hybrid care in mental health: a framework for understanding care, research, and future opportunities. NPP—Digit Psychiatry Neurosci 2, 16 (2024). https://doi.org/10.1038/s44277-024-00016-7",
      "Hartstein, George Luke MD, MBA; Peck, Pamela PsyD; Yellowlees, Peter MBBS, MD; Torous, John MD, MBI. Psychotherapy in the Digital Era: A Case for Hybrid Care and Remote Therapeutic Monitoring. Harvard Review of Psychiatry 32(2):p 63-69, 3/4 2024. DOI: 10.1097/HRP.0000000000000393",
      "Naslund JA, Gonsalves PP, Gruebner O, Pendse SR, Smith SL, Sharma A, Raviola G. Digital Innovations for Global Mental Health: Opportunities for Data Science, Task Sharing, and Early Intervention. Curr Treat Options Psychiatry. 2019 Dec;6(4):337-351. doi: 10.1007/s40501-019-00186-8. Epub 2019 Sep 7. PMID: 32457823; PMCID: PMC7250369.",
      "Rauseo-Ricupero N, Henson P, Agate-Mays M, Torous J. Case studies from the digital clinic: integrating digital phenotyping and clinical practice into today's world. Int Rev Psychiatry. 2021 Jun;33(4):394-403. doi: 10.1080/09540261.2020.1859465. Epub 2021 Apr 1. PMID: 33792463.",
      "Rodriguez-Villa E, Rozatkar AR, Kumar M, et al. Cross cultural and global uses of a digital mental health app: results of focus groups with clinicians, patients and family members in India and the United States. Global Mental Health. 2021;8:e30. doi:10.1017/gmh.2021.28",
      "Rodriguez-Villa, E., Rauseo-Ricupero, N., Camacho, E., et al. The digital clinic: Implementing technology and augmenting care for mental health. General Hospital Psychiatry 2020. https://www.sciencedirect.com/science/article/pii/S0163834320300852",
      "Torous, J., Jän Myrick, K., Rauseo-Ricupero, N., et al. Digital Mental Health and COVID-19: Using technology today to accelerate the curve on access and quality tomorrow. JMIR Mental Health. 2020. https://mental.jmir.org/2020/3/e18848/",
    ],
  },
  {
    id: "c2",
    name: "Innowell — University of Sydney, Mind and Brain Centre",
    loc: "Sydney, Australia",
    img: "images/DN%20Images/innowell.webp",
    blocks: [
      {
        text: `Innowell is a symptom-monitoring online mental health platform that clinicians can use alongside patient care. Digital navigators are involved by supporting patients and health professionals, similar to how digital navigators are used in the Digital Clinic model in Boston. This model includes a clinician, a digital navigator, and Innowell platform for symptom monitoring. Carla Gorban at the University of Sydney Mind and Brain Centre has been working to improve the evaluation framework for Digital Navigators and understanding how a Digital Navigator can enhance their clinical impact. Her work has emphasized the need for strong partnerships between health care team members. As the digital navigator is a newer role, the role can often be met with uncertainty and it is important to introduce the digital navigator as a member of the clinician team so patients can understand how they can be clinically useful. This structure helps the patient see this newer Digital Navigator role as truly part of their clinical team and help patients understand how digital tools like Innowell can be impactful to their mental health.`,
      },
    ],
    pubs: [
      "Gorban C, Chong MK, Poulsen A, Turner A, LaMonica HM, McKenna S, Scott EM, Hickie IB, Iorfino F. Young People's Experiences Using a Digital Mental Health Tool to Support Their Care in a Real-World Service: Lived Experience–Led Qualitative Study. JMIR Mental Health. 2025 Jun 23;12(1):e70154.",
      "Gorban, C., McKenna, S., Chong, M. K., Capon, W., Battisti, R., Crowley, A., ... & Iorfino, F. (2024). Building Mutually Beneficial Collaborations Between Digital Navigators, Mental Health Professionals, and Clients: Naturalistic Observational Case Study. JMIR Mental Health, 11, e58068.",
    ],
  },
  {
    id: "c3",
    name: "Centre for Addiction and Mental Health",
    loc: "Toronto, Canada",
    img: "images/DN%20Images/camh.png",
    blocks: [
      {
        text: `At the Centre for Addiction and Mental Health, Dr. Gillian Strudwick leads research in digital interventions to support population mental health as a scientific director in the Digital Innovation Hub and Digital Mental Health Lab. In collaboration with Dr. Sean Kidd, Dr. Gillian Strudwick is currently leading a project called Digital Navigators: Exploring the Feasibility of Implementing Digital Navigators in Canadian Clinical Care Settings. This project aims to uncover the feasibility and potential functions of Digital Navigators in Canadian healthcare contexts, which will be explored through a review of the literature and interviews with clinicians, people receiving care, and healthcare administrators. Learn more by reading the excerpt, "Digital navigators: New Kids on the Canadian healthcare Block" on the 6th page of the Canadian Healthcare Technology Magazine Jun/Jul. 2025 issue (published on June 27th, 2025).`,
      },
    ],
    link: { label: "Link to magazine issue", url: "https://mailchi.mp/ac9754fc4b43/6783yqu4hk-10168273?e=eda64f9612" },
    pubs: [],
  },
  {
    id: "c4",
    name: "Mental Health Policy & Digitalization Lab — Brandenburg Medical School",
    loc: "Rüdersdorf, Germany",
    img: "images/DN%20Images/Brandenburg.webp",
    blocks: [
      {
        text: `Led by Julian Schwarz, the Digital Navigator role has been successfully implemented across six psychiatric outpatient clinics and general practices in Germany. As part of the DigiNavi study, existing clinical staff, such as administrative or nursing staff, were trained to serve as digital navigators. Within the clinical care team, these digital navigators play a key role in supporting the integration of digital mental health tools. They collaborate with providers to evaluate and recommend evidence-based mental health applications and help determine appropriate app recommendations for patients. They also support patients directly by troubleshooting technology-related issues and interpreting data from smartphone applications to enhance patient insight into their mental health. This model demonstrates that the Digital Navigator role can be effectively fulfilled through the reallocation of existing staff responsibilities. During this study, the Digital Navigator Training program was also successfully translated into German.`,
      },
    ],
    pubs: [
      "Schwarz, J., Chen, K., Heinze, M., Schönbeck, J., Schubert, D., Speck, J., ... & Meier-Diedrich, E. Piloting Digital Navigators to Promote Acceptance and Engagement With Digital Mental Health Applications in German Outpatient Care: Protocol for a Mixed-Method Interventional Study.",
    ],
  },
  {
    id: "c5",
    name: "University of Nebraska Medical Center (UNMC)",
    loc: "Omaha, Nebraska",
    img: "images/DN%20Images/Nebraska.png",
    blocks: [
      {
        text: `At UNMC College of Nursing, Margaret Emerson, a nurse practitioner, leads research on the delivery of integrative psychiatric care. As digital self-help tools continue to gain popularity, it is essential that behavioral health providers are equipped to assess and guide their use. While the market for mental health smartphone applications is extensive, it lacks a standardized framework for evaluating evidence-based tools. In efforts to mitigate this gap, NP Emerson and collaborators have proposed a digital navigator training program tailored to behavioral health clinicians, aimed at enhancing their digital literacy and enabling them to effectively educate patients about mental health apps. These digital navigators, in turn, are an integrative part of care as they can help providers increase patient awareness of mental health apps and increase accessibility of such self-help tools.`,
      },
    ],
    pubs: [
      "Emerson, M. R., Buckland, S., Lawlor, M. A., Dinkel, D., Johnson, D. J., Mickles, M. S., Fok, L., & Watanabe-Galloway, S. (2022). Addressing and evaluating health literacy in mHealth: a scoping review. mHealth, 8, 33. https://doi.org/10.21037/mhealth-22-11",
      "King, D.R., Emerson, M.R., Tartaglia, J. et al. Methods for Navigating the Mobile Mental Health App Landscape for Clinical Use. Curr Treat Options Psych 10, 72–86 (2023). https://doi.org/10.1007/s40501-023-00288-4",
      "Lagan, S., Aquino, P., Emerson, M.R. et al. Actionable health app evaluation: translating expert frameworks into objective metrics. npj Digit. Med. 3, 100 (2020). https://doi.org/10.1038/s41746-020-00312-4",
      "Lagan, S., Emerson, M. R., King, D., Matwin, S., Chan, S. R., Proctor, S., … Torous, J. (2021). Mental Health App Evaluation: Updating the American Psychiatric Association's Framework Through a Stakeholder-Engaged Workshop. Psychiatric Services, 72(9), 1095–1098. https://doi.org/10.1176/appi.ps.202000663",
    ],
  },
  {
    id: "c6",
    name: "University of Colorado: Anschutz Campus",
    loc: "Denver, Colorado",
    img: "images/DN%20Images/Colorado.webp",
    blocks: [
      {
        text: `Tiffany Love at the University of Colorado Anschutz Campus has led the Digital Clinic model there since 2024. Modeled after the Digital Clinic in Boston, there are three major components of the model: a clinician, the mindLAMP symptom monitoring smartphone application, and a digital navigator. This digital navigator serves to support patients with technology troubleshooting and enhancing engagement with the mindLAMP app. Furthermore, the digital navigator interacts regularly with the clinician to improve therapy homework adherence, skill practices, and provide more clinical insight using the collected data on the app. This collected data is based on self-report surveys and passive smartphone features such as steps, mobility, and sleep. Integrating this collected data into a personalized data report, the digital navigator plays a crucial role in helping patients understand their condition more intimately, and in turn empower them to lead their own journey to self-recovery. This role also plays a crucial role in helping patients of all ages and conditions understand how to use digital tools like mindLAMP and in turn, increase accessibility to mental health care. As the Digital Clinic expands across sites and care modalities, the digital navigator remains essential for facilitating mobile app engagement and improving access to care. This consistency underscores the importance of standardizing the digital navigator role as a core component of app-augmented mental health services.`,
      },
    ],
    pubs: [],
  },
  {
    id: "c7",
    name: "The University of Texas Health Science Center at Houston",
    loc: "",
    img: "images/DN%20Images/UT%20Health%20Houston.png",
    blocks: [
      {
        text: `Michelle Patriquin, PhD, is a clinical psychologist whose research centers on identifying early markers of mental illness and translating these insights into technology-driven clinical interventions. Her work emphasizes the importance of pairing new digital mental health interventions with structured implementation protocols for inpatient mental health professionals to mitigate the gap in implementation. This framework specifically addresses the unique needs of inpatient populations and aims to enhance the effective delivery and adoption of digital tools in these inpatient settings. The TIME framework supports protocols that help bridge digital literacy gaps among both clinicians and patients, thereby improving overall patient engagement and adherence to the intervention tool. This framework is important in the context of digital navigators due to its role in decreasing digital literacy gaps and enhancing the use of self-help smartphone applications.`,
      },
    ],
    pubs: [],
  },
];

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

function Figure({ src, alt, caption, maxWidth }) {
  return (
    <div
      className="map-wrap"
      style={{ padding: 0, overflow: "hidden", maxWidth: maxWidth || "100%", margin: maxWidth ? "0 auto" : undefined }}
    >
      <img src={src} alt={alt} style={{ width: "100%", display: "block" }} />
      {caption && (
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
          padding: "14px 20px", borderTop: "1px solid var(--rule)", background: "white",
          fontFamily: "var(--type-mono)", fontSize: 11, letterSpacing: "0.04em", color: "var(--ink-3)",
        }}>
          <span>{caption}</span>
          <span style={{ color: "var(--ink-4)" }}>Society of Digital Psychiatry</span>
        </div>
      )}
    </div>
  );
}

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">Training Program</span>
        </div>
        <h1 className="t-display" style={{ maxWidth: 1000 }}>Digital Navigator Training</h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: 720 }}>
          A digital navigator is a person who helps individuals develop and improve digital literacy skills to navigate technology effectively.
        </p>
        <div style={{ marginTop: 28 }}>
          <a href={SIGNUP_URL} target="_blank" rel="noreferrer" className="btn btn-primary">Sign up →</a>
        </div>
      </div>
    </section>
  );
}

function RoleOverview() {
  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">The Digital Navigator Role</span>
          </div>
        </div>
        <Figure
          src="images/DN%20Images/DN%20Role%20Overview.webp"
          alt="Digital Navigator role overview: (1) app evaluation and recommendation, (2) technology setup and troubleshooting, and (3) app data analysis and sustained engagement — each with its clinician benefit and patient benefit."
          caption="Digital Navigator role — clinician & patient benefits"
        />
      </div>
    </section>
  );
}

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

function Overview() {
  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">Training Overview</span>
          </div>
        </div>

        <p className="body" style={{ color: "var(--ink-3)", maxWidth: 880 }}>
          The SODP’s Digital Navigator training includes a core sequence of four modules to teach
          best practices for the implementation of a Digital Navigator in a clinical, clubhouse, or
          community center setting. The sequence is structured around Richard M. Ryan’s and Edward
          L. Deci’s Self-Determination Theory,{" "}
          <a href="#ref-1" className="link" style={{ fontSize: "0.85em", verticalAlign: "super" }}>[1]</a>{" "}
          which marks competence, autonomy, and relatedness as fundamental psychological needs for
          developing intrinsic motivation. Digital Navigators are trained to foster all three of
          these psychological needs for their clients in the digital realm:
        </p>

        <div
          style={{
            marginTop: 32,
            display: "grid",
            gap: 16,
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
          }}
        >
          {NEEDS.map(n => (
            <div
              key={n.name}
              style={{
                border: "1px solid var(--rule)",
                borderRadius: 4,
                padding: 24,
                background: "var(--bg-soft)",
              }}
            >
              <span className="eyebrow eyebrow-ink" style={{ color: "var(--indigo-500)" }}>{n.name}</span>
              <p className="body-sm" style={{ marginTop: 12, color: "var(--ink)" }}>{n.def}</p>
              <p className="body-sm" style={{ marginTop: 8, color: "var(--ink-3)", fontStyle: "italic" }}>
                “{n.note}”
              </p>
            </div>
          ))}
        </div>

        <p className="body" style={{ color: "var(--ink-3)", maxWidth: 880, marginTop: 36 }}>
          While the SODP plans to host regular on-site and online training, our training materials
          will be freely available online and can be tailored to the needs of a variety of
          healthcare and healthcare-adjacent settings. Each module includes:
        </p>
        <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 10 }}>
          {INCLUDES.map(i => <Tag key={i}>{i}</Tag>)}
        </div>

        <div style={{ marginTop: 48 }}>
          <Figure
            src="images/DN%20Images/DN%20Training%20Overview.png"
            alt="Digital Navigator Training program one-pager: Field-Tested Program, Current Offerings, and Upcoming Offerings."
            caption="Program overview"
            maxWidth={560}
          />
        </div>
      </div>
    </section>
  );
}

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

function ModuleAccordion() {
  const [openId, setOpenId] = useState("01");
  return (
    <div style={{ border: "1px solid var(--rule)", borderRadius: 4, overflow: "hidden" }}>
      {MODULES.map((m, idx) => {
        const open = openId === m.id;
        return (
          <div key={m.id} style={{ borderTop: idx === 0 ? "none" : "1px solid var(--rule)" }}>
            <button
              type="button"
              onClick={() => setOpenId(open ? null : m.id)}
              aria-expanded={open}
              style={{
                width: "100%",
                display: "flex",
                alignItems: "center",
                gap: 18,
                padding: "22px 24px",
                background: open ? "var(--bg-soft)" : "white",
                border: "none",
                cursor: "pointer",
                textAlign: "left",
                font: "inherit",
              }}
            >
              <span
                className="mono"
                style={{
                  fontSize: 12,
                  color: "var(--indigo-500)",
                  fontWeight: 600,
                  letterSpacing: "0.06em",
                  flex: "0 0 auto",
                }}
              >
                MODULE {m.id}
              </span>
              <strong style={{ flex: 1, fontSize: 16, color: "var(--ink)" }}>{m.title}</strong>
              <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
                style={{
                  color: "var(--ink-3)",
                  flex: "0 0 auto",
                  transform: open ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 0.18s ease",
                }}
              >
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </button>
            {open && (
              <div style={{ padding: "4px 24px 28px" }}>
                <p className="body" style={{ color: "var(--ink-3)", maxWidth: 820 }}>{m.body}</p>
                {m.pub && (
                  <div
                    id="ref-1"
                    style={{
                      marginTop: 22,
                      paddingTop: 18,
                      borderTop: "1px solid var(--rule)",
                    }}
                  >
                    <span className="eyebrow eyebrow-ink">Relevant Publication</span>
                    <p className="body-sm" style={{ marginTop: 8, color: "var(--ink-3)" }}>{m.pub}</p>
                  </div>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Modules() {
  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">Core Sequence · 4 modules</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            Select a module to expand
          </span>
        </div>
        <ModuleAccordion />
      </div>
    </section>
  );
}

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

function CollaboratorAccordion() {
  const [openId, setOpenId] = useState(null);
  return (
    <div style={{ border: "1px solid var(--rule)", borderRadius: 4, overflow: "hidden" }}>
      {COLLABS.map((c, idx) => {
        const open = openId === c.id;
        return (
          <div key={c.id} style={{ borderTop: idx === 0 ? "none" : "1px solid var(--rule)" }}>
            <button
              type="button"
              onClick={() => setOpenId(open ? null : c.id)}
              aria-expanded={open}
              style={{
                width: "100%",
                display: "flex",
                alignItems: "center",
                gap: 18,
                padding: "20px 24px",
                background: open ? "var(--bg-soft)" : "white",
                border: "none",
                cursor: "pointer",
                textAlign: "left",
                font: "inherit",
              }}
            >
              <span
                style={{
                  flex: "0 0 auto",
                  width: 80,
                  height: 52,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  background: "white",
                  border: "1px solid var(--rule)",
                  borderRadius: 4,
                  padding: 6,
                }}
              >
                <img
                  src={c.img}
                  alt=""
                  loading="lazy"
                  style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}
                />
              </span>
              <span style={{ flex: 1 }}>
                <strong style={{ fontSize: 15.5, color: "var(--ink)" }}>{c.name}</strong>
                {c.loc && (
                  <span className="mono" style={{ display: "block", marginTop: 4, fontSize: 11.5, letterSpacing: "0.04em", color: "var(--ink-4)" }}>
                    {c.loc}
                  </span>
                )}
              </span>
              <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.4"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
                style={{
                  color: "var(--ink-3)",
                  flex: "0 0 auto",
                  transform: open ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 0.18s ease",
                }}
              >
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </button>
            {open && (
              <div style={{ padding: "4px 24px 30px", maxWidth: 880 }}>
                {c.blocks.map((b, i) => (
                  <div key={i} style={{ marginTop: i === 0 ? 0 : 22 }}>
                    {b.heading && (
                      <span className="eyebrow eyebrow-ink" style={{ display: "block", marginBottom: 10 }}>{b.heading}</span>
                    )}
                    <p className="body" style={{ color: "var(--ink-3)" }}>{b.text}</p>
                  </div>
                ))}
                {c.link && (
                  <p className="body-sm" style={{ marginTop: 18 }}>
                    {c.link.label}:{" "}
                    <a href={c.link.url} target="_blank" rel="noreferrer" className="link">{c.link.url}</a>
                  </p>
                )}
                {c.pubs.length > 0 && (
                  <div style={{ marginTop: 24, paddingTop: 18, borderTop: "1px solid var(--rule)" }}>
                    <span className="eyebrow eyebrow-ink">Relevant Publications</span>
                    <ol style={{ margin: "12px 0 0", paddingLeft: 20 }}>
                      {c.pubs.map((p, i) => (
                        <li key={i} className="body-sm" style={{ color: "var(--ink-3)", marginTop: i === 0 ? 0 : 10 }}>{p}</li>
                      ))}
                    </ol>
                  </div>
                )}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Collaborators() {
  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">Ongoing Collaborators</span>
          </div>
          <span className="caption mono" style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.06em" }}>
            Select an institution to expand
          </span>
        </div>
        <CollaboratorAccordion />
      </div>
    </section>
  );
}

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

function DigitalNavigatorTrainingPage() {
  return (
    <>
      <Nav active="dnt" />
      <Header />
      <RoleOverview />
      <Overview />
      <Modules />
      <Collaborators />
      <Footer />
    </>
  );
}

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