function Proof() {
  const ref = useRef();
  const seen = useInView(ref);
  const metrics = [
    { v: 38, suffix: "%", label: "Aumento médio de receita após dashboards preditivos", end: "25%" },
    { v: 83, suffix: "%", label: "Redução de tempo em tarefas repetitivas", end: "10%" },
    { v: 2.4, suffix: "x", label: "Velocidade média de entrega vs. consultorias tradicionais", end: "40%", dec: 1 },
    { v: 47, suffix: "", label: "Projetos entregues em 12 meses", end: "30%" },
  ];
  const [tab, setTab] = useState(0);
  const cases = [
    {
      sector: "E-commerce",
      title: "Loja virtual completa, do catálogo ao checkout",
      desc: "Catálogo visual, carrinho persistente. Painel administrativo para a equipe comercial gerenciar produtos, pedidos e entregas sem depender de planilha.",
      stack: ["React", "Node.js", "Stripe/Pix", "Postgres"],
      nums: [["+180%", "conversão vs. loja antiga"], ["< 1s", "tempo médio de carregamento"], ["0", "planilhas paralelas"]],
    },
    {
      sector: "Autom. Jurídica",
      title: "Geração e comparação automática de contratos",
      desc: "Contratos personalizados gerados a partir de dados estruturados, com comparação entre versões que destaca alterações e inconsistências em segundos.",
      stack: ["Python", "NLP", "PDF", "Compliance"],
      nums: [["3h→2min", "por contrato"], ["100%", "rastreabilidade de mudanças"], ["0", "erros de cláusula desde o go-live"]],
    },
    {
      sector: "Const. Civil",
      title: "Controle operacional de obras em tempo real",
      desc: "Dashboard com cronograma, custos, avanço físico e indicadores de performance. Diretoria e chão de obra olham o mesmo número - sem reunião para alinhar status.",
      stack: ["Power BI", "SQL", "Python", "APIs internas"],
      nums: [["−62%", "tempo gasto em reuniões de status"], ["+12%", "aderência ao cronograma"], ["4 sem.", "entrega do MVP"]],
    },
  ];
  const c = cases[tab];

  return (
    <section className="band" id="results" ref={ref}>
      <HexBackdrop />
      <div className="shell">
        <div className="sec-head">
          <div>
            <Eyebrow>prova</Eyebrow>
            <h2 style={{marginTop: 14}}>Resultados que <span className="text-grad">cabem em uma linha</span> - e mudam o mês seguinte.</h2>
          </div>
          <p>Cada projeto começa com um número alvo e termina com o mesmo número, movido. Abaixo, médias reais de entregas dos últimos 12 meses.</p>
        </div>

        <div className="proof-grid" style={{marginTop: 48}}>
          <div>
            <div className="metric-grid">
              {metrics.map((m, i) => <MetricCard key={i} m={m} seen={seen} />)}
            </div>

            <div className="tabs-row" role="tablist">
              {cases.map((x, i) => (
                <button key={i} className={i === tab ? "active" : ""} onClick={() => setTab(i)} role="tab" aria-selected={i===tab}>
                  {x.sector}
                </button>
              ))}
            </div>
            <div style={{padding: "8px 2px 0"}}>
              <div className="display" style={{fontSize: 26, fontWeight: 600, lineHeight: 1.2, marginBottom: 10}}>{c.title}</div>
              <p style={{fontSize: 15, maxWidth: 560}}>{c.desc}</p>
              <div style={{display:'flex', gap: 6, flexWrap:'wrap', marginTop: 16}}>
                {c.stack.map(s => <span key={s} className="mono" style={{fontSize: 11, padding: '4px 9px', border: '1px solid var(--line-2)', borderRadius: 3, color: 'var(--ink-2)'}}>{s}</span>)}
              </div>
              <div className="case-nums" style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 16, marginTop: 24, paddingTop: 20, borderTop: '1px dashed var(--line-2)'}}>
                {c.nums.map(([n,l], i) => (
                  <div key={i}>
                    <div className="display text-grad" style={{fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em'}}>{n}</div>
                    <div style={{fontSize: 12, color: 'var(--ink-3)', marginTop: 2}}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap: 16}}>
            <div className="testimonial">
              <q>Nosso site virou um vendedor silencioso. Passamos a receber contato qualificado todo dia - e a equipe comercial chega com briefing, não com pergunta.</q>
              <div className="who">
                <div className="avatar">SI</div>
                <div>
                  <div style={{fontWeight: 600}}>Cliente do setor de vendas</div>
                  <div style={{fontSize: 12, color: 'var(--ink-3)'}}>E-commerce · geração de leads</div>
                </div>
              </div>
            </div>
            <div className="testimonial">
              <q>A automação do vale-transporte devolveu dois dias por mês para o RH. Zero erro de cálculo desde o primeiro fechamento - e ninguém mais mexe em planilha à mão.</q>
              <div className="who">
                <div className="avatar" style={{background:'linear-gradient(135deg, var(--gold), var(--accent))'}}>RH</div>
                <div>
                  <div style={{fontWeight: 600}}>Cliente do setor industrial</div>
                  <div style={{fontSize: 12, color: 'var(--ink-3)'}}>Automação de RH · folha mensal</div>
                </div>
              </div>
            </div>
            <div className="testimonial">
              <q>O dashboard de vendas mudou o tom das reuniões de diretoria. A gente parou de discutir qual número é o certo - todo mundo olha o mesmo.</q>
              <div className="who">
                <div className="avatar" style={{background:'linear-gradient(135deg, var(--teal), var(--gold))'}}>DV</div>
                <div>
                  <div style={{fontWeight: 600}}>Cliente do varejo</div>
                  <div style={{fontSize: 12, color: 'var(--ink-3)'}}>Dashboard de vendas · Power BI</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MetricCard({ m, seen }) {
  const v = useCountUp(seen ? m.v : 0, 1400);
  const shown = m.dec ? v.toFixed(m.dec) : Math.round(v);
  return (
    <div className="metric">
      <div className="v">{shown}<span className="unit">{m.suffix}</span></div>
      <div className="label">{m.label}</div>
      <div className="bar" style={{"--end": m.end}} />
    </div>
  );
}

Object.assign(window, { Proof });