/* global React */
const { useEffect: useEffectCmp, useRef: useRefCmp } = React;

const ROWS = [
  { label: "AnsarTech build", sub: "design → ship → operate", weeks: 4,  w: 16, accent: true,  value: "4 wks" },
  { label: "Hiring an ops manager", sub: "post → interview → ramp", weeks: 14, w: 55, accent: false, value: "14 wks" },
  { label: "Building it in-house", sub: "spec → hire → debug → maintain", weeks: 26, w: 100, accent: false, value: "26 wks" },
];

function Comparison() {
  const ref = useRefCmp(null);
  useEffectCmp(() => {
    const el = ref.current;
    if (!el) return;
    const rows = [...el.querySelectorAll('.at-compare-row')];
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            rows.forEach((row, i) => {
              setTimeout(() => row.classList.add('is-visible'), i * 220);
            });
          } else {
            rows.forEach((row) => row.classList.remove('is-visible'));
          }
        });
      },
      { threshold: 0.3 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section className="at-section at-compare" id="speed">
      <div className="at-container" ref={ref}>
        <div className="at-eyebrow">Speed</div>
        <h2 className="at-h-section">Faster than hiring.<br />Cheaper than building.</h2>
        <p className="at-body" style={{ marginBottom: 0 }}>
          From signed SOW to a running system in production. Real timelines from the last twelve months.
        </p>

        <div className="at-compare-rows">
          {ROWS.map((r, i) => (
            <div key={i} className="at-compare-row" style={{ '--w': `${r.w}%` }}>
              <div className="at-compare-label">
                {r.label}
                <small>{r.sub}</small>
              </div>
              <div className="at-compare-bar-wrap">
                <div className={`at-compare-bar ${r.accent ? 'at-compare-bar--ours' : ''}`}></div>
              </div>
              <div className="at-compare-value">{r.value}</div>
            </div>
          ))}
        </div>

        <div className="at-compare-footer">
          <span className="red">$90K/yr saved</span>
          <span>·</span>
          <span>system runs 24/7</span>
          <span>·</span>
          <span>zero PTO</span>
          <span>·</span>
          <span>one invoice, not five seats</span>
        </div>
      </div>
    </section>
  );
}

window.Comparison = Comparison;