// 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>{data.meta.title}</h1>
        <div className="reader-org">{data.meta.org} · Eduskuntavaalitavoitteet</div>
        <nav className="reader-actions" aria-label="Dokumentin versiot">
          <a href="/vaalitavoitteet/tutke-vaalitavoitteet-2027.pdf" download="tutke-vaalitavoitteet-2027.pdf" type="application/pdf">Lataa PDF</a>
          <a href="/vaalitavoitteet/teksti/">Avaa tekstiversio omana sivuna</a>
        </nav>

        {data.meta.intro.map((paragraph, index) => <p key={index}>{paragraph}</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;