// components/AboutPage.jsx

function AboutPage() {
  return (
    <div className="sb-page">
      <Section tone="linen" style={{ paddingBlock: 'clamp(56px, 8vw, 96px)' }}>
        <div style={{ marginBottom: 40 }}>
          <LogoBlock size={40} color="var(--sb-ink)" accent="var(--sb-amber)" />
          <div style={{ height: 1, background: 'var(--sb-stone)', marginTop: 22 }} />
        </div>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow>About</Eyebrow>
          <h1 className="sb-h1" style={{ marginTop: 22 }}>
            One bookkeeper. Yours.
          </h1>
          <p className="sb-body-lg" style={{ marginTop: 28 }}>
            Settled Books is a solo practice. When you hire us, you work directly with Chris Gilbertson — not a junior associate, not a rotating team, not a pool of offshore contractors. Same person every month, every call, every close.
          </p>
        </div>
      </Section>

      {/* Bio block */}
      <Section tone="cream">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 56, alignItems: 'flex-start' }}>
          {/* Portrait + caption */}
          <div>
            <div style={{
              aspectRatio: '4 / 5',
              background: 'var(--sb-bone)',
              border: '1px solid var(--sb-stone)',
              overflow: 'hidden',
              position: 'relative',
              boxShadow: '0 4px 12px rgba(42, 39, 36, 0.20), 0 36px 80px -12px rgba(42, 39, 36, 0.42)',
            }}>
              <img
                src="assets/portrait.jpg"
                alt="Chris Gilbertson, founder of Settled Books"
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  objectPosition: 'center 20%',
                  display: 'block',
                  filter: 'saturate(0.92) contrast(0.98)',
                }}
              />
            </div>
            <div className="sb-caption" style={{ marginTop: 16 }}>
              Chris Gilbertson · Founder
            </div>
            <div className="sb-mono" style={{ fontSize: 13, color: 'var(--sb-taupe)', marginTop: 4 }}>
              Montgomery County, TX
            </div>
          </div>

          {/* Bio */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <p className="sb-body-lg" style={{ color: 'var(--sb-ink)', fontWeight: 400 }}>
              I started Settled Books in 2021 to do small-business bookkeeping the way I think it should be done — quietly, accurately, and with someone who actually knows your business on the other end of the email.
            </p>
            <p className="sb-body">
              Before this, I spent six years at New York Life — first as an agent, then a registered representative, then a partner. That work taught me what financial services should feel like for a small-business owner: clear, calm, and built on a relationship that lasts.
            </p>
            <p className="sb-body">
              Before that, I served in the Marine Corps. I bring the same approach here: show up on time, do the work, don't overpromise, finish what you start.
            </p>
            <p className="sb-body">
              The practice is solo by design. I'd rather work with a smaller number of clients I know well than scale into a team and lose the part of the work that matters most — being someone you can actually call.
            </p>
          </div>
        </div>
      </Section>

      {/* Facts strip */}
      <Section tone="bone">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 0,
          borderTop: '1px solid var(--sb-stone)',
          borderBottom: '1px solid var(--sb-stone)',
        }}>
          {[
            { k: 'Founded', v: '2021' },
            { k: 'Practice size', v: 'Solo' },
            { k: 'Based in', v: 'Montgomery County, TX' },
            { k: 'Service model', v: 'Remote-first' },
            { k: 'Ownership', v: 'Veteran-owned' },
          ].map((f, i, arr) => (
            <div key={f.k} style={{
              padding: '28px 24px',
              borderRight: i < arr.length - 1 ? '1px solid var(--sb-stone)' : 'none',
            }}>
              <div className="sb-caption" style={{ marginBottom: 10 }}>{f.k}</div>
              <div style={{ fontFamily: 'var(--sb-font-sans)', fontSize: 18, fontWeight: 500, color: 'var(--sb-ink)', letterSpacing: '-0.015em' }}>
                {f.v}
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* How I work */}
      <Section tone="linen">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 56 }}>
          <div>
            <Eyebrow>How I work</Eyebrow>
            <h2 className="sb-h1" style={{ marginTop: 18, maxWidth: 460 }}>
              Steady hands. No surprises.
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {[
              ['Direct contact', 'You email me. I email you back. No tickets, no portals to log into for routine questions.'],
              ['Plain language', 'Monthly close notes are written in English, not accountant. If a number matters, I tell you why.'],
              ['Small client list', 'I cap the practice intentionally. If I take you on, I have the bandwidth to do the work properly.'],
              ['Honest about fit', 'If your situation needs more than I offer, I\'ll tell you — and often introduce you to someone who fits better.'],
            ].map(([h, b], i) => (
              <div key={h} style={{ padding: '22px 0', borderTop: '1px solid var(--sb-stone)', borderBottom: i === 3 ? '1px solid var(--sb-stone)' : 'none' }}>
                <div style={{ fontFamily: 'var(--sb-font-sans)', fontSize: 17, fontWeight: 500, color: 'var(--sb-ink)', letterSpacing: '-0.015em', marginBottom: 6 }}>{h}</div>
                <div className="sb-body" style={{ fontSize: 15 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      <Section tone="cream">
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
          <h2 className="sb-h2">Want to talk?</h2>
          <p className="sb-body" style={{ marginTop: 16, marginBottom: 28 }}>
            A 30-minute call is enough to know if we're a fit. No commitment.
          </p>
          <Btn variant="primary" as="a" href={window.BOOKINGS_URL} target="_blank" rel="noopener noreferrer">Schedule a consultation</Btn>
        </div>
      </Section>
    </div>
  );
}

window.AboutPage = AboutPage;