function About() {
  return (
    <section id="about" style={{ background: '#faf9f6', padding: '100px 32px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <h2 style={{ fontSize: 'clamp(2rem, 3vw, 2.75rem)', fontWeight: 800, color: '#163F34', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
            About Your Bookkeeper
          </h2>
        </div>

        <div className="ck-about-grid" style={{
          background: '#fff', border: '1px solid #d5e7e4', borderRadius: 26, padding: 0,
          display: 'grid', gridTemplateColumns: '0.85fr 1.15fr',
          overflow: 'hidden', boxShadow: '0 8px 24px rgba(22,63,52,.06)',
        }}>
          {/* Photo */}
          <div style={{ overflow: 'hidden', display: 'flex', alignItems: 'stretch' }}>
            <img src={(window.__resources && window.__resources.headshot) || 'assets/macen-headshot.jpg'} alt="Macen Krauter, founder of Chekbooks"
              style={{ width: '100%', height: 'auto', display: 'block', objectFit: 'contain' }} />
          </div>

          <div style={{ padding: 44, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontSize: 16, color: '#345048', lineHeight: 1.7 }}>
              <p style={{ margin: '0 0 14px' }}>Hi, I'm Macen 👋.</p>
              <p style={{ margin: '0 0 14px' }}>I started Chekbooks after seeing too many business owners stuck with messy books, slow replies, and financial reports they couldn't actually use.</p>
              <p style={{ margin: '0 0 14px' }}>My approach is simple: keep the books accurate, communicate clearly, and be available when questions come up. I work exclusively with service businesses using QuickBooks Online, which allows me to understand the businesses I serve and provide a higher level of support.</p>
              <p style={{ margin: 0 }}>Chekbooks is intentionally kept small, so you'll work directly with me—not a rotating team or a different person every month. I'll know your business, stay on top of the details, and make sure you have reliable numbers to make decisions with confidence.</p>
            </div>
            <a href="contact.html" className="ck-btn-primary" style={{
              display: 'inline-block', marginTop: 28,
              background: '#3F8074', color: '#fff', textDecoration: 'none', border: '1.5px solid #3F8074',
              padding: '10px 28px', borderRadius: 10, fontWeight: 700, fontSize: 14, alignSelf: 'flex-start',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#163F34'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
            >Book A Free Call</a>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { About });