// components/SobrePage.jsx — About / Sobre
const SobrePage = () => {
  const stats = [
    { n: '2025', l: t('sobre.stats.0.l') },
    { n: '3', l: t('sobre.stats.1.l') },
    { n: '0%', l: t('sobre.stats.2.l') },
    { n: 'BYOK', l: t('sobre.stats.3.l') },
  ];
  const principles = [0, 1, 2, 3].map(i => ({
    title: t('sobre.principles.' + i + '.title'),
    copy: t('sobre.principles.' + i + '.copy'),
  }));
  return (
    <div className="aff-page">
      <section className="aff-hero">
        <div className="container">
          <span className="t-eyebrow">{t('sobre.hero.eyebrow')}</span>
          <h1>{t('sobre.hero.title_a')} <em>{t('sobre.hero.title_em')}</em>{t('sobre.hero.title_b')}</h1>
          <p>{t('sobre.hero.sub')}</p>
        </div>
      </section>

      <section className="container">
        <div className="aff-numbers">
          {stats.map((x, i) => (
            <div key={i} className="aff-num">
              <div className="n">{x.n}</div>
              <div className="l">{x.l}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="aff-how container">
        <h2>{t('sobre.principles_title')}</h2>
        <div className="aff-steps">
          {principles.map((s, i) => (
            <div key={i} className="aff-step">
              <div className="step-num">{('0' + (i + 1)).slice(-2)}</div>
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="container" style={{paddingBottom: '64px'}}>
        <h2>{t('sobre.founders_title')}</h2>
        <p style={{maxWidth:'720px', color:'var(--muted)', marginTop:'12px'}}>{t('sobre.founders_copy')}</p>
        <p style={{maxWidth:'720px', color:'var(--muted)', marginTop:'18px'}}>
          <strong style={{color:'var(--fg)'}}>{t('sobre.address_label')}:</strong> 30 N Gould St, Ste R, Sheridan, WY 82801, USA · EIN 99-2852523
        </p>
      </section>
    </div>
  );
};