function Proof() {
  const stats = [
    { num: '84%', label: 'Increase in customer engagement', note: 'Designed & launched customer Digital Skills Hubs to improve digital confidence.' },
    { num: '3,000', label: 'Colleagues transitioned to remote', note: 'Led a cross-business transition during COVID-19, including 1,000 customer-facing staff.' },
    { num: '2×', label: 'Award-shortlisted strategy', note: "Created and led customer strategy across financial inclusion, sustainability and digital access at a UK long-term savings and retirement business, shortlisted at the Scottish Financial Enterprise Awards and Financial Services Forum Awards." },
    { num: 'UAE', label: 'Global programme expansion', note: 'Scaled a Menstrual Equity programme from the USA into the UAE \u2014 taking a women\u2019s health initiative into the Gulf.' },
    { num: '1st', label: "Scotland's Women's Health Event", note: "Integral to the launch of Scotland's first-ever Women's Health Event, bringing women, industry and clinicians together all in one place." },
    { num: '0 → 1', label: 'Menstrual cycle tool', note: 'Built and launched a menstrual cycle tool with calendar integration from scratch, from concept through to live product.' }
  ];

  return (
    <section id="results" className="navy-block grain">
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="sec-header" style={{ marginBottom: 64 }}>
          <div>
            <div className="eyebrow">Results</div>
            <h2 style={{ color: '#fff' }}>Outcomes delivered<span style={{ color: '#c7c6ea' }}>.</span></h2>
          </div>
          <p style={{ color: '#c7c6ea', fontSize: 18, lineHeight: 1.55, maxWidth: 460 }}>
            A sample from senior roles in FTSE 100 financial services, founder ventures, and advisory work across financial services and women's health.
          </p>
        </div>

        <div className="proof-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.1)' }}>
          {stats.map((s, i) => (
            <div key={i} style={{ background: 'var(--navy)', padding: '48px 40px', minHeight: 260 }}>
              <div className="stat-num" style={{ color: '#fff' }}>{s.num}</div>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#fff', marginTop: 14, marginBottom: 12 }}>{s.label}</div>
              <p style={{ color: '#c7c6ea', fontSize: 15, lineHeight: 1.55 }}>{s.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Proof = Proof;

function Industry() {
  const stats = [
    { num: '~65%', label: 'of revenue comes from existing customers', source: 'Bain & Company / HBR' },
    { num: '1 in 26', label: 'unhappy customers actually complain. The rest quietly leave', source: 'Kolsky / Nielsen-McKinsey' },
    { num: '£11.4bn', label: 'lost every month by UK businesses handling customer problems', source: 'Institute of Customer Service, UKCSI 2023' },
    { num: '5–25×', label: 'more expensive to acquire a new customer than retain one', source: 'Harvard Business Review' },
    { num: '32%', label: 'will leave a brand they love after just one bad experience', source: 'PwC, Future of CX' },
    { num: '80%', label: 'of enterprises plan to adopt AI for customer retention by 2026', source: 'Gartner' }
  ];

  return (
    <section id="industry" style={{ background: 'var(--beige)', borderTop: '1px solid rgba(27,27,39,0.08)' }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 64 }}>
          <div className="eyebrow">The landscape</div>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(28px, 3vw, 44px)', color: 'var(--ink)', marginTop: 12, lineHeight: 1.15, letterSpacing: '-0.01em' }}>
            Why customer work matters right now<span style={{ color: 'var(--navy)' }}>.</span>
          </h3>
          <p style={{ color: 'var(--body)', fontSize: 17, lineHeight: 1.6, marginTop: 16, maxWidth: 620 }}>
            The cost of getting CX wrong has never been higher, and most of it is invisible until customers are already gone.
          </p>
        </div>

        <div className="industry-grid-new" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '48px 56px' }}>
          {stats.map((s, i) => (
            <div key={i} style={{ borderTop: '1px solid rgba(27,27,39,0.15)', paddingTop: 24 }}>
              <div className="stat-num" style={{ color: 'var(--navy)', fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1 }}>{s.num}</div>
              <p style={{ color: 'var(--ink)', fontSize: 16, lineHeight: 1.55, marginTop: 16, fontWeight: 500 }}>
                {s.label}
              </p>
              <div className="mono" style={{ color: 'var(--body-soft)', fontSize: 12, marginTop: 12, letterSpacing: '0.04em' }}>
                {s.source}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Industry = Industry;