// Diferencial.jsx — before/after animated bars
const { useRef: useDifRef, useEffect: useDifEff, useState: useDifState } = React;

const METRICS = [
  { label: 'Constância',          before: 15, after: 92 },
  { label: 'Resultado duradouro', before: 10, after: 88 },
  { label: 'Bem-estar emocional', before: 20, after: 90 },
  { label: 'Autoestima',          before: 25, after: 94 },
];

function BarRow({ label, value, type, animate }) {
  return (
    <div className="dif-bar-row">
      <div className="dif-bar-label">
        <span style={{ fontSize: 14, fontWeight: 500 }}>{label}</span>
        <span style={{
          fontSize: 13, fontWeight: 600,
          color: type === 'after' ? 'var(--accent)' : '#aaa',
        }}>{value}%</span>
      </div>
      <div className="dif-bar-track">
        <div
          className={`dif-bar-fill ${type}${animate ? ' animate' : ''}`}
          style={{ width: `${value}%` }}
        />
      </div>
    </div>
  );
}

function Diferencial() {
  const ref = useDifRef();
  const [animated, setAnimated] = useDifState(false);
  useReveal(ref);

  useDifEff(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setAnimated(true); obs.disconnect(); }
    }, { threshold: 0.25 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="dif-section" ref={ref}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 'clamp(40px,5vw,64px)' }}>
          <p className="eyebrow reveal">Diferencial operacional</p>
          <h2 className="section-title reveal rev-d1">
            A diferença que o método <em>faz</em> — em números
          </h2>
          <p className="reveal rev-d2" style={{ fontSize: 16, color: '#6a5060', marginTop: 12, maxWidth: 520, margin: '12px auto 0' }}>
            Sem método, o esforço não se converte em resultado duradouro. Com o método Conectadas, cada dimensão evolui de forma mensurável.
          </p>
        </div>
        <div className="dif-inner">
          {/* Before */}
          <div className="reveal rev-d2">
            <div className="dif-col-title" style={{ color: '#aaa' }}>
              Antes — sem método
            </div>
            {METRICS.map((m, i) => (
              <BarRow key={i} label={m.label} value={m.before} type="before" animate={animated} />
            ))}
          </div>
          {/* After */}
          <div className="reveal rev-d3">
            <div className="dif-col-title grad" style={{ WebkitTextFillColor: 'transparent' }}>
              Depois — Conectadas Fitness
            </div>
            {METRICS.map((m, i) => (
              <BarRow key={i} label={m.label} value={m.after} type="after" animate={animated} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Diferencial });