/* SEL.IA — Stats section: cobertura completa (real) + monitoramento (fluxo) + ganho (estimado). */

const useCountUp = (target, run, dur = 1400) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!run) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setV(target); return; }
    let raf, start;
    const step = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); setV(target * (1 - Math.pow(1 - p, 3))); if (p < 1) raf = requestAnimationFrame(step); };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [run]);
  return v;
};

const StCounter = ({ run, target, prefix = "", suffix = "", fmt }) => {
  const v = useCountUp(target, run);
  const txt = fmt ? fmt(v) : Math.round(v).toString();
  return <span className="st-num"><span className="tnum">{prefix}{txt}</span>{suffix && <span className="st-suf">{suffix}</span>}</span>;
};

const StatsSection = () => {
  const [run, setRun] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => { es.forEach((e) => { if (e.isIntersecting) { setRun(true); io.disconnect(); } }); }, { threshold: 0.3 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const ptmil = (v) => Math.round(v).toLocaleString("pt-BR");

  const fluxo = [
    { icon: "newspaper", t: "DOU da ANEEL monitorado todos os dias", s: "100% das publicações, zero perdidas" },
    { icon: "filesearch", t: "Novos processos e movimentações capturados diariamente", s: "a base do SEI cresce sozinha" },
    { icon: "users", t: "Reuniões da Diretoria da ANEEL e pauta monitoradas semanalmente", s: "nada da agenda do colegiado passa batido" },
    { icon: "mic", t: "Sessões públicas da diretoria transcritas e pesquisáveis", s: "horas de vídeo viram conhecimento em segundos" },
    { icon: "target", t: "Padrões decisórios da diretoria mapeados", s: "por diretor, tema e resultado" },
    { icon: "bell", t: "Alertas automáticos", s: "de prazos, votos e decisões" },
  ];
  const ganho = [
    { node: <span className="st-num"><span className="tnum">30–50</span><span className="st-suf">%</span></span>, lab: "menos tempo por contribuição regulatória", tag: "validado" },
    { node: <span className="st-num st-transform">~20 min&nbsp;→&nbsp;<b>~1 min</b></span>, lab: "investigar um processo no SEI" },
    { node: <span className="st-num st-transform">~15–20 min&nbsp;→&nbsp;<b>~1 min</b></span>, lab: "pesquisar uma norma" },
    { node: <span className="st-num st-transform">manual&nbsp;→&nbsp;<b>alerta automático</b></span>, lab: "acompanhar um processo" },
  ];

  return (
    <section className="section dark-band st-sec" id="cobertura" ref={ref}>
      <div className="container">
        <div className="section-header reveal">
          <div className="section-eyebrow">Cobertura & escala</div>
          <h2>Tudo o que está vigente.<br/>Monitorado todo dia.</h2>
          <p>A SEL.IA cobre o acervo regulatório vigente e acompanha o setor em tempo real — para que, a partir de agora, você não perca nada.</p>
        </div>

        {/* Bloco 1 — cobertura completa (real) */}
        <div className="st-block reveal">
          <div className="st-blocklabel"><LandIcon name="check" size={14}/>Cobertura completa</div>
          <div className="st-grid3">
            <div className="st-card">
              <StCounter run={run} target={60} prefix="+" suffix=" mil"/>
              <div className="st-lab">Todo o acervo do <b>SEI da ANEEL</b>, atualizado diariamente</div>
            </div>
            <div className="st-card">
              <span className="st-num"><span className="tnum">100</span><span className="st-suf">%</span></span>
              <div className="st-lab">PRODIST, PRORET, REN 1.000 e legislação complementar indexados</div>
            </div>
            <div className="st-card">
              <StCounter run={run} target={7600} prefix="+" fmt={ptmil}/>
              <div className="st-lab">Citações de fonte em respostas auditáveis</div>
            </div>
          </div>
        </div>

        {/* Bloco 2 — monitoramento em tempo real (fluxo) */}
        <div className="st-block reveal">
          <div className="st-blocklabel"><span className="st-live"><span className="st-livedot"/>ao vivo</span>Monitoramento em tempo real</div>
          <div className="st-flux">
            {fluxo.map((f, i) => (
              <div className="st-fluxrow" key={i}>
                <span className="st-fluxico"><LandIcon name={f.icon} size={17}/></span>
                <div><div className="st-fluxt">{f.t}</div><div className="st-fluxs">{f.s}</div></div>
              </div>
            ))}
          </div>
          <div className="st-roadmap"><LandIcon name="sparkles" size={12}/>Histórico de sessões públicas e publicações em digitalização contínua.</div>
        </div>

        {/* Bloco 3 — ganho (estimado) */}
        <div className="st-block reveal">
          <div className="st-blocklabel">O ganho pra sua equipe<span className="st-est">estimado</span></div>
          <div className="st-grid2">
            {ganho.map((g, i) => (
              <div className="st-card est" key={i}>
                <div className="st-cardtop">{g.node}{g.tag && <span className="st-validado">{g.tag}</span>}</div>
                <div className="st-lab">{g.lab}{g.sub && <span className="st-sub"> ({g.sub})</span>}</div>
              </div>
            ))}
          </div>
        </div>

        <p className="st-source reveal">Cobertura e escala medidas na operação real da plataforma (produção, base atualizada diariamente). Os ganhos de produtividade são estimativas, calculadas a partir do tempo médio de acesso manual (~1 min por processo) e da redução de 30–50% no tempo de elaboração de contribuições observada em validação com a Daimon Engenharia e uma distribuidora de grande porte (artigo CIDE, 2026).</p>
      </div>
    </section>
  );
};
window.StatsSection = StatsSection;