/* Section 02 — Our foundation (#foundation, cream). The strongest block:
   founder-story + 3 sub-blocks. Reuses page2's pillar pattern. */

function PageFoundation() {
  const { L } = useLang();
  const t = L.foundation;
  return (
    <section id="foundation" 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-md" style={{ marginTop:64, maxWidth:'20ch' }}>
            {t.title.a}<span className="hl-yellow">{t.title.accent}</span>{t.title.b}
          </h2>
        </Reveal>

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

        <div className="p2-pillars">
          {t.pillars.map((p,i)=>(
            <Reveal key={p.num} delay={i*100} className="body-lg text-wrap-pretty">
              <div className="mono" style={{ opacity:.55, marginBottom:14 }}>{p.num} — {p.title}</div>
              {p.body}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PageFoundation = PageFoundation;