// Theme overview — six clickable cards introducing the structure.

const themeAccents = {
  teal: 'var(--teal)',
  amber: 'var(--amber)',
  rust: 'var(--rust)',
  indigo: 'var(--indigo)',
  moss: 'var(--moss)',
  rose: 'var(--rose)'
};

const ThemeOverview = ({ onJump }) => {
  const themes = window.TUTKE_DATA.themes;
  return (
    <section className="themes" data-screen-label="03 Aihepiirit">
      <div className="themes-head">
        <div className="mono" style={{ marginBottom: '1rem' }}>§ 02 · Aihepiirit</div>
        <h2>Turvallisuuden kuusi aluetta, joilla Suomen on toimittava</h2>
        <p>Suosituksemme jakautuvat kuuteen aihepiiriin. Jokainen kortti avaa oman lukunsa.</p>
      </div>

      <div className="themes-grid">
        {themes.map((t) =>
        <div
          key={t.id}
          className="theme-cell"
          onClick={() => onJump && onJump('chapter-' + t.id)}
          style={{ '--accent': themeAccents[t.hue] }}>
          
            <div className="theme-cell-head">
              <span className="theme-num">§ {t.n}</span>
              <span className="theme-count">{t.goals.length} {t.goals.length === 1 ? 'suositus' : 'suositusta'}</span>
            </div>
            <h3>{t.title}</h3>
            <div className="theme-tag">{t.tagline}</div>
            <div className="theme-bar"></div>
          </div>
        )}
      </div>
    </section>);

};

window.ThemeOverview = ThemeOverview;
window.themeAccents = themeAccents;