const benefitsStyles = {
  wrap: { background: 'var(--bg-surface-1)', position: 'relative', overflow: 'hidden' },
  bgGlow: {
    position: 'absolute', top: 0, right: '-10%',
    width: 700, height: 500,
    background: 'radial-gradient(circle, rgba(201,169,110,0.05), transparent 60%)',
    pointerEvents: 'none',
  },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px', position: 'relative' },
  header: { textAlign: 'center', marginBottom: 56 },
  kpiGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 0,
    border: '1px solid var(--border-subtle)',
    borderRadius: 'var(--radius-2xl)',
    overflow: 'hidden',
    background: 'var(--bg-surface-2)',
    marginBottom: 40,
  },
  kpi: {
    padding: '36px 28px',
    borderRight: '1px solid var(--border-subtle)',
    position: 'relative',
  },
  kpiBig: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(40px, 5vw, 56px)',
    fontWeight: 700,
    letterSpacing: '-0.04em',
    lineHeight: 1,
    color: 'var(--fg-1)',
  },
  kpiBigGold: { color: 'var(--brand-gold)' },
  kpiUnit: {
    fontSize: '0.55em',
    color: 'var(--fg-3)',
    fontWeight: 500,
    marginLeft: 4,
    letterSpacing: '-0.02em',
  },
  kpiLabel: {
    marginTop: 14,
    fontFamily: 'var(--font-mono)',
    fontSize: 11, fontWeight: 700,
    color: 'var(--fg-3)', letterSpacing: '0.12em',
    textTransform: 'uppercase',
  },
  kpiSub: {
    marginTop: 8,
    fontSize: 13, color: 'var(--fg-2)',
    lineHeight: 1.55,
  },
  trendBadge: {
    position: 'absolute', top: 22, right: 22,
    display: 'inline-flex', alignItems: 'center', gap: 4,
    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
    color: '#7BC598', letterSpacing: '0.08em',
    background: 'rgba(123,197,152,0.08)',
    border: '1px solid rgba(123,197,152,0.25)',
    borderRadius: 99, padding: '3px 8px',
  },
  trendBadgeDown: {
    color: '#7BC598', // savings are still "good", so green
  },
  // bottom benefit cards
  benefitsRow: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
  },
  bCard: {
    padding: 28,
    background: 'var(--bg-surface-2)',
    border: '1px solid var(--border-subtle)',
    borderRadius: 'var(--radius-xl)',
  },
  bIcon: {
    width: 40, height: 40,
    background: 'rgba(201,169,110,0.08)',
    border: '1px solid rgba(201,169,110,0.2)',
    borderRadius: 10,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--brand-gold)',
    marginBottom: 16,
  },
  bTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 17, fontWeight: 600,
    letterSpacing: '-0.015em',
    color: 'var(--fg-1)',
    marginBottom: 6,
  },
  bDesc: {
    fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6,
    margin: 0,
  },
};

function useCountUp(target, duration = 1400, startWhen = true) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!startWhen) return;
    let raf;
    const t0 = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, startWhen]);
  return val;
}

function useInView(ref, opts = {}) {
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) { setSeen(true); io.disconnect(); break; }
      }
    }, { threshold: 0.25, ...opts });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, seen]);
  return seen;
}

function Kpi({ target, decimals = 0, prefix = '', suffix = '', gold, label, sub, trend, started, isLast }) {
  const v = useCountUp(target, 1400, started);
  const display = v.toLocaleString('pt-BR', {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
  return (
    <div style={{ ...benefitsStyles.kpi, borderRight: isLast ? 'none' : benefitsStyles.kpi.borderRight }}>
      {trend && (
        <div style={benefitsStyles.trendBadge}>
          <IconTrendingUp size={10} stroke={2} />
          {trend}
        </div>
      )}
      <div style={{ ...benefitsStyles.kpiBig, ...(gold ? benefitsStyles.kpiBigGold : {}) }}>
        {prefix}{display}<span style={benefitsStyles.kpiUnit}>{suffix}</span>
      </div>
      <div style={benefitsStyles.kpiLabel}>{label}</div>
      <div style={benefitsStyles.kpiSub}>{sub}</div>
    </div>
  );
}

function Benefits() {
  const ref = React.useRef(null);
  const started = useInView(ref);

  return (
    <section className="bb-section" id="resultados" style={benefitsStyles.wrap} ref={ref}>
      <div style={benefitsStyles.bgGlow}></div>
      <div style={benefitsStyles.inner}>
        <div style={benefitsStyles.header}>
          <div className="bb-eyebrow" style={{ justifyContent: 'center' }}>Potencial</div>
          <h2 className="bb-section-title" style={{ margin: '14px auto 18px' }}>
            O que uma operação automatizada<br />
            <span className="bb-gold">pode destravar.</span>
          </h2>
          <p className="bb-section-desc" style={{ margin: '0 auto' }}>
            Faixas de referência do que a automação bem implementada costuma
            entregar. As metas do seu projeto a gente define junto, no diagnóstico.
          </p>
        </div>

        <div data-grid="kpi" style={benefitsStyles.kpiGrid}>
          <Kpi target={60} suffix="%" gold label="Redução de custos" started={started}
            sub="Potencial em processos repetitivos passíveis de automação."
            trend="meta" />
          <Kpi target={3} decimals={0} suffix="×" label="Produtividade" started={started}
            sub="Mais output por pessoa nas tarefas que a IA assume." />
          <Kpi target={4} suffix=" sem" label="Time-to-value" started={started}
            sub="Da kickoff ao primeiro resultado rodando em produção." />
          <Kpi target={95} decimals={0} suffix="%" gold label="Precisão alvo" started={started}
            sub="Meta de acerto que buscamos após calibrar o modelo." isLast />
        </div>

        <div data-grid="ben" style={benefitsStyles.benefitsRow}>
          {[
            {
              Icon: () => <IconLayers size={20} />,
              title: 'Escalabilidade real',
              desc: 'Adicione 10× volume sem adicionar 10× custo. A IA escala em segundos, contratação leva meses.',
            },
            {
              Icon: () => <IconTrendingUp size={20} />,
              title: 'Velocidade operacional',
              desc: 'Tarefas que levavam horas viram minutos. Decisões esperam dados, não relatórios manuais.',
            },
            {
              Icon: () => <IconBrain size={20} />,
              title: 'Inteligência composta',
              desc: 'Cada interação retroalimenta o modelo. O sistema fica mais preciso e barato mês após mês.',
            },
          ].map((b) => (
            <div key={b.title} style={benefitsStyles.bCard}>
              <div style={benefitsStyles.bIcon}><b.Icon /></div>
              <div style={benefitsStyles.bTitle}>{b.title}</div>
              <p style={benefitsStyles.bDesc}>{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Benefits });