function Differentiators() {
  const items = [
    {
      title: 'Expertise bridging data science and software development',
      body: 'Our team works fluently across both disciplines, delivering end-to-end technical capability — from data pipeline to production application — with data-driven decisions built into every layer.',
    },
    {
      title: 'Deep understanding of machine learning and AI',
      body: 'Strategic model selection, training, deployment, and monitoring — with bias drift detection and human-in-the-loop guardrails built in from day one.',
    },
    {
      title: 'Proven success leveraging technology and data to solve complex business problems',
      body: 'Two decades of turning enterprise complexity into defined systems and measurable outcomes.',
    },
    {
      title: 'Commitment to team building and employee growth',
      body: 'We invest in our people the way we ask clients to invest in their systems — deliberately and consistently.',
    },
  ];

  const [revealed, setRevealed] = React.useState(false);
  const gridRef = React.useRef(null);

  React.useEffect(() => {
    const el = gridRef.current;
    if (!el) return;
    if (typeof IntersectionObserver === 'undefined') { setRevealed(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setRevealed(true); io.disconnect(); } });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section id="differentiators" className="ez-section ez-diff">
      <div className="ez-container">
        <div className="ez-section-head">
          <div className="eyebrow">Why EntropyZero</div>
          <h2>Differentiators that compound over time.</h2>
          <p>Four traits, drawn from twenty years of enterprise delivery, that define how we engage and what clients get back.</p>
        </div>
        <div className={'ez-diff-list' + (revealed ? ' is-revealed' : '')} ref={gridRef}>
          {items.map((it, i) => (
            <article key={it.title} className="ez-diff-row" style={{ transitionDelay: (i * 140) + 'ms' }}>
              <span className="ez-diff-check" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12.5 9.5 18 20 6.5"></polyline></svg>
              </span>
              <div className="ez-diff-body">
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Differentiators = Differentiators;