function Method() {
  const steps = [
    { n: '01 · ETAPA', icon: 'layout-grid', t: 'Perfil estruturado',
      d: 'Bio, destaques, grade e posicionamento alinhados ao que você vende. O perfil para de ser bagunça e vira ferramenta de conversão.' },
    { n: '02 · ETAPA', icon: 'filter', t: 'Funil de vendas',
      d: 'Da atenção do feed até o fechamento. Mapeamos cada degrau pra que o seguidor vire cliente — não só fã.' },
    { n: '03 · ETAPA', icon: 'message-circle', t: 'Atendimento no automático',
      d: 'Automação de DM e WhatsApp pra qualificar lead 24/7. Você atende quem é compra, não quem é curiosidade.' },
  ];

  return (
    <section className="method" id="metodo">
      <div className="method__inner">
        <div className="section-eyebrow">MÉTODO 8BAC · A SAÍDA</div>
        <h2 className="section-h2">
          O círculo digital estratégico tem três lados.
          <br/>
          <span style={{ color: 'var(--bac-blue)' }}>Os três precisam estar de pé.</span>
        </h2>
        <p className="section-sub">
          O Método 8BAC monta esses três lados na ordem certa, antes do
          tráfego entrar. Quando o bastidor tá pronto, cada real investido
          em ads vira faturamento — não fluxo.
        </p>
        <div className="method__grid">
          {steps.map(s => (
            <div key={s.n} className="card card--blue-icon">
              <div className="card__icon card__icon--solid">
                <i data-lucide={s.icon}></i>
              </div>
              <div className="card__num">{s.n}</div>
              <h3 className="card__title">{s.t}</h3>
              <p className="card__desc">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .method { background: #fff; }
        .method__inner { max-width: 1200px; margin: 0 auto; padding: 64px 20px; }
        .method__grid {
          display: grid; grid-template-columns: 1fr; gap: 14px;
        }
        @media (min-width: 600px) {
          .method__grid { grid-template-columns: 1fr 1fr; }
        }
        @media (min-width: 860px) {
          .method__inner { padding: 96px 24px; }
          .method__grid { grid-template-columns: repeat(3, 1fr); }
        }
      `}</style>
    </section>
  );
}