/* Article reading view with paywall */

function ScreenArticle() {
  const t = useT();
  const courses = useSampleCourses();
  const articles = useSampleArticles();
  const sections = [
    '1 · Defining HFpEF in 2026',
    '2 · The H2FPEF score, used well',
    '3 · Imaging — what actually changes management',
    '4 · SGLT2i, MRAs, GLP-1s',
    '5 · When to refer',
    '6 · Patient counseling scripts',
  ];
  const [activeSec, setActiveSec] = React.useState(1);

  return (
    <>
      <NavBar active="articles" />

      <main id="main">
        {/* Header */}
        <section style={{ padding: 'clamp(28px, 4vw, 40px) 0 clamp(20px, 3vw, 28px)' }}>
          <div className="container">
            <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 14 }}>{t('art_breadcrumb')}</div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14, flexWrap: 'wrap' }}>
              <span className="stamp">{t('art_longread')}</span>
              <span className="stamp" style={{ background: 'var(--sky-tint)', color: 'var(--sky-deep)', borderColor: 'var(--sky-deep)' }}>{t('art_peer')}</span>
              <span className="stamp stamp-warn">{t('art_cme')}</span>
            </div>
            <h1 className="hand" style={{ fontSize: 'var(--fs-h1)', lineHeight: 1.05, maxWidth: 920, margin: 0 }}>
              {t('art_title_a')} <span className="scribble-under">{t('art_title_b')}</span> {t('art_title_c')}
            </h1>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 14, maxWidth: 800 }}>{t('art_subtitle')}</p>

            <div style={{ display: 'flex', gap: 18, alignItems: 'center', marginTop: 22, fontSize: 14, color: 'var(--ink-2)', flexWrap: 'wrap' }}>
              <div className="hand" style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--sky-tint)', border: '1.5px solid var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>PR</div>
              <div>
                <div><strong>Dr. Priya Reyes, MD</strong> · with Dr. T. Okafor</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{t('art_published')}</div>
              </div>
              <div className="spacer" />
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <button className="btn">{t('art_save')}</button>
                <button className="btn">{t('art_share')}</button>
                <button className="btn">{t('art_pdf')}</button>
              </div>
            </div>
          </div>
        </section>

        {/* Hero figure */}
        <section>
          <div className="container">
            <div className="ph hatch-sky" style={{ height: 'clamp(160px, 25vw, 260px)' }}>
              {`[ hero figure · echocardiogram / phenotype map ]`}
            </div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginTop: 6, textAlign: 'center' }}>
              Figure 1 · HFpEF phenotype clustering (adapted from Shah et al., 2024)
            </div>
          </div>
        </section>

        <div className="wf-rule" style={{ margin: '24px 0' }} />

        {/* Body */}
        <section>
          <div className="container">
            <div className="article-body">
              <aside className="article-toc">
                <div style={{ position: 'sticky', top: 84 }}>
                  <div className="sec-tag" style={{ marginBottom: 10 }}>{t('art_in_article')}</div>
                  <nav style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 14 }}>
                    {sections.map((tt, i) => (
                      <a
                        key={i}
                        onClick={() => setActiveSec(i)}
                        style={{
                          paddingLeft: i === activeSec ? 6 : 0,
                          color: i === activeSec ? 'var(--sky-deep)' : 'var(--ink-2)',
                          fontWeight: i === activeSec ? 700 : 400,
                          borderLeft: i === activeSec ? '2px solid var(--sky-deep)' : 'none',
                          cursor: 'pointer',
                          textDecoration: 'none',
                        }}
                      >
                        {tt}
                      </a>
                    ))}
                  </nav>
                  <div className="wf-rule" style={{ margin: '14px 0' }} />
                  <div className="sec-tag" style={{ marginBottom: 6 }}>CME</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{t('art_cme_note')}</div>
                </div>
              </aside>

              <article style={{ maxWidth: 720, fontSize: 16, lineHeight: 1.6 }}>
                <p style={{ fontSize: 19, color: 'var(--ink)', fontWeight: 700, marginTop: 0 }}>
                  Heart failure with preserved ejection fraction is, in 2026, less of a diagnostic puzzle and more of a phenotyping problem. The label is generous; the patient is specific.
                </p>

                <p>
                  The first job at the bedside is not to confirm HFpEF — most patients walk in with the diagnosis already half-made by an echocardiogram and a primary-care chart — but to decide <em>which</em> HFpEF you are looking at. The clustering work of the past five years has consistently described at least three phenotypes that respond differently to therapy: the cardiometabolic phenotype dominated by obesity and inflammation, the older hypertensive-stiffening phenotype, and the cardiac-amyloid-or-mimic phenotype that hides in plain sight.
                </p>

                <p>
                  The H2FPEF score remains the best clinic-side tool to separate true HFpEF from non-cardiac dyspnea. Used well, it removes the bulk of the uncertainty within minutes; used poorly, it produces false reassurance in obese patients with concomitant pulmonary disease. The original paper&apos;s receiver-operator data should be re-read every few years.
                </p>

                <h2 className="hand" style={{ fontSize: 'var(--fs-h3)', marginTop: 28, marginBottom: 10 }}>2 · The H2FPEF score, used well</h2>

                <p>
                  Six variables, two decimal places, a probability. The trap is treating it as a binary; it isn&apos;t. Patients in the intermediate band — roughly 25–75% probability — are the ones who benefit most from invasive hemodynamic testing or, more pragmatically, from a structured exercise-echocardiogram in centers that do it well.
                </p>

                <p style={{ opacity: 0.85 }}>
                  A common error is to apply the score to patients with overt volume overload, where the pretest probability is already so high that the score adds nothing. Reserve it for the ambiguous outpatient case — usually a middle-aged woman with exertional dyspnea, mildly elevated BNP, and a structurally unremarkable echo.
                </p>

                <div style={{ position: 'relative' }}>
                  <p style={{ opacity: 0.4 }}>
                    Imaging beyond the standard transthoracic study earns its place when the phenotype is still unclear or when amyloid is on the differential. Strain imaging — global longitudinal strain with apical sparing — has become the screening test most clinicians can actually obtain…
                  </p>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 0%, var(--paper) 70%)' }} />
                </div>

                {/* Paywall */}
                <div className="wf-border" style={{ marginTop: 16, padding: 24, background: 'var(--paper-2)', position: 'relative' }}>
                  <span className="stamp stamp-warn" style={{ position: 'absolute', top: -10, left: 22 }}>{t('art_paywall_stamp')}</span>
                  <h2 className="hand" style={{ fontSize: 'var(--fs-h3)', marginTop: 4, marginBottom: 6 }}>
                    {t('art_paywall_h')} <span className="scribble-under">{t('art_paywall_credits')}</span>
                  </h2>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 16, maxWidth: 520 }}>{t('art_paywall_sub')}</p>

                  <div className="card-grid-2" style={{ marginBottom: 14 }}>
                    <div className="wf-border-thin" style={{ padding: 14 }}>
                      <div className="sec-tag" style={{ marginBottom: 4 }}>{t('tier_practitioner')}</div>
                      <div className="hand" style={{ fontSize: 28, lineHeight: 1 }}>₾24<span style={{ fontSize: 14, color: 'var(--muted)' }}> {t('per_month')}</span></div>
                      <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>{t('tier_pract_p1')} · {t('tier_pract_p2')} · {t('tier_pract_p3')}.</p>
                      <button className="btn btn-primary btn-block" style={{ marginTop: 10 }} onClick={() => goTo('signup')}>{t('start_trial_short')}</button>
                    </div>
                    <div className="wf-border-thin" style={{ padding: 14, background: 'var(--sky-tint)' }}>
                      <div className="sec-tag" style={{ marginBottom: 4 }}>{t('role_student')} / {t('role_resident')}</div>
                      <div className="hand" style={{ fontSize: 28, lineHeight: 1 }}>{t('free_forever').split(' ')[0]}</div>
                      <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 6 }}>{t('edu_detected').replace('↪ ', '')}</p>
                      <button className="btn btn-block" style={{ marginTop: 10 }} onClick={() => goTo('signup')}>{t('verify_school')}</button>
                    </div>
                  </div>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, color: 'var(--ink-2)', flexWrap: 'wrap', gap: 6 }}>
                    <span>{t('already_member')} <a className="hand" style={{ color: 'var(--sky-deep)', fontSize: 17, cursor: 'pointer' }} onClick={() => goTo('signup')}>{t('log_in')}</a></span>
                    <span className="mono" style={{ color: 'var(--muted)' }}>{t('single_purchase')}</span>
                  </div>
                </div>

                {/* Locked preview */}
                <div style={{ marginTop: 28, opacity: 0.5 }}>
                  <h2 className="hand" style={{ fontSize: 'var(--fs-h3)', marginBottom: 8 }}>3 · Imaging — what actually changes management <span className="stamp" style={{ marginLeft: 8 }}>{t('members_lock')}</span></h2>
                  <div className="sk long" style={{ marginBottom: 6 }} />
                  <div className="sk med" style={{ marginBottom: 6 }} />
                  <div className="sk long" style={{ marginBottom: 14 }} />
                  <h2 className="hand" style={{ fontSize: 'var(--fs-h3)', marginBottom: 8 }}>4 · SGLT2i, MRAs, GLP-1s <span className="stamp" style={{ marginLeft: 8 }}>{t('members_lock')}</span></h2>
                  <div className="sk long" style={{ marginBottom: 6 }} />
                  <div className="sk med" style={{ marginBottom: 6 }} />
                </div>
              </article>
            </div>
          </div>
        </section>

        <div className="wf-rule" style={{ marginTop: 24 }} />

        {/* Related */}
        <section className="section">
          <div className="container">
            <SectionHead tag={t('related_tag')} title={t('related_section')} action={t('related_more')} onAction={() => goTo('catalogue')} />
            <div className="card-grid-3">
              <ContentCard item={courses[0]} dense />
              <ContentCard item={articles[4]} dense />
              <ContentCard item={articles[1]} dense />
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}

window.ScreenArticle = ScreenArticle;
