// screen-info.jsx — Information page
function InformationScreen({ t, lang, navigate }) {
  const info = t.info;
  return (
    <main className="page info-screen">
      <header className="info-head">
        <span className="micro">— {info.title.toUpperCase()}</span>
        <h1 className="h1">Justin Personnaz</h1>
        <p className="body-l info-lede">{t.role} · {t.basedIn}.</p>
      </header>

      <section className="info-section">
        <div className="info-grid">
          <h2 className="micro col-label">{info.bioHeading}</h2>
          <div className="col-body">
            {info.bio.map((para, i) => <p key={i} className="body-l">{para}</p>)}
          </div>
        </div>
      </section>

      <hr className="rule" />

      <section className="info-section">
        <div className="info-grid">
          <h2 className="micro col-label">{info.clientsHeading}</h2>
          <ul className="col-body clients-list">
            {info.clients.map((c) => <li key={c} className="body-l">{c}</li>)}
          </ul>
        </div>
      </section>

      <hr className="rule" />

      <section className="info-section">
        <div className="info-grid">
          <h2 className="micro col-label">{info.pressHeading}</h2>
          <ul className="col-body press-list">
            {info.press.map((p, i) => (
              <li key={i}>
                <span className="micro">{p.year}</span>
                <span className="body-l">{p.line}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <hr className="rule" />

      <section className="info-section">
        <div className="info-grid">
          <h2 className="micro col-label">{info.repHeading}</h2>
          <ul className="col-body rep-list">
            {info.rep.map((r, i) => (
              <li key={i}>
                <span className="micro">{r.place}</span>
                <span className="body-l">{r.name}</span>
                <a href={`mailto:${r.email}`} className="link-u">{r.email}</a>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <div className="info-cta">
        <button className="btn" onClick={() => navigate({ name: 'contact' })}>{t.menu.contact}</button>
        <a className="link-u" href="#" onClick={(e) => e.preventDefault()}>{info.downloadCv}</a>
      </div>
    </main>
  );
}

window.InformationScreen = InformationScreen;