// Learn — single article reader

function LearnArticleScreen({ theme, accent, articleId, onBack, onNav }) {
  const article = LEARN_ARTICLES.find(a => a.id === articleId) || LEARN_ARTICLES[0];

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="" onBack={onBack}/>

      <div style={{ padding: '0 22px' }}>
        {/* Meta row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <Tag theme={theme} color={accent}>{article.category}</Tag>
          <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, letterSpacing: 0.5 }}>
            {article.readMinutes} min read
          </span>
        </div>

        {/* Headline */}
        <div style={{
          fontFamily: FONTS.display, fontSize: 28, lineHeight: 1.15,
          letterSpacing: -0.6, color: theme.text,
        }}>{article.title}</div>

        {/* Summary */}
        <div style={{
          marginTop: 10, fontSize: 14.5, lineHeight: 1.5,
          color: theme.textDim, fontFamily: FONTS.ui, fontStyle: 'italic',
        }}>{dhText(article.summary)}</div>

        {/* Body */}
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column' }}>
          {article.body.map((b, i) => {
            if (b.kind === 'h2') {
              return (
                <div key={i} style={{
                  fontFamily: FONTS.display, fontSize: 17, fontWeight: 500,
                  color: theme.text, marginTop: 22, marginBottom: 6,
                  letterSpacing: -0.2,
                }}>{dhText(b.text)}</div>
              );
            }
            return (
              <p key={i} style={{
                margin: '0 0 12px',
                fontFamily: FONTS.ui, fontSize: 14.5, lineHeight: 1.65,
                color: theme.textDim,
              }}>{dhText(b.text)}</p>
            );
          })}
        </div>

        {/* Key takeaways */}
        <div style={{ marginTop: 22 }}>
          <Card theme={theme} padded={false} style={{
            padding: 18,
            background: `linear-gradient(140deg, ${accent}10, ${theme.surface})`,
            border: `0.5px solid ${accent}40`,
          }}>
            <SectionLabel theme={theme} style={{ color: accent }}>Key takeaways</SectionLabel>
            <ul style={{
              margin: '10px 0 0', padding: 0, listStyle: 'none',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              {article.takeaways.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 10, alignItems: 'flex-start',
                  fontFamily: FONTS.ui, fontSize: 13.5, lineHeight: 1.55, color: theme.text,
                }}>
                  <span style={{
                    flexShrink: 0, marginTop: 7,
                    width: 4, height: 4, borderRadius: 2, background: accent,
                  }}/>
                  <span>{dhText(t)}</span>
                </li>
              ))}
            </ul>
          </Card>
        </div>

        {/* Apply CTA — links into the related Recommendation */}
        {article.relatedRecId && (
          <button onClick={() => onNav('recs')} style={{
            marginTop: 18, width: '100%',
            background: theme.text, color: theme.bg, border: 'none',
            padding: '13px 16px', borderRadius: 14, fontFamily: FONTS.ui,
            fontSize: 13.5, fontWeight: 500, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            Apply this insight <Ico.arrowUR size={13} stroke={theme.bg}/>
          </button>
        )}
      </div>

      <div style={{ height: 24 }}/>
    </Screen>
  );
}

Object.assign(window, { LearnArticleScreen });