// Learn — financial literacy library

function LearnScreen({ theme, accent, onNav }) {
  const cats = ['All', 'Saving', 'Investing', 'Property', 'Crypto', 'Protection', 'Tax'];
  const [cat, setCat] = React.useState('All');
  const list = cat === 'All' ? LEARN_ARTICLES : LEARN_ARTICLES.filter(a => a.category === cat);

  return (
    <Screen theme={theme}>
      <ScreenHeader title="Learn" subtitle={`${LEARN_ARTICLES.length} articles`} theme={theme} accent={accent}/>

      {/* Hero callout */}
      <div style={{ padding: '0 16px 14px' }}>
        <Card theme={theme} padded={false} style={{
          padding: 18,
          background: `linear-gradient(140deg, ${accent}10, ${theme.surface})`,
          border: `0.5px solid ${accent}40`,
        }}>
          <div style={{ display:'flex', alignItems:'flex-start', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: `${accent}20`, display:'flex', alignItems:'center', justifyContent:'center', color: accent, flexShrink: 0 }}>
              <Ico.sparkle size={16}/>
            </div>
            <div style={{ flex: 1 }}>
              <SectionLabel theme={theme} style={{ color: accent }}>Personalised picks</SectionLabel>
              <div style={{ fontFamily: FONTS.display, fontSize: 18, color: theme.text, marginTop: 4, lineHeight: 1.3 }}>
                Short reads chosen for the way <span style={{ color: accent }}>your portfolio</span> looks today.
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Filters */}
      <div style={{ display: 'flex', gap: 6, padding: '0 16px 14px', overflowX: 'auto' }}>
        {cats.map(c => (
          <Chip key={c} active={cat === c} onClick={() => setCat(c)} theme={theme} accent={accent}>{c}</Chip>
        ))}
      </div>

      {/* Article cards */}
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {list.map(a => (
          <button key={a.id} onClick={() => onNav('learn_article', { articleId: a.id })} style={{
            background: theme.surface,
            border: `0.5px solid ${theme.line}`,
            borderRadius: 20,
            padding: 18,
            textAlign: 'left',
            cursor: 'pointer',
            color: theme.text,
            width: '100%',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap: 10 }}>
              <Tag theme={theme} color={theme.textDim}>{a.category}</Tag>
              <span style={{ fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, letterSpacing: 0.5 }}>
                {a.readMinutes} min read
              </span>
            </div>
            <div style={{
              fontFamily: FONTS.display, fontSize: 17, color: theme.text,
              marginTop: 12, lineHeight: 1.3, letterSpacing: -0.3,
            }}>{a.title}</div>
            <div style={{
              fontSize: 13, color: theme.textDim, marginTop: 6, lineHeight: 1.55, fontFamily: FONTS.ui,
            }}>{a.summary}</div>
            <div style={{
              marginTop: 14,
              display:'flex', alignItems:'center', gap: 6,
              color: accent, fontSize: 12.5, fontFamily: FONTS.ui, fontWeight: 500,
            }}>
              Read article <Ico.chevR size={12} stroke={accent}/>
            </div>
          </button>
        ))}

        {list.length === 0 && (
          <div style={{
            padding: '28px 18px', textAlign: 'center',
            color: theme.textMute, fontSize: 13, fontFamily: FONTS.ui,
            border: `0.5px dashed ${theme.line2}`, borderRadius: 16,
          }}>No articles in this category yet.</div>
        )}
      </div>

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

Object.assign(window, { LearnScreen });