// Reader mode — plain text version of the document.

const ReaderMode = ({ onClose }) => {
  const data = window.TUTKE_DATA;

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  const goalsByTheme = {};
  data.goals.forEach(g => { (goalsByTheme[g.theme] = goalsByTheme[g.theme] || []).push(g); });

  return (
    <div className="reader" role="dialog" aria-modal="true">
      <button className="reader-close" onClick={onClose}>Sulje · Esc</button>
      <div className="reader-content">
        <h1>Suomen tekoälyvalinnat 2027</h1>
        <div className="reader-org">Turvallisen tekoälyn keskus · Tutke ry · Eduskuntavaalitavoitteet</div>

        <p>
          Tekoäly kehittyy nopeasti ja muuttaa yhteiskuntaa laajemmin kuin mikään teknologia sitten internetin. Suomi on hyvässä asemassa: meillä on vahva osaamispohja, toimiva hallinto ja kansainvälistä luottamuspääomaa. Mutta ikkuna on kapea. Seuraavan hallituskauden aikana tehdään ratkaisuja, jotka määrittävät miten Suomi hyötyy tekoälystä ja miten se suojautuu sen riskeiltä.
        </p>
        <p>
          Esitämme alla 15 suositusta turvallisemman tekoälyn puolesta Suomessa. Jokaiseen suositukseen liittyy myös suluissa vastuullinen hallinnonala.
        </p>

        {data.themes.map(t => (
          <React.Fragment key={t.id}>
            <h2>{t.title}</h2>
            <p><em>{t.lede}</em></p>
            {(goalsByTheme[t.id] || []).map(g => (
              <React.Fragment key={g.id}>
                <h3><span className="num">№ {g.id}.</span>{g.title}</h3>
                <p>{g.body}</p>
                <div className="reader-ministries">Vastuutaho: {g.ministries.join(' · ')}</div>
              </React.Fragment>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

window.ReaderMode = ReaderMode;