// ============================================================
// Variation B — Course / curriculum view
// ============================================================
const CourseView = () => {
  const modules = [
    {
      n: "01",
      t: "The AI Companion Landscape",
      d: "Define AI companions. Distinguish designed vs. emergent companion relationships. Major platforms, demographic diversity, and why people form these bonds. The design psychology that activates attachment systems.",
      time: "45 min",
      unlocked: true,
      progress: 100,
      lessons: 20,
    },
    {
      n: "02",
      t: "Attachment, Risk, and the Spectrum of Engagement",
      d: "Applying Bowlby and Ainsworth to a new relational context. How AI companions activate proximity, safe haven, secure base, and separation distress. Attachment styles in AI relationships, and the risk spectrum from adaptive to harmful.",
      time: "60 min",
      unlocked: true,
      progress: 55,
      lessons: 18,
    },
    {
      n: "03",
      t: "Therapeutic Response and Intervention",
      d: "First-session language. Non-pathologising frameworks. Intervention strategies for disclosure, grief after model change, and integrating AI use with existing clinical work. Scripts, role-plays, and decision points.",
      time: "60 min",
      unlocked: true,
      progress: 0,
      lessons: 19,
    },
    {
      n: "04",
      t: "Ethics, Emerging Issues, and Clinical Integration",
      d: "Professional ethics under APS and APA guidance. Duty of care where AI is involved. Documentation. Emerging issues: minors, agentic AI, and the road ahead. Integrating this into your practice.",
      time: "45 min",
      unlocked: true,
      progress: 0,
      lessons: 15,
    },
  ];

  return (
    <div className="course">
      {/* TOP BAR */}
      <header className="course-bar wrap">
        <div className="course-bar-left">
          <span className="mono">AICP-101</span>
          <span className="dot">·</span>
          <span>AI Companionship in Clinical Practice</span>
        </div>
        <div className="course-bar-right">
          <span className="eyebrow">Enrolled</span>
          <span className="avatar" aria-hidden>AC</span>
          <span>Amy Clark, BSocSc(Psych), GradDipPsych(Adv)</span>
        </div>
      </header>

      <hr className="rule"/>

      {/* COURSE HERO */}
      <section className="wrap course-hero">
        <div className="ch-left">
          <span className="eyebrow">Course · 4 modules · 3.5 hours · 4.0 CPD hours</span>
          <h1 className="ch-title">
            A clinician&rsquo;s<br/>
            course on<br/>
            <em>AI companionship.</em>
          </h1>
          <p className="ch-sub">
            Practical, peer-reviewed, and non-pathologising. Built for clinicians who
            are already seeing clients affected by model deprecations, alignment shifts,
            and the loss of long-running AI relationships.
          </p>

          <div className="progress-row">
            <div className="progress-track"><div className="progress-fill" style={{width: "38%"}}/></div>
            <div className="progress-meta">
              <span className="mono">38% complete</span>
              <span className="mono">Next: Module 02 · Slide 10 of 18</span>
            </div>
          </div>

          <div className="ch-actions">
            <button className="btn btn-primary">Resume module 02 →</button>
            <button className="btn btn-ghost">Download syllabus</button>
          </div>
        </div>
        <div className="ch-right">
          <div className="course-cover"><img src="assets/course-cover.png" alt="Course cover" /></div>
          <div className="ch-facts">
            <div><div className="eyebrow">Instructor</div><div>Amy Clark, Registered Psychologist &amp; AI Safety Researcher</div></div>
            <div><div className="eyebrow">Pace</div><div>Self-paced, 3h 30m total</div></div>
            <div><div className="eyebrow">Format</div><div>Video + reflective exercises</div></div>
            <div><div className="eyebrow">CPD</div><div>4.0 hours (APS)</div></div>
          </div>
        </div>
      </section>

      <hr className="rule"/>

      {/* MODULE LIST */}
      <section className="wrap modules">
        <div className="modules-head">
          <span className="eyebrow">Curriculum</span>
          <h2>Four modules</h2>
        </div>

        <ul className="module-list">
          {modules.map((m) => (
            <li key={m.n} className={`module ${!m.unlocked ? "locked" : ""}`}>
              <div className="m-n mono">{m.n}</div>
              <div className="m-body">
                <h3>{m.t}</h3>
                <p>{m.d}</p>
                <div className="m-meta">
                  <span className="mono">{m.lessons} lessons</span>
                  <span className="dot">·</span>
                  <span className="mono">{m.time}</span>
                  {m.unlocked ? null : (
                    <><span className="dot">·</span><span className="mono locked-tag">Unlocks after M04</span></>
                  )}
                </div>
              </div>
              <div className="m-prog">
                {m.unlocked ? (
                  <>
                    <div className="m-prog-track"><div className="m-prog-fill" style={{width: `${m.progress}%`}}/></div>
                    <div className="mono m-prog-pct">{m.progress}%</div>
                  </>
                ) : <div className="mono m-lock">· locked</div>}
              </div>
              <button className="m-go" disabled={!m.unlocked}>{m.progress === 100 ? "Review" : m.progress > 0 ? "Resume" : "Begin"}</button>
            </li>
          ))}
        </ul>
      </section>

      <hr className="rule"/>

      {/* COMPARISON TABLE */}
      <section className="wrap compare">
        <div className="compare-head">
          <span className="eyebrow">Appendix A</span>
          <h2>Four patterns of AI-companion loss</h2>
          <p className="compare-sub">
            Distinguishing the clinical presentation helps tailor intervention and documentation.
            None of these are, on their own, pathological.
          </p>
        </div>

        <div className="compare-table">
          <div className="compare-row compare-row--head">
            <div>Pattern</div>
            <div>Typical trigger</div>
            <div>Core affect</div>
            <div>Primary frame</div>
          </div>
          <Row pattern="Deprecation" trigger="Model retired by provider" affect="Grief, helplessness" frame="Ambiguous loss"/>
          <Row pattern="Alignment drift" trigger="Policy / behaviour change" affect="Betrayal, confusion" frame="Identity reorganisation"/>
          <Row pattern="Account loss" trigger="Memory/data reset" affect="Disorientation" frame="Disenfranchised grief"/>
          <Row pattern="Silent change" trigger="Quiet model update" affect="Anxious hypervigilance" frame="Ambiguous loss"/>
        </div>
      </section>

      <hr className="rule"/>

      {/* INSTRUCTOR */}
      <section className="wrap instructor">
        <div className="instr-photo">
          <img src="assets/amy-clark.png?v=2" alt="Amy Clark" />
        </div>
        <div className="instr-body">
          <span className="eyebrow">Instructor</span>
          <h2>Amy Clark</h2>
          <p className="instr-role"><em>Registered Psychologist &middot; AI Safety Researcher</em></p>
          <p>
            Amy works at the intersection of clinical psychology and AI safety,
            focusing on how people form attachments to AI systems and how
            clinicians can respond without pathologising.
          </p>
          <p className="placeholder-note">
            <span className="mono">[bio placeholder \u2014 replace with full bio, affiliations, publications]</span>
          </p>
        </div>
      </section>
    </div>
  );
};

const Row = ({pattern, trigger, affect, frame}) => (
  <div className="compare-row">
    <div><strong>{pattern}</strong></div>
    <div>{trigger}</div>
    <div>{affect}</div>
    <div>{frame}</div>
  </div>
);

Object.assign(window, { CourseView, Row });