// Introduction — three labeled paragraphs (Background / What sets me apart / Goal)
function Intro() {
  const layers = [
  'Banking & capital',
  'Revenue & billing',
  'Spend management',
  'Payroll',
  'The ledger',
  'Close & reconciliation',
  'FP&A'];

  return (
    <section id="about" style={{ padding: '96px 32px', borderBottom: '1px solid var(--line-2)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <h2 style={headingStyle}>About me.</h2>

        <div className="about-grid" style={{
          marginTop: 56,
          display: 'grid',
          gridTemplateColumns: '220px 1fr',
          gap: 64,
          alignItems: 'start'
        }}>
          <Portrait />

          <div style={{ maxWidth: 680, fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            <p style={{ margin: 0 }}>
              Over the past two decades, I’ve worn a few hats: investment
              banker, P&L owner, and startup finance leader. I’ve built
              financial models supporting $1.8B of deal financing at Merrill
              Lynch, owned an $80M product line at AT&T, and served as the
              senior finance hire at a venture-backed SaaS startup, where I
              helped raise over $30M and built the financial infrastructure
              from the ground up.
            </p>
            <p style={{ margin: '24px 0 0' }}>
              With a background spanning capital markets, P&L ownership, and
              operational finance, I’ve stood up entire finance functions, run
              due diligence from both the buy and sell side, and worked in the
              trenches as an operator. As a builder fluent in the modern
              finance stack, I know which tools belong at each layer, how they
              connect, and how to stand the whole thing up from scratch.
            </p>
            <p style={{ margin: '24px 0 0' }}>
              If there’s one thing I’ve learned through it all, it’s that
              finance at a startup is either a decisioning engine or a tax.
              Done right, it’s where founders and investors go for clear
              answers on pricing, hiring, runway, and capital. Done wrong,
              it’s a black box that slows everyone down (and stresses
              everyone out).
            </p>
            <p style={{ margin: '24px 0 0' }}>That’s why I’ve productized my services with fixed-scope offerings designed to give founders the tools they actually need, without the cost of a full-time hire or the drift of an open-ended retainer.




            </p>
          </div>
        </div>
      </div>
    </section>);

}

const emStyle = {
  fontWeight: 600,
  color: 'var(--ink)'
};

function Block({ label, children }) {
  return (
    <div>
      <div className="mono" style={{
        fontSize: 11, color: 'var(--ink-3)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
        marginBottom: 10
      }}>
        {label}
      </div>
      <p style={{
        margin: 0, fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)'
      }}>
        {children}
      </p>
    </div>);

}

function StackLayers({ items }) {
  return (
    <div style={{
      marginTop: 18,
      border: '1px solid var(--line)', borderRadius: 8,
      background: 'var(--paper)',
      overflow: 'hidden'
    }}>
      {items.map((label, i) =>
      <div key={i} style={{
        padding: '10px 16px',
        borderTop: i > 0 ? '1px solid var(--line-2)' : 'none',
        fontSize: 14
      }}>
          <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{label}</span>
        </div>
      )}
      <a href="#resources" style={{
        display: 'block',
        padding: '10px 16px',
        borderTop: '1px solid var(--line-2)',
        fontSize: 13, color: 'var(--ink-2)',
        background: 'var(--bg-alt)'
      }}>
        See how I configure the stack →
      </a>
    </div>);

}

function Portrait() {
  return (
    <div style={{
      width: 220, height: 220,
      background: 'var(--bg-alt)',
      border: '2px solid var(--ink)',
      borderRadius: '50%',
      overflow: 'hidden',
      backgroundImage: 'url(assets/portrait.jpeg)',
      backgroundSize: 'cover',
      backgroundPosition: 'center 18%'
    }} />);

}

const headingStyle = {
  fontFamily: "'Instrument Serif', serif",
  fontWeight: 400,
  fontSize: 'clamp(36px, 4.4vw, 56px)',
  lineHeight: 1.05,
  letterSpacing: '-0.02em',
  margin: '8px 0 0',
  color: 'var(--ink)',
  maxWidth: 820
};

function SectionLabel({ children }) {
  return (
    <div className="mono" style={{
      fontSize: 12, color: 'var(--ink-3)',
      letterSpacing: '0.08em', textTransform: 'uppercase'
    }}>
      {children}
    </div>);

}

window.Intro = Intro;
window.SectionLabel = SectionLabel;
window.sectionHeadingStyle = headingStyle;