/* global React */

function AboutSection() {
  return (
    <section id="about" style={aboutStyles.wrap}>
      <div style={aboutStyles.inner}>
        <div style={aboutStyles.photoCol}>
          <img
            src="uploads/kevin-headshot.jpg"
            alt="Kevin Dietz, founder of Parade Bookkeeping"
            style={aboutStyles.photo}
          />
        </div>
        <div style={aboutStyles.textCol}>
          <div className="t-eyebrow">Who you'll work with</div>
          <h2 style={aboutStyles.h2}>Hi, I'm Kevin.</h2>
          <p style={aboutStyles.p}>
            I have a long background in software development and entrepreneurship.
            I've started several businesses in my life, some successful, some not
            as much. My Dad was self-employed as a ceramic tile contractor for most
            of his career. I understand what the life of a small business owner is
            all about.
            <br /><br />
            In terms of growing a business, the philosophy I've developed is that
            businesses should hire employees for their core competencies, and outsource
            everything else. For the majority of small and medium-sized businesses out
            there, I think they are much better served by an outsourced bookkeeping firm
            rather than hiring in-house financial staff. In my past businesses we had a
            CFO, controller, A/R manager, A/P manager, and even data entry clerks. That
            kind of top-heavy financial department is no longer needed with today's
            technology. That's why I started Parade Bookkeeping to service the needs of
            small but growing businesses. Parade Bookkeeping is the financial partner that
            I always wished I'd had.
          </p>
          <div style={aboutStyles.sig}>
            <div style={aboutStyles.sigName}>Kevin Dietz</div>
            <div style={aboutStyles.sigRole}>Parade Bookkeeping · Austin, TX</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const aboutStyles = {
  wrap: { padding: "64px 40px", background: "var(--paper)" },
  inner: { maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "320px 1fr", gap: 56, alignItems: "center" },
  photoCol: { alignSelf: "start" },
  photo: { width: "100%", height: "auto", display: "block", borderRadius: 16, border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)" },
  textCol: {},
  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;