function About() {
  return (
    <section id="about" style={{ background: 'var(--beige-soft)', borderTop: '1px solid var(--rule)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }} className="about-grid">
          <div style={{ position: 'sticky', top: 120 }}>
            <div style={{ aspectRatio: '4/5', background: 'var(--beige-deep)', borderRadius: 2, overflow: 'hidden' }}>
              <img src="assets/megan-about.jpeg" alt="Megan Hunter" draggable="false" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '30% center', display: 'block', pointerEvents: 'none', userSelect: 'none' }} />
            </div>
          </div>

          <div>
            <div className="eyebrow">About</div>
            <h2 style={{ fontSize: 'clamp(34px, 4vw, 54px)', marginBottom: 24 }}>
              About me<span style={{ color: 'var(--navy)' }}>.</span>
            </h2>

            <p style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(22px, 2.4vw, 28px)', lineHeight: 1.4, color: 'var(--ink)', paddingBottom: 32, marginBottom: 32, borderBottom: '1px solid var(--rule)' }}>
              I sit in the crossover of strategic depth and hands-on delivery<span style={{ color: 'var(--navy)' }}>.</span>
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, fontSize: 17, lineHeight: 1.75, color: 'var(--body)' }}>
              <p>
                Eight years in FTSE 100 financial services, most recently as Head of Customer Sustainability at Phoenix Group. Now independent, working with startups in fintech and femtech, alongside established enterprises.
              </p>
              <p>
                I care about the craft of customer experience, the evidence behind good product decisions, and the philosophy that underpins why we build things in the first place.
              </p>
            </div>

            <div style={{ marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--rule)', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div>
                <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 6 }}>Now</div>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, color: 'var(--ink)', lineHeight: 1.35 }}>Fractional CX and product leader · Founder, <a href="https://nadi.health" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--navy)', textDecoration: 'underline', textDecorationThickness: 1, textUnderlineOffset: 3 }}>Nadi</a> · Host, Making It Matter</div>
              </div>
              <div>
                <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 6 }}>Previously</div>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, color: 'var(--ink)', lineHeight: 1.35 }}>Head of Customer Sustainability · Phoenix Group (FTSE 100)</div>
              </div>
              <div>
                <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 6 }}>Based</div>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, color: 'var(--ink)', lineHeight: 1.35 }}>Europe · UAE · Fully remote</div>
              </div>
            </div>

            <div style={{ marginTop: 32 }}>
              <a href="https://cal.com/megan-hunter" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Book an intro call
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;