// Before/After bars with IntersectionObserver
const BeforeAfterBars = () => {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

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

  const rows = [
    { label: "Tempo até a 1ª isenção", before: 8, after: 85, beforeLabel: "meses sozinho", afterLabel: "semanas com Dalla Costa" },
    { label: "Documentação correta na 1ª tentativa", before: 22, after: 95 },
    { label: "Aprovação sem recurso", before: 35, after: 98 },
    { label: "Aproveitamento integral do benefício", before: 15, after: 92 },
  ];

  return (
    <div ref={ref} className="ba-grid">
      <div className="ba-col before">
        <h3>Antes — sem orientação</h3>
        {rows.map((r, i) => (
          <div key={i} className="ba-bar-group">
            <div className="ba-bar-label">
              <strong>{r.label}</strong>
              <span>{r.before}%{r.beforeLabel ? ` · ${r.beforeLabel}` : ""}</span>
            </div>
            <div className="ba-bar-track">
              <div className="ba-bar-fill" style={{ width: visible ? `${r.before}%` : 0 }}/>
            </div>
          </div>
        ))}
      </div>

      <div className="ba-col after">
        <h3>Depois — com Dalla Costa</h3>
        {rows.map((r, i) => (
          <div key={i} className="ba-bar-group">
            <div className="ba-bar-label">
              <strong>{r.label}</strong>
              <span>{r.after}%{r.afterLabel ? ` · ${r.afterLabel}` : ""}</span>
            </div>
            <div className="ba-bar-track">
              <div className="ba-bar-fill" style={{ width: visible ? `${r.after}%` : 0, transitionDelay: `${i * 0.1 + 0.2}s` }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.BeforeAfterBars = BeforeAfterBars;