function BeforeAfter() {
  const before = [
    'Bio confusa, ninguém entende em 3 segundos o que você faz',
    'Seguidor curte e some. Nunca chega no fechamento',
    'DM perdida no meio do caos. Lead quente esfria',
    'Tráfego pago entregue pra audiência errada',
    'Faturamento que oscila no humor do algoritmo',
  ];
  const after = [
    'Perfil que comunica posicionamento na primeira olhada',
    'Funil que conduz do feed até o fechamento da venda',
    'Automação atende, qualifica e prepara o lead 24/7',
    'Tráfego pago amplificando uma estrutura que já vende',
    'Faturamento previsível, com cada etapa medida',
  ];

  return (
    <section className="ba">
      <div className="ba__inner">
        <div className="section-eyebrow">ANTES · DEPOIS</div>
        <h2 className="section-h2">
          O mesmo perfil, com e sem bastidor estruturado.
        </h2>
        <div className="ba__grid">
          <div className="ba__col ba__col--light">
            <span className="ba__col-label">ANTES · BASTIDOR BAGUNÇADO</span>
            <h3 className="ba__col-title">
              Você posta. <span style={{ color: 'var(--ink-3)' }}>E reza.</span>
            </h3>
            {before.map(b => (
              <div key={b} className="ba__row ba__row--light">
                <div className="ba__icon ba__icon--x">
                  <i data-lucide="x" style={{ width: 14, height: 14 }}></i>
                </div>
                <p className="ba__text" style={{ color: 'var(--ink-2)' }}>{b}</p>
              </div>
            ))}
          </div>
          <div className="ba__col ba__col--dark">
            <span className="ba__col-label" style={{ color: 'var(--bac-blue)' }}>DEPOIS · MÉTODO 8BAC</span>
            <h3 className="ba__col-title" style={{ color: '#fff' }}>
              Você posta. <span style={{ color: 'var(--bac-blue)' }}>E vende.</span>
            </h3>
            {after.map(a => (
              <div key={a} className="ba__row ba__row--dark">
                <div className="ba__icon ba__icon--check">
                  <i data-lucide="check" style={{ width: 14, height: 14 }}></i>
                </div>
                <p className="ba__text" style={{ color: 'rgba(255,255,255,.86)' }}>{a}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .ba {
          background: var(--bg-alt);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .ba__inner { max-width: 1200px; margin: 0 auto; padding: 64px 20px; }
        .ba__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
        .ba__col {
          border-radius: 12px; padding: 28px 24px;
          display: flex; flex-direction: column; gap: 0;
        }
        .ba__col--light { background: #fff; border: 1px solid var(--line); }
        .ba__col--dark  { background: var(--ink-1); border: 1px solid var(--ink-1); }
        .ba__col-label {
          font-family: var(--font-mono); font-size: 11px; font-weight: 700;
          letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
        }
        .ba__col-title {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(24px, 6vw, 32px); line-height: 1.08;
          letter-spacing: -0.02em; margin: 6px 0 16px 0; color: var(--ink-1);
        }
        .ba__row {
          display: flex; align-items: flex-start; gap: 12px;
          padding: 13px 0; border-top: 1px solid var(--line);
        }
        .ba__row--dark { border-top-color: rgba(255,255,255,.10); }
        .ba__icon {
          width: 22px; height: 22px; border-radius: 6px;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0; margin-top: 1px;
        }
        .ba__icon--x     { background: rgba(229,56,77,.10); color: var(--danger); }
        .ba__icon--check { background: rgba(0,102,254,.18);  color: var(--bac-blue); }
        .ba__text {
          font-family: var(--font-sans); font-size: 15px; line-height: 1.5; margin: 0;
        }
        @media (min-width: 860px) {
          .ba__inner { padding: 96px 24px; }
          .ba__grid { grid-template-columns: 1fr 1fr; }
          .ba__col { padding: 36px; }
          .ba__col-label { font-size: 12px; }
          .ba__text { font-size: 15.5px; }
        }
      `}</style>
    </section>
  );
}