// ATOM Center — Page: About
const AboutPage = ({ lang, navigate }) => {
  const tr = (k) => t(lang, "about." + k);

  const principles = [
    { num: "01", title: tr("pr1"), body: tr("pr1d") },
    { num: "02", title: tr("pr2"), body: tr("pr2d") },
    { num: "03", title: tr("pr3"), body: tr("pr3d") },
  ];

  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="breadcrumb">{t(lang,"nav.home")} <span>/</span> {tr("breadcrumb")}</div>
          <h1>{tr("titleA")} <span className="accent">{tr("titleB")}</span> {tr("titleC")}</h1>
          <p className="page-sub">{tr("sub")}</p>
        </div>
      </header>

      {/* MANIFESTO — poster style */}
      <section className="section-poster">
        <div className="container two-col">
          <div>
            <span className="eyebrow" style={{color:"rgba(255,255,255,0.6)"}}>{tr("manifestoEyebrow")}</span>
            <h2 className="h-display-2" style={{color:"white", marginTop:16}}>{tr("manifestoTitle")}</h2>
          </div>
          <div>
            <p style={{fontSize:18, lineHeight:1.6, color:"rgba(255,255,255,0.92)", whiteSpace:"pre-line"}}>{tr("manifestoBody")}</p>
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{tr("principlesEyebrow")}</span>
            <h2 className="h-display-2">{tr("principlesTitle")}</h2>
          </div>
          <div className="cards-grid">
            {principles.map((p, i) => (
              <div key={i} className="card">
                <div style={{fontFamily:"var(--font-display)", fontWeight:900, fontSize:48, color:"var(--center-blue)", lineHeight:1, marginBottom:8}}>{p.num}</div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section className="section-grey">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{tr("teamEyebrow")}</span>
            <h2 className="h-display-2">{tr("teamTitle")}</h2>
            <p className="lead">{tr("teamSub")}</p>
          </div>
          <div className="cards-grid">
            {[
              { name: tr("teamFounder"), role: tr("teamFounderRole"), initials: "CM", color: "#1A3DA0" },
              { name: tr("teamDirector"), role: tr("teamDirectorRole"), initials: "DP", color: "#6848A8" },
              { name: tr("teamPartner"), role: tr("teamPartnerRole"), initials: "DE", color: "#284838" },
            ].map((p, i) => (
              <div key={i} className="card" style={{textAlign:"center", alignItems:"center"}}>
                <div style={{
                  width:88, height:88, borderRadius:"50%",
                  background: p.color, color:"white",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  fontFamily:"var(--font-display)", fontWeight:800, fontSize:28,
                  letterSpacing:"0.04em",
                }}>{p.initials}</div>
                <h3 style={{textAlign:"center"}}>{p.name}</h3>
                <p style={{textAlign:"center"}}>{p.role}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <EcosystemSection lang={lang}/>
      <CtaSection lang={lang} navigate={navigate}/>
    </>
  );
};

window.AboutPage = AboutPage;