/* Page 2 — Section 06: Philosophy (#philosophy, cream). Trimmed to headline +
   two paragraphs (the old pillars/stats moved to section 02 Foundation). */

function Page2() {
  const { L } = useLang();
  const t = L.philosophy;
  return (
    <section id="philosophy" className="black-on-cream">
      <div className="wrap">
        <div className="page-chapter"><span>{t.chapter.left}</span><span>{t.chapter.right}</span></div>

        <Reveal>
          <h2 className="display display-lg" style={{ marginTop:64, maxWidth:'13ch' }}>
            <span style={{ display:'inline-block', padding:'0 18px 6px', background:'var(--yellow)' }}>{t.title.accent}</span><br/>
            {t.title.line2}
          </h2>
        </Reveal>

        <div style={{ marginTop:44, display:'grid', gap:22, maxWidth:820 }}>
          {t.body.map((p,i)=>(
            <Reveal key={i} delay={i*90} className="body-lg text-wrap-pretty" style={{ opacity:.82 }}>{p}</Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Page2 = Page2;