// ============================================================
// RESULTADOS POR CANAL — banner visual entre Fluxo e Cases
// Sem valores em R$; só percentuais e métricas operacionais
// ============================================================

const CANAIS = [
  {
    logo: 'assets/google-partner-v2.png',
    nome: 'Google Ads',
    metric: '−64',
    unit: '%',
    label: 'CPL médio',
    ctx: 'após otimização Apta',
    tone: 'sage',
  },
  {
    logo: 'assets/logo-meta.png',
    nome: 'Meta Ads',
    metric: '+212',
    unit: '%',
    label: 'alcance qualificado',
    ctx: 'segmentação por intenção',
    tone: 'gold',
  },
  {
    logo: 'assets/logo-gmn-store.png',
    nome: 'Google Meu Negócio',
    metric: '+147',
    unit: '%',
    label: 'buscas locais',
    ctx: 'ficha + reviews ativas',
    tone: 'olive',
  },
  {
    logo: 'assets/logo-whatsapp.png',
    nome: 'WhatsApp · n8n',
    metric: '14',
    unit: 's',
    label: 'tempo de resposta',
    ctx: 'lead → vendedor, automático',
    tone: 'coral',
  },
  {
    logo: 'assets/logo-kommo-circle.png',
    nome: 'Kommo CRM',
    metric: '×3',
    unit: '',
    label: 'conversão',
    ctx: 'follow-up organizado',
    tone: 'lavender',
  },
];

function Resultados() {
  return (
    <section className="section resultados" data-screen-label="05b Resultados">
      <div className="container">

        <div className="reveal resultados-head">
          <div>
            <span className="eyebrow">05 · resultados por canal</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              O sistema mexe<br />o ponteiro <em>em todo canal.</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: 460 }}>
            Média dos últimos 90 dias entre clientes ativos. Tráfego pago, presença local,
            atendimento e CRM — cada canal puxa o resultado do outro.
          </p>
        </div>

        <div className="resultados-grid reveal">
          {CANAIS.map((c) => (
            <article className={`canal-card canal-${c.tone}`} key={c.nome}>
              <div className="canal-head">
                <div className="canal-logo">
                  <img src={R(c.logo)} alt={c.nome} loading="lazy" decoding="async" />
                </div>
                <span className="canal-name">{c.nome}</span>
              </div>

              <div className="canal-metric">
                <span className="cm-num">{c.metric}</span>
                <span className="cm-unit">{c.unit}</span>
              </div>

              <div className="canal-body">
                <div className="canal-label">{c.label}</div>
                <div className="canal-ctx">{c.ctx}</div>
              </div>
            </article>
          ))}
        </div>

        <div className="resultados-foot reveal">
          <span className="rf-mark">{`// `}</span>
          médias agregadas. Cada cliente recebe relatório próprio toda segunda.
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { Resultados });