// components/CasosPage.jsx — Customer cases
const CasosPage = () => {
  const cases = [0, 1, 2, 3].map(i => ({
    name: t('casos.list.' + i + '.name'),
    role: t('casos.list.' + i + '.role'),
    metric: t('casos.list.' + i + '.metric'),
    quote: t('casos.list.' + i + '.quote'),
    summary: t('casos.list.' + i + '.summary'),
  }));
  return (
    <div className="aff-page">
      <section className="aff-hero">
        <div className="container">
          <span className="t-eyebrow">{t('casos.hero.eyebrow')}</span>
          <h1>{t('casos.hero.title_a')} <em>{t('casos.hero.title_em')}</em>{t('casos.hero.title_b')}</h1>
          <p>{t('casos.hero.sub')}</p>
        </div>
      </section>

      <section className="aff-how container">
        <div className="aff-steps" style={{gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))'}}>
          {cases.map((c, i) => (
            <div key={i} className="aff-step">
              <div className="step-num">{c.metric}</div>
              <h3>{c.name}</h3>
              <p style={{color:'var(--muted)', marginBottom:'12px'}}>{c.role}</p>
              <p style={{fontStyle:'italic', color:'var(--fg)'}}>"{c.quote}"</p>
              <p style={{marginTop:'12px', color:'var(--muted)'}}>{c.summary}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="container" style={{paddingBottom: '64px'}}>
        <h2>{t('casos.cta.title')}</h2>
        <p style={{maxWidth:'720px', color:'var(--muted)', marginTop:'12px'}}>{t('casos.cta.copy')}</p>
        <div style={{marginTop:'24px'}}>
          <a className="btn btn-primary btn-lg" href="https://app.memberai.pro/signup" target="_blank" rel="noopener">
            {t('cta.testar_gratis')}
          </a>
        </div>
      </section>
    </div>
  );
};