function WhyUs() {
  const stats = STATS;
  const [visible, setVisible] = React.useState(false);
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <Section id="quality" background="var(--navy)" color="var(--paper)" style={{ padding: '140px 0' }}>
      <div style={{
        position: 'absolute',
        top: 0, right: 0,
        width: 600, height: 600,
        background: 'radial-gradient(circle at 100% 0%, rgba(212,160,23,0.14) 0%, transparent 50%)',
        pointerEvents: 'none',
      }} />

      <div ref={sectionRef} style={{ position: 'relative' }}>
        {/* Header */}
        <div style={{ maxWidth: 900, marginBottom: 80 }}>
          <Kicker color="var(--amber)">§ 04 · Why choose SSE</Kicker>
          <Display size={80} color="var(--paper)" style={{ marginTop: 24 }}>
            Five reasons procurement teams keep coming back.
          </Display>
        </div>

        {/* Stats row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 24,
          padding: '36px 0',
          marginBottom: 80,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          borderBottom: '1px solid rgba(255,255,255,0.12)',
        }} className="sse-stats-grid">
          {stats.map((s, i) => (
            <div key={s.label} style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 8,
              paddingRight: i < 3 ? 24 : 0,
              borderRight: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none',
            }} className={`sse-stat-${i}`}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 72,
                fontWeight: 500,
                letterSpacing: '-0.04em',
                lineHeight: 0.9,
                color: 'var(--paper)',
                opacity: visible ? 1 : 0,
                transform: visible ? 'translateY(0)' : 'translateY(20px)',
                transition: `all 0.7s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.1}s`,
              }}>
                {s.value}
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--steel)', textTransform: 'uppercase' }}>
                {s.label}
              </div>
            </div>
          ))}
        </div>

        {/* USP list */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {USPS.map((usp, i) => (
            <USPRow key={usp.num} usp={usp} idx={i} />
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .sse-stats-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

function USPRow({ usp, idx }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 1fr 2fr 60px',
        gap: 40,
        alignItems: 'center',
        padding: '32px 0',
        borderBottom: '1px solid rgba(255,255,255,0.12)',
        transition: 'all 0.3s',
        cursor: 'default',
      }} className="sse-usp-row">
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 13,
        letterSpacing: '0.15em',
        color: hover ? 'var(--amber)' : 'var(--steel)',
        transition: 'color 0.3s',
      }}>
        {usp.num}
      </div>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 34,
        fontWeight: 500,
        letterSpacing: '-0.025em',
        color: 'var(--paper)',
        lineHeight: 1.05,
        transform: hover ? 'translateX(8px)' : 'translateX(0)',
        transition: 'transform 0.35s',
      }}>
        {usp.title}
      </div>
      <div style={{
        fontSize: 15,
        lineHeight: 1.55,
        color: 'var(--steel)',
        maxWidth: 520,
      }}>
        {usp.body}
      </div>
      <div style={{
        display: 'flex',
        justifyContent: 'flex-end',
        color: hover ? 'var(--amber)' : 'rgba(255,255,255,0.2)',
        transition: 'color 0.3s',
      }}>
        <Arrow size={20} />
      </div>
      <style>{`
        @media (max-width: 900px) {
          .sse-usp-row {
            grid-template-columns: 60px 1fr !important;
            gap: 20px !important;
          }
          .sse-usp-row > div:nth-child(3),
          .sse-usp-row > div:nth-child(4) {
            grid-column: 2 / -1;
          }
          .sse-usp-row > div:nth-child(4) {
            display: none !important;
          }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { WhyUs });