// components/IntegracoesPage.jsx — supported integrations
const IntegracoesPage = () => {
  const groups = ['engines', 'payment', 'channels'];
  const data = groups.map(g => ({
    title: t('integracoes.groups.' + g + '.title'),
    items: [0, 1, 2, 3].map(i => t('integracoes.groups.' + g + '.items.' + i)).filter(s => s && !s.startsWith('integracoes.')),
  }));
  return (
    <div className="aff-page">
      <section className="aff-hero">
        <div className="container">
          <span className="t-eyebrow">{t('integracoes.hero.eyebrow')}</span>
          <h1>{t('integracoes.hero.title_a')} <em>{t('integracoes.hero.title_em')}</em>{t('integracoes.hero.title_b')}</h1>
          <p>{t('integracoes.hero.sub')}</p>
        </div>
      </section>

      <section className="aff-how container">
        <div className="aff-steps">
          {data.map((g, i) => (
            <div key={i} className="aff-step">
              <div className="step-num">{('0' + (i + 1)).slice(-2)}</div>
              <h3>{g.title}</h3>
              <ul style={{margin:'12px 0 0 0', padding:0, listStyle:'none'}}>
                {g.items.map((it, j) => (
                  <li key={j} style={{padding:'8px 0', borderBottom:'1px solid rgba(255,255,255,0.06)', color:'var(--fg)'}}>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      <section className="container" style={{paddingBottom: '64px'}}>
        <h2>{t('integracoes.byok_title')}</h2>
        <p style={{maxWidth:'720px', color:'var(--muted)', marginTop:'12px'}}>{t('integracoes.byok_copy')}</p>
      </section>
    </div>
  );
};