/* global React, ReactDOM */
function NewsApp() {
  const [lang, setLang, t] = useLang();
  useReveal();
  return (
    <>
      <Header active="news" t={t} lang={lang} setLang={setLang} />
      <section className="page-head">
        <div className="container">
          <div className="crumbs"><a href="home.html">{t.common.home}</a><span className="sep">/</span><span>{t.nav.news}</span></div>
          <h1>{t.news_section.title_a}</h1>
          <p className="lede">{t.news_section.lede}</p>
        </div>
      </section>

      <section className="s">
        <div className="container">
          <div className="reveal">
            {t.news.map((n, i) => (
              <a key={n.slug} href={`article.html?slug=${n.slug}`} style={{
                display:"grid", gridTemplateColumns:"160px 1fr 200px 60px",
                alignItems:"center", gap: 32,
                padding: "36px 0", borderBottom:"1px solid var(--line)",
                transition:"padding 0.3s ease", textDecoration:"none", color:"inherit"
              }}
              onMouseEnter={e => { e.currentTarget.style.paddingLeft = "16px"; e.currentTarget.style.background = "var(--paper-2)"; }}
              onMouseLeave={e => { e.currentTarget.style.paddingLeft = "0"; e.currentTarget.style.background = "transparent"; }}
              >
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"var(--ink-3)"}}>{n.date}</span>
                <div>
                  <span style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--accent)", display:"block", marginBottom:8}}>{n.category}</span>
                  <h3 className="display" style={{fontSize: 26, lineHeight: 1.2, fontWeight: 400}}>{n.title}</h3>
                </div>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"var(--ink-3)"}}>{n.read} · {t.common.reading_time}</span>
                <span style={{justifySelf:"end", color:"var(--accent)"}}>→</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <Footer t={t} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render(<NewsApp />);