function PainStats() {
  const pains = [
    'Inconsistent posting',
    'No content strategy',
    'Production sludge',
    'Editing bottlenecks',
  ];

  const gains = [
    { value: 200, suffix: '%', label: 'More engagement', sub: 'Viral edits' },
    { value: 5,   suffix: '×', label: 'More reach',      sub: 'Strategic distribution' },
    { value: 50,  suffix: '%', label: 'More leads',      sub: 'Automated systems' },
  ];

  return (
    <section className="pain-sec" style={{ position: 'relative', padding: '72px 0 64px', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>

        {/* Compact headline row */}
        <div style={{
          display: 'flex',
          alignItems: 'flex-end',
          justifyContent: 'space-between',
          gap: 40,
          maxWidth: 1080,
          margin: '0 auto 28px',
          flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: 640 }}>
            <span className="sec-eyebrow" style={{ marginBottom: 14, display: 'inline-flex' }}>
              The cost of waiting
            </span>
            <h2 className="display" style={{
              fontSize: 'clamp(26px, 2.6vw, 36px)',
              lineHeight: 1.15,
              marginTop: 14,
            }}>
              Your dream clients are buying from competitors who <span className="serif-italic" style={{ color: 'var(--accent-2)' }}>actually show up.</span>
            </h2>
          </div>
          <p style={{
            fontSize: 14,
            lineHeight: 1.55,
            color: 'var(--ink-muted)',
            maxWidth: 320,
            margin: 0,
          }}>
            Procrastination compounds. Every week without a system is a week of compounding silence — and someone else closing your deals.
          </p>
        </div>

        {/* The Receipt — single side-by-side ledger */}
        <div style={{
          position: 'relative',
          maxWidth: 1080,
          margin: '0 auto',
          borderRadius: 20,
          border: '1px solid var(--line)',
          background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))',
          overflow: 'hidden',
        }}>
          <div className="receipt-grid" style={{
            display: 'grid',
            gridTemplateColumns: '0.85fr 1.15fr',
            minHeight: 220,
          }}>
            {/* LEFT — pain column */}
            <div className="receipt-left" style={{
              padding: '24px 28px',
              borderRight: '1px solid var(--line)',
              background:
                'radial-gradient(120% 80% at 0% 0%, rgba(255,90,90,0.06), transparent 60%)',
              position: 'relative',
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontSize: 11, fontFamily: 'Geist Mono, monospace',
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: '#ff8a8a',
                marginBottom: 18,
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: '#ff8a8a',
                  boxShadow: '0 0 10px #ff8a8a',
                }} />
                Without a system
              </div>

              <ul style={{
                listStyle: 'none', margin: 0, padding: 0,
                display: 'flex', flexDirection: 'column', gap: 10,
              }}>
                {pains.map((p, i) => (
                  <li key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    fontSize: 15,
                    color: 'var(--ink-muted)',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, opacity: 0.7 }}>
                      <path d="M3 3 L11 11 M11 3 L3 11" stroke="#ff8a8a" strokeWidth="1.6" strokeLinecap="round" />
                    </svg>
                    <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(255,138,138,0.35)' }}>
                      {p}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* RIGHT — gain column */}
            <div style={{
              padding: '24px 28px',
              background:
                'radial-gradient(120% 100% at 100% 0%, rgba(74,142,255,0.10), transparent 60%)',
              position: 'relative',
            }}>
              <div className="receipt-gainhead" style={{
                display: 'flex', alignItems: 'center', gap: 10,
                fontSize: 11, fontFamily: 'Geist Mono, monospace',
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--accent-2)',
                marginBottom: 18,
                justifyContent: 'flex-end',
              }}>
                <span>With Nexcut</span>
                <span style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: 'var(--accent-2)',
                  boxShadow: '0 0 10px var(--accent-2)',
                }} />
              </div>

              <div className="receipt-gains" style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: 0,
              }}>
                {gains.map((g, i) => (
                  <div key={i} className="receipt-gain" style={{
                    padding: i === 0 ? '0 18px 0 0' : '0 18px',
                    borderLeft: i === 0 ? 'none' : '1px solid var(--line)',
                  }}>
                    <div className="display" style={{
                      fontSize: 'clamp(34px, 4vw, 48px)',
                      lineHeight: 1,
                      color: '#fff',
                      fontVariantNumeric: 'tabular-nums',
                      display: 'flex', alignItems: 'baseline', gap: 2,
                    }}>
                      <span style={{ fontSize: 18, color: 'var(--accent-2)', marginRight: 2 }}>+</span>
                      <RollingDigit value={g.value} delay={i * 150} />
                      <span style={{ fontSize: 22, color: 'var(--ink-dim)', marginLeft: 1 }}>{g.suffix}</span>
                    </div>
                    <div style={{ fontSize: 13, marginTop: 10, color: 'var(--ink)', fontWeight: 500 }}>
                      {g.label}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-muted)', marginTop: 4, fontFamily: 'Geist Mono, monospace', letterSpacing: '0.04em' }}>
                      {g.sub}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Arrow seam — sits over the 0.85/(0.85+1.15) = 42.5% divider */}
          <ArrowSeam />
        </div>
      </div>
    </section>
  );
}

function ArrowSeam() {
  // Sits centered on the vertical divider (at 42.5% — left column is 0.85/(0.85+1.15) = 0.425)
  return (
    <div className="receipt-arrow" style={{
      position: 'absolute',
      left: '42.5%',
      top: '50%',
      transform: 'translate(-50%, -50%)',
      width: 36, height: 36,
      borderRadius: '50%',
      background: 'var(--bg)',
      border: '1px solid var(--line-2)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 0 0 6px var(--bg), 0 6px 20px rgba(74,142,255,0.25)',
      zIndex: 3,
    }}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d="M2 7 L11 7 M7 3 L11 7 L7 11" stroke="#6ea7ff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function RollingDigit({ value, delay = 0 }) {
  const [current, setCurrent] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const fire = () => {
      const start = Date.now(), dur = 1400;
      const tick = () => {
        const p = Math.min(1, (Date.now() - start) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setCurrent(Math.floor(eased * value));
        if (p < 1) requestAnimationFrame(tick);
        else setCurrent(value);
      };
      setTimeout(() => requestAnimationFrame(tick), delay);
    };
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) fire();
    else {
      const obs = new IntersectionObserver(([e]) => {
        if (e.isIntersecting) { fire(); obs.disconnect(); }
      }, { threshold: 0.4 });
      obs.observe(el);
      return () => obs.disconnect();
    }
  }, [value, delay]);
  return <span ref={ref}>{current}</span>;
}

Object.assign(window, { PainStats, RollingDigit });
