// About page
function PageAbout({ lang, setPage }) {
  const t = window.CONTENT[lang].about;
  return (
    <div>
      <section style={{ padding: '80px 0 60px', borderBottom: '1px solid var(--border)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.eyebrow}</div>
          <h1 className="display display-xxl" style={{ marginBottom: 40 }}>
            <div>{t.title_1}</div>
            <div style={{ color: 'var(--accent)' }}>{t.title_2}</div>
          </h1>
          <p style={{ fontSize: 22, maxWidth: 860, color: 'var(--fg-dim)', lineHeight: 1.6 }}>{t.lead}</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>/ principii</div>
          <h2 className="display display-lg" style={{ marginBottom: 60 }}>{t.values_title}</h2>
          <div className="cards-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--border)' }}>
            {t.values.map((v, i) => (
              <div key={i} style={{ background: 'var(--bg)', padding: '40px 36px', position: 'relative' }}>
                <div className="display ghost-num" style={{ position: 'absolute', top: 24, right: 28, fontSize: 90, color: 'var(--bg-3)', lineHeight: 1 }}>{v.n}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.18em', marginBottom: 14 }}>{v.n}</div>
                <h3 className="display" style={{ fontSize: 34, marginBottom: 16, maxWidth: 420 }}>{v.t}</h3>
                <p style={{ color: 'var(--fg-dim)', fontSize: 16, lineHeight: 1.6, maxWidth: 520 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-2)', paddingTop: 80, paddingBottom: 80 }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <h2 className="display display-lg" style={{ marginBottom: 24 }}>
            {lang === 'ro' ? 'VINO CU NOI PE TRASEU.' : 'COME RIDE WITH US.'}
          </h2>
          <button className="btn btn-primary" onClick={() => setPage('membership')}>
            {window.CONTENT[lang].cta_join} <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}
window.PageAbout = PageAbout;