// components/AfiliadosPage.jsx
const AfiliadosPage = () => {
  const numbers = [0, 1, 2].map(i => ({
    n: t('afiliados.numbers.' + i + '.n'),
    l: t('afiliados.numbers.' + i + '.l'),
  }));
  const steps = [0, 1, 2].map(i => ({
    num: '0' + (i + 1),
    title: t('afiliados.steps.' + i + '.title'),
    copy: t('afiliados.steps.' + i + '.copy'),
  }));
  return (<div className="aff-page">
      <section className="aff-hero">
        <div className="container">
          <span className="t-eyebrow">{t('afiliados.hero.eyebrow')}</span>
          <h1>{t('afiliados.hero.title_a')} <em>{t('afiliados.hero.title_em')}</em>{t('afiliados.hero.title_b')}</h1>
          <p>{t('afiliados.hero.sub')}</p>
          <div className="aff-cta">
            <a className="btn btn-primary btn-lg" href="mailto:afiliados@memberai.pro?subject=Candidatura%20ao%20programa%20de%20afiliados">
              {t('afiliados.hero.cta')}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
            </a>
            <span className="aff-meta">{t('afiliados.hero.meta')}</span>
          </div>
        </div>
      </section>

      <section className="container">
        <div className="aff-numbers">
          {numbers.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('afiliados.how_title')}</h2>
        <div className="aff-steps">
          {steps.map((s, i) => (<div key={i} className="aff-step">
              <div className="step-num">{t('afiliados.step_label')} {s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
            </div>))}
        </div>
      </section>
    </div>);
};