// components/ComparativosPage.jsx — comparisons vs competitors
const ComparativosPage = () => {
  const competitors = ['typebot', 'manychat', 'zaia', 'botpress', 'custom'];
  const items = competitors.map(slug => ({
    slug,
    name: t('comparativos.items.' + slug + '.name'),
    them: t('comparativos.items.' + slug + '.them'),
    us: t('comparativos.items.' + slug + '.us'),
    verdict: t('comparativos.items.' + slug + '.verdict'),
  }));
  return (
    <div className="aff-page">
      <section className="aff-hero">
        <div className="container">
          <span className="t-eyebrow">{t('comparativos.hero.eyebrow')}</span>
          <h1>{t('comparativos.hero.title_a')} <em>{t('comparativos.hero.title_em')}</em>{t('comparativos.hero.title_b')}</h1>
          <p>{t('comparativos.hero.sub')}</p>
        </div>
      </section>

      <section className="aff-how container">
        <div className="aff-steps" style={{gridTemplateColumns:'1fr', gap:'24px'}}>
          {items.map((c, i) => (
            <div key={i} id={c.slug} className="aff-step" style={{padding:'32px'}}>
              <div className="step-num">Member AI vs {c.name}</div>
              <h3 style={{marginBottom:'16px'}}>{c.name}</h3>
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:'24px', marginTop:'16px'}}>
                <div>
                  <div style={{color:'var(--muted)', fontSize:'12px', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:'6px'}}>{t('comparativos.them_label')}</div>
                  <p>{c.them}</p>
                </div>
                <div>
                  <div style={{color:'var(--accent)', fontSize:'12px', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:'6px'}}>Member AI</div>
                  <p>{c.us}</p>
                </div>
              </div>
              <p style={{marginTop:'20px', paddingTop:'16px', borderTop:'1px solid rgba(255,255,255,0.08)', color:'var(--fg)'}}>
                <strong>{t('comparativos.verdict_label')}:</strong> {c.verdict}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};