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

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

  return (
    <section className="pain-sec" style={{ position: 'relative', padding: '72px 0 64px', overflow: 'hidden' }}>
      {/* Scoped styles — gradient numerals, hairline rhythm, responsive */}
      <style>{`
        .ps-stat-num {
          font-family: 'Geist', sans-serif;
          font-weight: 500;
          letter-spacing: -0.035em;
          line-height: 0.92;
          font-variant-numeric: tabular-nums;
          font-size: clamp(36px, 4.2vw, 52px);
          display: inline-flex;
          align-items: baseline;
          color: var(--ink);
        }
        /* ---- Premium glass panel — same family as the package cards ---- */
        .ps-panel {
          position: relative;
          isolation: isolate;
          border: 1px solid rgba(255,255,255,0.07);
          background:
            radial-gradient(130% 90% at 88% 8%, rgba(74,142,255,0.10), transparent 52%),
            linear-gradient(168deg, rgba(28,38,62,0.55) 0%, rgba(12,17,30,0.62) 46%, rgba(8,11,22,0.7) 100%);
          background-color: rgba(9,13,24,0.6);
          box-shadow:
            0 30px 60px -34px rgba(0,0,0,0.8),
            0 0 56px -28px rgba(74,142,255,0.26),
            inset 0 1px 0 rgba(255,255,255,0.06);
        }
        /* Top gloss hairline */
        .ps-panel::before {
          content: '';
          position: absolute; inset: 0;
          border-radius: inherit;
          background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 26%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          padding: 1px;
          opacity: 0.8;
          pointer-events: none;
          z-index: 3;
        }
        /* Blue aura rising from the base, clipped inside the card */
        .ps-aura {
          position: absolute;
          left: 50%; bottom: -46%;
          transform: translateX(-50%);
          width: 150%; height: 80%;
          background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(96,156,255,0.48) 0%, rgba(74,142,255,0.2) 38%, transparent 72%);
          filter: blur(40px);
          opacity: 0.7;
          z-index: 0;
          pointer-events: none;
        }
        .ps-cost-item {
          display: flex; align-items: center; gap: 14px;
          font-size: 15.5px; color: var(--ink);
          font-weight: 400; letter-spacing: -0.005em;
        }
        .ps-cost-item::before {
          content: ''; width: 18px; height: 1px; flex-shrink: 0;
          background: rgba(255,120,120,0.55);
          box-shadow: 0 0 8px rgba(255,90,90,0.35);
        }
        @media (max-width: 740px) {
          .ps-grid { grid-template-columns: 1fr !important; }
          .ps-left { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
        }
        @media (max-width: 440px) {
          .ps-stats { grid-template-columns: repeat(3, 1fr) !important; }
          .ps-statcell { padding: 0 8px !important; }
          .ps-statcell:first-child { padding-left: 0 !important; }
          .ps-statcell:last-child  { padding-right: 0 !important; }
          .ps-stat-num { font-size: 28px !important; }
          .ps-statcell > div:nth-child(2) { font-size: 11.5px !important; margin-top: 8px !important; }
          .ps-statcell > div:last-child { font-size: 9.5px !important; }
        }
      `}</style>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>

        {/* Compact headline row — unchanged footprint */}
        <Reveal>
        <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 actually show up.
            </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>
        </Reveal>

        {/* Premium ledger — clean, minimal, still */}
        <Reveal delay={120}>
        <div className="ps-panel" style={{
          maxWidth: 1080,
          margin: '0 auto',
          borderRadius: 18,
          overflow: 'hidden',
        }}>
          <div aria-hidden className="ps-aura" />
          <div className="ps-grid" style={{
            position: 'relative', zIndex: 1,
            display: 'grid',
            gridTemplateColumns: '0.86fr 1.14fr',
            minHeight: 240,
          }}>
            {/* LEFT — the cost, quiet & monochrome */}
            <div className="ps-left" style={{
              padding: '40px 44px',
              borderRight: '1px solid rgba(110,167,255,0.18)',
              background: 'linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.12) 100%)',
              position: 'relative',
            }}>
              <div style={{
                fontSize: 10.5, fontFamily: 'Geist Mono, monospace',
                letterSpacing: '0.2em', textTransform: 'uppercase',
                color: 'var(--ink-muted)', marginBottom: 26,
              }}>
                What waiting costs you
              </div>
              <ul style={{
                listStyle: 'none', margin: 0, padding: 0,
                display: 'flex', flexDirection: 'column', gap: 16,
              }}>
                {pains.map((p, i) => (
                  <li key={i} className="ps-cost-item">{p}</li>
                ))}
              </ul>
            </div>

            {/* RIGHT — the payoff, one faint whisper of accent light */}
            <div style={{
              padding: '40px 44px', position: 'relative',
            }}>
              <div aria-hidden style={{
                position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0,
                background: 'radial-gradient(120% 130% at 100% 0%, rgba(74,142,255,0.16), transparent 60%)',
              }} />
              <div style={{
                position: 'relative', zIndex: 1,
                display: 'flex', alignItems: 'center', gap: 9,
                fontSize: 10.5, fontFamily: 'Geist Mono, monospace',
                letterSpacing: '0.2em', textTransform: 'uppercase',
                color: 'var(--accent-2)', marginBottom: 26,
              }}>
                <span style={{
                  width: 5, height: 5, borderRadius: '50%',
                  background: 'var(--accent-2)', boxShadow: '0 0 10px var(--accent-2)',
                }} />
                <span>With Nexcut</span>
              </div>

              <div className="ps-stats" style={{
                position: 'relative', zIndex: 1,
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              }}>
                {gains.map((g, i) => (
                  <div key={i} className="ps-statcell" style={{
                    padding: i === 0 ? '0 24px 0 0' : '0 24px',
                    borderLeft: i === 0 ? 'none' : '1px solid var(--line)',
                  }}>
                    <div className="ps-stat-num">
                      {g.prefix && (
                        <span style={{
                          fontSize: '0.38em', color: 'var(--accent-2)',
                          marginRight: 3,
                          transform: 'translateY(-0.62em)', display: 'inline-block',
                        }}>{g.prefix}</span>
                      )}
                      <RollingDigit value={g.value} delay={i * 150} />
                      <span style={{
                        fontSize: '0.46em', color: 'var(--ink-muted)',
                        marginLeft: 2,
                      }}>{g.suffix}</span>
                    </div>
                    <div style={{ fontSize: 13, marginTop: 14, color: 'var(--ink)', fontWeight: 500, letterSpacing: '-0.01em' }}>
                      {g.label}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-muted)', marginTop: 5, fontFamily: 'Geist Mono, monospace', letterSpacing: '0.03em' }}>
                      {g.sub}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        </Reveal>
      </div>
    </section>
  );
}

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 = 1500;
      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 });
