function useCountUp(target, duration = 2000) {
  const [count, setCount] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (now) => {
          const t = Math.min((now - start) / duration, 1);
          // easeOutExpo: arranca rápido e para com muita suavidade
          const ease = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
          setCount(Math.round(ease * target));
          if (t < 1) requestAnimationFrame(tick);
          else setCount(target);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    observer.observe(el);
    return () => observer.disconnect();
  }, [target, duration]);

  return [count, ref];
}

function StatNum({ target, duration, label, format }) {
  const [count, ref] = useCountUp(target, duration);
  return (
    <div className="stat-item" ref={ref}>
      <div className="kicker-num">{format(count)}</div>
      <div style={{fontSize:13,color:'rgba(255,255,255,.55)',letterSpacing:'.02em'}}>{label}</div>
    </div>
  );
}

function About() {
  return (
    <section id="sobre" style={{padding:'40px 0 0'}}>
      <div className="about">
        <div className="container">
          <div className="about-grid">
            <div>
              <span className="eyebrow"><span className="dot"></span>O que é</span>
              <h2 style={{marginTop:18,maxWidth:'14ch'}}>
                Inteligência artificial<br/>
                <span className="serif-i" style={{color:'var(--accent)'}}>ao alcance de todos.</span>
              </h2>
            </div>
            <div>
              <p className="lead" style={{fontSize:19,lineHeight:1.55}}>
                Com IA integrada, o aplicativo conecta cidadãos e prefeitura em um único canal. As mensagens são classificadas e direcionadas para as secretarias responsáveis, agilizando atendimentos, fortalecendo a imagem pública e gerando dados estratégicos da população.
              </p>
              <div style={{display:'flex',gap:32,marginTop:32,flexWrap:'wrap'}}>
                <StatNum
                  target={10}
                  duration={3800}
                  label="downloads nas lojas"
                  format={(n) => `+${n < 10 ? (n / 10).toFixed(1) : '1'}M`}
                />
                <StatNum
                  target={15}
                  duration={3400}
                  label="secretarias integradas"
                  format={(n) => `+${n}`}
                />
                <StatNum
                  target={40}
                  duration={3400}
                  label="municípios digitalizados"
                  format={(n) => `+${n}`}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;