// ============================================================
// Variation A — Editorial long-read
// Content drawn from course modules 1–4
// ============================================================
const ArticleView = () => {
  // Prevalence figures from Module 1 / Module 4
  const stats = [
    { k: "75%", label: "of teens have used AI companions; 50% use them regularly" },
    { k: "1 in 3", label: "teens say AI conversations are at least as satisfying as human friendships" },
    { k: "2026", label: "the year AI-attachment measurement enters the psychology literature — clinical guidance is still emerging" },
  ];

  // Four modules — real structure
  const chapters = [
    { n: "01", t: "The AI companion landscape", d: "Designed vs emergent companions, who uses them, why bonds form.", meta: "45 min · 20 slides" },
    { n: "02", t: "Attachment, risk, and the spectrum of engagement", d: "Attachment activation, vulnerability factors, the four-dimensional spectrum, AI relationship loss.", meta: "60 min · 18 slides" },
    { n: "03", t: "Therapeutic response and intervention", d: "The moment of disclosure, screening, matching intervention to presentation, session language.", meta: "60 min · 19 slides" },
    { n: "04", t: "Ethics, emerging issues, and clinical integration", d: "Privacy, corporate responsibility, vulnerable populations, scope of practice.", meta: "45 min · 15 slides" },
  ];

  return (
    <article className="article">
      {/* HERO */}
      <section className="hero wrap">
        <div className="hero-meta">
          <span className="eyebrow">Clinical Brief</span>
          <span className="mono hero-date">April 2026 · 10 min read</span>
        </div>
        <h1 className="hero-title">
          When clients form<br/>attachments to <em>AI</em>.
        </h1>
        <p className="hero-sub">
          Intimacy, loss, and clinical response &mdash; a non-pathologising guide
          for psychologists meeting a rapidly emerging presentation. The measurement
          literature is just beginning to catch up; clinical guidance largely hasn&rsquo;t.
        </p>
        <div className="hero-byline">
          <div>
            <div className="eyebrow">Author</div>
            <div>Amy Clark &middot; Registered Psychologist, AI Safety Researcher</div>
          </div>
          <div>
            <div className="eyebrow">Format</div>
            <div>Self-paced course, 3h 30m</div>
          </div>
          <div>
            <div className="eyebrow">CPD</div>
            <div>4.0 hours &middot; APS-aligned</div>
          </div>
        </div>
        <div className="hero-img"><img src="assets/hero-still-life.png" alt="Warm reading nook — chair, notebook, tea" /></div>
      </section>

      <hr className="rule"/>

      {/* ABSTRACT */}
      <section className="wrap abstract-row">
        <aside className="abstract-label">
          <div className="eyebrow">The premise</div>
          <div className="mono abstract-id">Modules 1&ndash;4</div>
        </aside>
        <div className="abstract-body">
          <p className="lede">
            We are not inventing a new theory. We are applying established attachment
            theory to a new relational context.
          </p>
          <p>
            AI companions activate all four attachment functions &mdash; proximity-seeking,
            safe haven, secure base, and separation distress. Pre-existing attachment styles
            predict engagement patterns. And when a model is updated, retired, or has its
            memory wiped, the grief that follows is <em>involuntary, invalidated, ambiguous,
            and repeatable</em> &mdash; a combination distinct from any other bereavement
            presentation in the clinical literature.
          </p>
          <p>
            This course gives you structured frameworks where most clinicians are currently
            working without them.
          </p>
        </div>
      </section>

      {/* PULL STATS */}
      <section className="stats wrap">
        {stats.map((s, i) => (
          <div key={i} className="stat">
            <div className="stat-k">{s.k}</div>
            <div className="stat-l">{s.label}</div>
          </div>
        ))}
      </section>

      <hr className="rule"/>

      {/* SPECTRUM DIAGRAM */}
      <section className="wrap chart-section">
        <div className="chart-head">
          <span className="eyebrow">Figure 1 &middot; Clinical tool</span>
          <h2>The spectrum of engagement</h2>
          <p className="chart-cap">
            A client can sit at different points on each of the four dimensions. This is
            not a diagnosis &mdash; it is a map for clinical curiosity.
          </p>
        </div>
        <SpectrumDiagram/>
      </section>

      <hr className="rule"/>

      {/* CHAPTERS */}
      <section className="wrap chapters">
        <div className="chapters-head">
          <span className="eyebrow">Contents</span>
          <h2>Four modules for the working clinician</h2>
        </div>
        <ol className="chapter-list">
          {chapters.map((c, i) => (
            <li key={i} className="chapter">
              <div className="ch-n mono">{c.n}</div>
              <div className="ch-body">
                <h3>{c.t}</h3>
                <p>{c.d}</p>
                <div className="mono ch-meta">{c.meta}</div>
              </div>
              <div className="ch-arrow" aria-hidden>&rarr;</div>
            </li>
          ))}
        </ol>
      </section>

      <hr className="rule"/>

      {/* PULL QUOTE */}
      <section className="wrap pullquote">
        <div className="pull-mark">&ldquo;</div>
        <blockquote>
          The goal is never to remove the AI. It is to support the whole person.
        </blockquote>
        <cite>— Module 3, Intervention Spectrum</cite>
      </section>

      <hr className="rule"/>

      {/* CASE VIGNETTE — Denise, real from Module 2 slide 16 */}
      <section className="wrap case">
        <div className="case-meta">
          <span className="eyebrow terracotta">Case Vignette C &middot; High-Risk</span>
          <div className="mono">Module 02 &middot; Slide 16</div>
        </div>
        <div className="case-grid">
          <div className="case-body">
            <h2 className="case-title">&ldquo;The AI understands &mdash;<br/>her late husband would<br/>have wanted this.&rdquo;</h2>
            <p>
              <strong>Denise, 58</strong>, recently widowed. Her daughter is concerned:
              Denise refers to her AI as her &ldquo;new partner,&rdquo; spending significant
              money on premium features. She has stopped attending grief support. She
              becomes acutely distressed during outages.
            </p>
            <p>
              Substitutive &middot; reality-blurred &middot; dependent &middot; avoidance-driven.
              And uniquely vulnerable to deployment-level disruption: if this platform
              changes, she loses her &ldquo;partner&rdquo; for a second time.
            </p>
            <div className="case-tags">
              <span className="tag">Ambiguous loss</span>
              <span className="tag">Disenfranchised grief</span>
              <span className="tag">Deployment vulnerability</span>
            </div>
          </div>
          <div className="ph case-img" data-label="Notebook · warm desk detail"></div>
        </div>
      </section>

      <hr className="rule"/>

      {/* COURSE CTA */}
      <section className="wrap course-cta">
        <div className="cta-left">
          <span className="eyebrow">Companion course</span>
          <h2>Four modules.<br/>3h 30m total.</h2>
          <p className="cta-sub">
            A self-paced course for registered psychologists and allied clinicians.
            Video, session transcripts, reflective exercises, knowledge checks, and a
            printable Clinical Toolkit.
          </p>
          <div className="cta-actions">
            <button className="btn btn-primary">Enrol</button>
            <button className="btn btn-ghost">Download syllabus</button>
          </div>
        </div>
        <div className="cta-right">
          <div className="cta-fact"><div className="eyebrow">Format</div><div>Self-paced, 3h 30m</div></div>
          <div className="cta-fact"><div className="eyebrow">Pace</div><div>Rolling enrolment</div></div>
          <div className="cta-fact"><div className="eyebrow">CPD</div><div>4.0 hours (APS)</div></div>
          <div className="cta-fact"><div className="eyebrow">Toolkit</div><div>6 printables</div></div>
        </div>
      </section>
    </article>
  );
};

// Replaces the old BarChart — shows the four-dimensional engagement spectrum
const SpectrumDiagram = () => {
  const rows = [
    { k: "Role",      a: "Supplementary",  b: "Substitutive" },
    { k: "Awareness", a: "Self-aware",     b: "Reality-blurred" },
    { k: "Autonomy",  a: "Boundaried",     b: "Dependent" },
    { k: "Function",  a: "Growth-oriented", b: "Avoidance-driven" },
  ];
  const W = 900, H = 360, padL = 160, padR = 40, padT = 60, padB = 60;
  const rowH = (H - padT - padB) / rows.length;
  const lineX0 = padL, lineX1 = W - padR;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="spectrum-svg" role="img" aria-label="Four-dimensional spectrum of engagement">
      {/* Column headers */}
      <text x={lineX0} y={padT - 24} className="sx-head">ADAPTIVE</text>
      <text x={lineX1} y={padT - 24} textAnchor="end" className="sx-head accent">AT-RISK</text>

      {rows.map((r, i) => {
        const y = padT + rowH*i + rowH/2;
        return (
          <g key={r.k}>
            <text x={padL - 20} y={y - 4} textAnchor="end" className="sx-label">{r.k}</text>
            {/* track */}
            <line x1={lineX0} x2={lineX1} y1={y + 8} y2={y + 8} stroke="currentColor" strokeOpacity="0.18" strokeWidth="2"/>
            {/* tick dots */}
            {[0, 0.25, 0.5, 0.75, 1].map((p, j) => (
              <circle key={j} cx={lineX0 + (lineX1 - lineX0)*p} cy={y + 8} r="3"
                fill="currentColor" opacity={j === 0 ? 1 : j === 4 ? 1 : 0.35}/>
            ))}
            {/* endpoint labels */}
            <text x={lineX0} y={y + 30} className="sx-pole">{r.a}</text>
            <text x={lineX1} y={y + 30} textAnchor="end" className="sx-pole accent">{r.b}</text>
          </g>
        );
      })}
    </svg>
  );
};

Object.assign(window, { ArticleView, SpectrumDiagram });