function Implication() {
  const items = [
    { icon: 'flame', t: 'Verba virando fumaça',
      d: 'Cada real de tráfego só amplifica o problema. Você paga pra mais gente passar pelo perfil — e mais gente ir embora.' },
    { icon: 'trending-down', t: 'Posicionamento corroído',
      d: 'O algoritmo entrega o seu conteúdo pra quem não compra. A audiência cresce sem qualidade e o engajamento real despenca.' },
    { icon: 'clock', t: 'Tempo que não volta',
      d: 'Cada mês sem estrutura é um mês sem caixa entrando. Concorrente que arrumou primeiro, ganhou primeiro.' },
    { icon: 'user-x', t: 'Lead que não volta',
      d: 'Quem te procurou e não foi atendido a tempo, comprou de outro. E você nem soube que perdeu.' },
  ];

  return (
    <section className="impl">
      <div className="impl__inner">
        <div className="impl__left">
          <div className="section-eyebrow impl__eyebrow">O QUE ACONTECE SE NÃO ARRUMAR</div>
          <h2 className="impl__h2">
            Tráfego pago em cima de bastidor bagunçado
            <br/>
            <span style={{ color: 'var(--bac-blue)' }}>é dinheiro queimado.</span>
          </h2>
          <p className="impl__sub">
            Não é uma metáfora. É operacional. Sem estrutura, o tráfego pago
            não vende — só aumenta o fluxo de pessoas passando pelo seu perfil.
            E enquanto isso, todo mês acontece isso aqui:
          </p>
        </div>
        <div className="impl__list">
          {items.map(it => (
            <div key={it.t} className="impl__row">
              <div className="impl__row-icon">
                <i data-lucide={it.icon} style={{ width: 18, height: 18 }}></i>
              </div>
              <div>
                <div className="impl__row-title">{it.t}</div>
                <p className="impl__row-desc">{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .impl { background: var(--bac-navy); color: #fff; }
        .impl__inner {
          max-width: 1200px; margin: 0 auto;
          padding: 64px 20px;
          display: flex; flex-direction: column; gap: 40px;
        }
        .impl__eyebrow { color: var(--bac-blue-100) !important; }
        .impl__h2 {
          font-family: var(--font-display); font-weight: 900;
          font-size: clamp(30px, 7vw, 56px); line-height: 1.04;
          letter-spacing: -0.03em; color: #fff; margin: 0;
        }
        .impl__sub {
          font-family: var(--font-sans); font-size: 17px; line-height: 1.55;
          color: rgba(255,255,255,.78); margin-top: 20px;
        }
        .impl__list { display: flex; flex-direction: column; gap: 12px; }
        .impl__row {
          display: flex; gap: 14px; align-items: flex-start;
          background: rgba(255,255,255,.04);
          border: 1px solid rgba(255,255,255,.10);
          border-radius: 12px; padding: 18px 20px;
        }
        .impl__row-icon {
          width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
          background: rgba(0,102,254,.18); color: var(--bac-blue);
          display: flex; align-items: center; justify-content: center;
        }
        .impl__row-title {
          font-family: var(--font-sans); font-weight: 700; font-size: 15px;
          color: #fff; margin: 2px 0 6px 0; letter-spacing: -0.01em;
        }
        .impl__row-desc {
          font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
          color: rgba(255,255,255,.72); margin: 0;
        }
        @media (min-width: 860px) {
          .impl__inner {
            flex-direction: row; gap: 64px; align-items: center;
            padding: 96px 24px;
          }
          .impl__left { flex: 1; }
          .impl__list { flex: 1; }
          .impl__sub { font-size: 18px; max-width: 480px; }
          .impl__row-title { font-size: 16px; }
          .impl__row-desc { font-size: 14.5px; }
        }
      `}</style>
    </section>
  );
}
