/* global React */

function AboutSection() {
  return (
    <section id="about" style={aboutStyles.wrap}>
      <div style={aboutStyles.inner}>
        <div className="t-eyebrow">Who you'll work with</div>
        <h2 style={aboutStyles.h2}>Hi, I'm Kevin.</h2>
        <p style={aboutStyles.p}>
          I'm a software developer turned bookkeeper. I bring an eye for detail
          and a habit of automating anything repetitive to how I keep your books —
          so the busywork gets handled and you get a clear read on your business.
        </p>
        <p style={aboutStyles.p}>
          My goal is simple: help business owners run their business efficiently,
          with as little operational overhead as possible.
        </p>
        <div style={aboutStyles.sig}>
          <div style={aboutStyles.sigName}>Kevin Dietz</div>
          <div style={aboutStyles.sigRole}>Parade Bookkeeping · Austin, TX</div>
        </div>
      </div>
    </section>
  );
}

const aboutStyles = {
  wrap: { padding: "64px 40px", background: "var(--paper)" },
  inner: { maxWidth: 1100, margin: "0 auto" },
  h2: { fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 600, lineHeight: 1.1, letterSpacing: "-0.02em", margin: "14px 0 24px", color: "var(--ink-900)" },
  p: { fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)", margin: "0 0 18px" },
  sig: { marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--border)" },
  sigName: { fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, color: "var(--ink-900)", letterSpacing: "-0.01em" },
  sigRole: { fontSize: 13, color: "var(--fg-muted)", marginTop: 4 },
};

window.AboutSection = AboutSection;