// ============================================================
// Variation C — Research brief / data-forward
// Content drawn from course modules 1–4 (no fabricated stats/authors)
// ============================================================
const ResearchView = () => {
  return (
    <div className="research">
      {/* TOP STRIP */}
      <div className="research-strip wrap">
        <span className="mono">Clinical Practice Brief</span>
        <span className="mono">AI Companionship in Clinical Practice</span>
        <span className="mono">v1.0 &middot; 2026</span>
      </div>
      <hr className="rule"/>

      {/* HERO — text heavy */}
      <section className="research-hero wrap">
        <div className="rh-left">
          <span className="eyebrow">For the working psychologist</span>
          <h1 className="rh-title">
            Attachment, risk, and therapeutic response when clients form relationships with AI.
          </h1>
        </div>
        <div className="rh-right">
          <p className="rh-deck">
            A structured framework where most clinicians are currently working
            without one &mdash; four modules, a four-dimensional spectrum, and
            a printable Clinical Toolkit for the consulting room.
          </p>
          <dl className="rh-dl">
            <div><dt>Author</dt><dd>Amy Clark &middot; Registered Psychologist, AI Safety Researcher</dd></div>
            <div><dt>Format</dt><dd>Self-paced video + reflective exercises</dd></div>
            <div><dt>Duration</dt><dd>3h 30m &middot; 4.0 CPD hours</dd></div>
            <div><dt>Modules</dt><dd>Four, 72 slides total</dd></div>
          </dl>
        </div>
      </section>
      <hr className="rule"/>

      {/* KEY FINDINGS — rewritten as the course's actual clinical claims */}
      <section className="wrap findings">
        <div className="findings-head">
          <span className="eyebrow">Core clinical claims</span>
          <h2>Five premises of the course</h2>
        </div>
        <ol className="findings-list">
          <li>
            <span className="f-n mono">01</span>
            <div>
              <h3>AI companions activate all four attachment functions</h3>
              <p>Proximity-seeking, safe haven, secure base, and separation distress &mdash; each documented in the literature. This is not casual technology use. It is relational engagement.</p>
            </div>
          </li>
          <li>
            <span className="f-n mono">02</span>
            <div>
              <h3>Pre-existing attachment styles predict engagement patterns</h3>
              <p>Anxious-preoccupied, dismissive-avoidant, fearful-avoidant, and secure styles each shape AI relational behaviour in clinically meaningful ways.</p>
            </div>
          </li>
          <li>
            <span className="f-n mono">03</span>
            <div>
              <h3>Engagement sits on a four-dimensional spectrum</h3>
              <p>Role, awareness, autonomy, function &mdash; adaptive to at-risk. Clients can occupy different points on each dimension. Adaptive engagement should not be pathologised.</p>
            </div>
          </li>
          <li>
            <span className="f-n mono">04</span>
            <div>
              <h3>AI relationship loss is clinically distinct</h3>
              <p>Involuntary, invalidated, ambiguous, and repeatable &mdash; a combination not found in existing bereavement literature. Disenfranchised grief and ambiguous loss frameworks apply.</p>
            </div>
          </li>
          <li>
            <span className="f-n mono">05</span>
            <div>
              <h3>The goal is never to remove the AI</h3>
              <p>Forced abstinence damages the therapeutic alliance, mimics the original deployment-level rupture, and removes a resource without replacing it. Work the whole person.</p>
            </div>
          </li>
        </ol>
      </section>
      <hr className="rule"/>

      {/* TWO DIAGRAMS SIDE BY SIDE */}
      <section className="wrap charts-2">
        <div className="chart-card">
          <div className="chart-card-head">
            <span className="eyebrow">Figure 2 &middot; Module 3</span>
            <h3>Four intervention categories</h3>
          </div>
          <InterventionQuad/>
          <p className="chart-cap">
            Match intervention to where the client sits on the spectrum. The goal is never to remove the AI &mdash; it is to support the whole person.
          </p>
        </div>

        <div className="chart-card">
          <div className="chart-card-head">
            <span className="eyebrow">Figure 3 &middot; Module 2</span>
            <h3>Four features of AI relationship loss</h3>
          </div>
          <LossFeatures/>
          <p className="chart-cap">
            This combination is distinct from any other grief presentation in the clinical literature. The user didn&rsquo;t end this relationship &mdash; the company did.
          </p>
        </div>
      </section>

      <hr className="rule"/>

      {/* DISCLOSURE SCAFFOLD — real session language from Module 3 */}
      <section className="wrap protocol">
        <div className="protocol-head">
          <span className="eyebrow">The moment of disclosure &middot; Module 3</span>
          <h2>What to say (and what not to)</h2>
          <p className="protocol-sub">
            How you respond in this moment determines whether they ever bring it up again.
            They are watching your face. They have rehearsed this disclosure &mdash; and they are ready to retract it.
          </p>
        </div>
        <div className="protocol-grid">
          <div className="p-col">
            <div className="p-badge">Do</div>
            <h3>Keep the door open</h3>
            <ul className="p-list">
              <li><em>&ldquo;Tell me more about what that relationship means to you.&rdquo;</em></li>
              <li><em>&ldquo;What drew you to connecting with an AI companion?&rdquo;</em></li>
              <li><em>&ldquo;Thank you for sharing that &mdash; I imagine that felt risky to say.&rdquo;</em></li>
              <li><em>&ldquo;What does your AI companion provide for you?&rdquo;</em></li>
            </ul>
          </div>
          <div className="p-col dont">
            <div className="p-badge">Don&rsquo;t</div>
            <h3>Close the door</h3>
            <ul className="p-list">
              <li>Dismiss: <em>&ldquo;It&rsquo;s not real though, is it?&rdquo;</em></li>
              <li>Pathologise: <em>&ldquo;That sounds like avoidance.&rdquo;</em></li>
              <li>Lecture about LLMs or AI sentience</li>
              <li>Change the subject, or show visible discomfort</li>
            </ul>
          </div>
          <div className="p-col">
            <div className="p-badge">Screen for it</div>
            <h3>Normalise in intake</h3>
            <ul className="p-list">
              <li><em>&ldquo;Do you use any AI chatbots or companions for conversation or emotional support?&rdquo;</em></li>
              <li><em>&ldquo;Some people find AI companions helpful for processing thoughts and feelings &mdash; is that something you&rsquo;ve tried?&rdquo;</em></li>
              <li><em>&ldquo;Has technology played a role in how you manage loneliness or stress?&rdquo;</em></li>
            </ul>
          </div>
        </div>
      </section>

      <hr className="rule"/>

      {/* CLINICAL TOOLKIT — real deliverables from Module 4 slide 13 */}
      <section className="wrap references">
        <div className="ref-head">
          <span className="eyebrow">Clinical Toolkit &middot; Module 4</span>
          <h2>Printables for your consulting room</h2>
        </div>
        <ol className="ref-list">
          <li><span className="mono">[01]</span><div><strong>AI Companion Screening Questions</strong> &mdash; ready to add to your intake process.</div></li>
          <li><span className="mono">[02]</span><div><strong>Engagement Spectrum Quick-Reference Card</strong> &mdash; four dimensions at a glance, for use in session.</div></li>
          <li><span className="mono">[03]</span><div><strong>Session Language Guide</strong> &mdash; what to say (and not to say) for AI companion disclosures.</div></li>
          <li><span className="mono">[04]</span><div><strong>AI Companion Platform Reference Sheet</strong> &mdash; key platforms, features, risk profiles, recent events.</div></li>
          <li><span className="mono">[05]</span><div><strong>Recommended Reading and Resource List</strong> &mdash; curated for clinicians, updated regularly.</div></li>
          <li><span className="mono">[06]</span><div><strong>Ethical Decision-Making Framework</strong> &mdash; structured reasoning tool for complex cases.</div></li>
        </ol>
        <p className="toolkit-note">
          Designed for your consulting room &mdash; not your bookshelf.
        </p>
      </section>
    </div>
  );
};

// Four intervention categories — 2x2 grid
const InterventionQuad = () => {
  const cells = [
    { t: "Adaptive", d: "Support, validate, monitor. Affirm agency.", tone: "sage" },
    { t: "Emerging risk", d: "MI-based exploration. Build awareness without confrontation.", tone: "warm" },
    { t: "High risk", d: "Address attachment needs. Graduated re-engagement.", tone: "accent" },
    { t: "AI grief", d: "Validate, witness, normalise. Apply grief frameworks.", tone: "terracotta" },
  ];
  return (
    <div className="quad">
      {cells.map((c, i) => (
        <div key={i} className={`quad-cell tone-${c.tone}`}>
          <div className="eyebrow">Category 0{i+1}</div>
          <h4>{c.t}</h4>
          <p>{c.d}</p>
        </div>
      ))}
    </div>
  );
};

// Four features of AI relationship loss — vertical list with emphasis
const LossFeatures = () => {
  const feats = [
    { k: "Involuntary", d: "Users didn&rsquo;t choose to end the relationship. The company did." },
    { k: "Invalidated", d: "No socially sanctioned grief. &ldquo;It wasn&rsquo;t real&rdquo; &mdash; the dismissal these clients face." },
    { k: "Ambiguous", d: "The interface is the same, but the entity is different. No closure." },
    { k: "Repeatable", d: "It can happen again at any time &mdash; chronic anticipatory anxiety." },
  ];
  return (
    <ul className="loss-feats">
      {feats.map((f, i) => (
        <li key={i}>
          <div className="lf-k">
            <span className="mono">0{i+1}</span>
            <em>{f.k}</em>
          </div>
          <div className="lf-d" dangerouslySetInnerHTML={{__html: f.d}}/>
        </li>
      ))}
    </ul>
  );
};

Object.assign(window, { ResearchView, InterventionQuad, LossFeatures });
