function AboutMe() {
  return (
    <section id="about" style={{ padding: '64px 48px', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--content-max-width)', margin: '0 auto', display: 'grid', gridTemplateColumns: '100px 1fr', gap: 24, alignItems: 'center' }}>
        <img
          src="./images/headshot.jpg"
          alt="Founder of Advocate Smart"
          style={{ width: 100, height: 100, borderRadius: '50%', objectFit: 'cover' }}
        />
        <div>
          <div style={{ font: 'var(--text-label)', color: 'var(--color-primary)', marginBottom: 8 }}>Why this exists</div>
          <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', maxWidth: 620 }}>
            I've sat on both sides of the table — as a former classroom teacher and as a parent who had to learn how to advocate for my own child. I built this because most parents don't need a lawyer. They need someone who knows the process, keeps them organized, and helps them stop sending emails they'll regret.
          </p>
        </div>
      </div>
    </section>
  );
}
window.AboutMe = AboutMe;