// AboutPage.jsx — DirectCFO about page
// Sections: Header, Principal (Chris), Philosophy, Timeline, Practice notes, CTA

function AboutHeader() {
  return (
    <section style={{ background: T.ink, color: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px 120px' }}>
        <div style={{ marginBottom: 48 }}>
          <WordmarkInline size={56} onDark />
          <div style={{
            height: 1, background: T.border_d, marginTop: 24,
          }} />
        </div>
        <Eyebrow tone="mute">About</Eyebrow>
        <h1 style={{
          fontFamily: F.display, fontWeight: 500,
          fontSize: 'clamp(56px, 7vw, 96px)',
          letterSpacing: '-0.035em', lineHeight: 0.98,
          margin: '32px 0 40px', maxWidth: 1100, textWrap: 'balance',
        }}>
          One seat.<br/>
          One principal.<br/>
          <span style={{ color: T.gold }}>Answer the question.</span>
        </h1>
        <p style={{
          fontFamily: F.body, fontSize: 22, lineHeight: 1.45,
          color: T.mute, margin: 0, maxWidth: 760,
        }}>
          DirectCFO is run by Chris Gilbertson. He takes the call, reads the books, writes the memo,
          and shows up on Tuesday. If you hire the firm, you hire him.
        </p>
      </div>
    </section>
  );
}

function Principal() {
  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80,
          alignItems: 'start',
        }}>
          {/* Portrait — real photograph of the principal */}
          <div>
            <Eyebrow>Principal</Eyebrow>
            <figure style={{
              margin: '20px 0 0',
              border: `1px solid ${T.rule}`,
              background: T.paperDim,
              position: 'relative',
            }}>
              <img
                src="assets/chris-portrait.jpg"
                alt="Chris Gilbertson, founder of DirectCFO"
                style={{
                  display: 'block', width: '100%',
                  aspectRatio: '4 / 5', objectFit: 'cover',
                  filter: 'grayscale(1) contrast(1.02)',
                }}
              />
              <figcaption style={{
                padding: '16px 18px',
                borderTop: `1px solid ${T.rule}`,
                background: T.white,
              }}>
                <div style={{
                  fontFamily: F.display, fontSize: 22, fontWeight: 600,
                  letterSpacing: '-0.015em', color: T.ink, lineHeight: 1.1,
                }}>Chris Gilbertson</div>
                <div style={{
                  fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: T.goldDeep, marginTop: 8,
                }}>Founder · DirectCFO</div>
              </figcaption>
            </figure>
          </div>

          {/* Bio */}
          <div>
            <div style={{
              fontFamily: F.mono, fontSize: 12, fontWeight: 500,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: T.slate,
            }}>Biography</div>
            <h2 style={{
              fontFamily: F.display, fontSize: 42, fontWeight: 500,
              letterSpacing: '-0.025em', lineHeight: 1.1,
              margin: '20px 0 32px', color: T.ink, maxWidth: 760,
              textWrap: 'balance',
            }}>
              First business at fourteen. He has been running the numbers ever since.
            </h2>

            <div style={{ maxWidth: 680 }}>
              <p style={{
                fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
                color: T.ink, margin: '0 0 20px',
              }}>
                Chris served in the Marine Corps, then spent six years at New York Life —
                agent, registered representative, partner. He earned full FINRA credentials.
                The firm taught him how capital structure, regulation, and risk actually fit together.
              </p>
              <p style={{
                fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
                color: T.slate, margin: '0 0 20px',
              }}>
                His favorite clients were never the ones with the most money. They were the ones
                running businesses. The questions were harder. The stakes were more direct. The
                answers changed what happened next.
              </p>
              <p style={{
                fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
                color: T.slate, margin: '0 0 20px',
              }}>
                He founded Gilbertson Bookkeeping in 2021. Inside a year, the work had outgrown
                the name — owners were asking about cash flow, structure, deal terms, tax posture,
                how much the business could afford to pay them. Questions a bookkeeper is not
                supposed to answer. He answered them anyway.
              </p>
              <p style={{
                fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
                color: T.slate, margin: 0,
              }}>
                DirectCFO is what that became. One principal. A small client list. Every engagement
                run directly — no associates, no handoffs, no account manager between you and the work.
              </p>
            </div>

            <div style={{
              marginTop: 48, padding: '24px 0',
              borderTop: `1px solid ${T.rule}`, borderBottom: `1px solid ${T.rule}`,
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
            }}>
              {[
                ['First business', 'Age 14'],
                ['Marine Corps',   'Veteran'],
                ['New York Life',  '6 years'],
                ['FINRA',          'Series 6 · 7 · 24 · 63 · 66'],
              ].map(([k, v]) => (
                <div key={k}>
                  <div style={{
                    fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: T.slate,
                  }}>{k}</div>
                  <div style={{
                    fontFamily: F.display, fontSize: 24, fontWeight: 500,
                    letterSpacing: '-0.018em', color: T.ink,
                    marginTop: 10, lineHeight: 1.1,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Philosophy() {
  const tenets = [
    {
      num: '01',
      title: 'Decisions before analysis.',
      body: 'The memo leads with what to do. The exhibits sit behind it. Not the reverse.',
    },
    {
      num: '02',
      title: 'Plain English, always.',
      body: 'If a line item cannot be explained to the whole leadership team, it is not yet ready to present.',
    },
    {
      num: '03',
      title: 'Fixed fee, no meter.',
      body: 'Hourly billing punishes the clients with the messiest numbers. We price the engagement, not the clock.',
    },
    {
      num: '04',
      title: 'Named seat, every time.',
      body: 'You hire Chris. He does the work. There is no delegation, no "let me loop in my associate."',
    },
  ];

  return (
    <section style={{ background: T.ink, color: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 2fr',
          gap: 80, alignItems: 'end', marginBottom: 56,
        }}>
          <div>
            <Eyebrow tone="mute">How we work</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 48, fontWeight: 500,
              letterSpacing: '-0.028em', lineHeight: 1.05,
              margin: '20px 0 0', color: T.white,
            }}>Four rules of the practice.</h2>
          </div>
          <p style={{
            fontFamily: F.body, fontSize: 18, lineHeight: 1.55,
            color: T.mute, margin: 0, maxWidth: 520,
          }}>
            These are not aspirations. They are the boundary conditions the firm
            runs inside — the things that do not change when a client pushes.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 0,
        }}>
          {tenets.map((t, i) => (
            <div key={t.num} style={{
              padding: '40px 40px 40px 0',
              paddingLeft: i % 2 === 0 ? 0 : 40,
              borderTop: `1px solid ${T.border_d}`,
              borderRight: i % 2 === 0 ? `1px solid ${T.border_d}` : 'none',
              borderBottom: i >= tenets.length - 2 ? `1px solid ${T.border_d}` : 'none',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 13, color: T.gold,
                letterSpacing: '0.18em', fontWeight: 500,
              }}>{t.num}</div>
              <h3 style={{
                fontFamily: F.display, fontSize: 28, fontWeight: 500,
                letterSpacing: '-0.018em', lineHeight: 1.15,
                margin: '20px 0 16px', color: T.white, textWrap: 'balance',
              }}>{t.title}</h3>
              <p style={{
                fontFamily: F.body, fontSize: 16, lineHeight: 1.6,
                color: T.mute, margin: 0, maxWidth: 460,
              }}>{t.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Timeline() {
  const rows = [
    { year: 'Age 14', label: 'First business', note: 'Ran the numbers himself. Nothing has changed.' },
    { year: 'USMC',   label: 'United States Marine Corps', note: 'Service. The posture stayed.' },
    { year: 'NYL',    label: 'New York Life — agent', note: 'Entered the firm as an agent. Learned the book.' },
    { year: 'NYL',    label: 'Registered representative', note: 'FINRA Series 6, 7, 24, 63, 66. Life & Health licensed.' },
    { year: 'NYL',    label: 'Partner', note: 'Six years in. Worked best with the business owners on the list.' },
    { year: '2021',   label: 'Gilbertson Bookkeeping founded', note: 'The practice that would become DirectCFO.' },
    { year: '2024',   label: 'DirectCFO launched', note: 'Dedicated fractional CFO practice. Small list. Named seat.' },
  ];

  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{ marginBottom: 56 }}>
          <Eyebrow>Track record</Eyebrow>
          <h2 style={{
            fontFamily: F.display, fontSize: 48, fontWeight: 500,
            letterSpacing: '-0.028em', lineHeight: 1.05,
            margin: '20px 0 0', color: T.ink, maxWidth: 800,
          }}>The sequence, in order.</h2>
        </div>

        <div style={{ borderTop: `1px solid ${T.rule}` }}>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '140px 1fr 2fr',
              gap: 40, padding: '28px 0',
              borderBottom: `1px solid ${T.rule}`,
              alignItems: 'baseline',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 14, fontWeight: 500,
                letterSpacing: '0.08em',
                color: i === rows.length - 1 ? T.goldDeep : T.slate,
                fontVariantNumeric: 'tabular-nums',
              }}>{r.year}</div>
              <h3 style={{
                fontFamily: F.display, fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.01em', lineHeight: 1.2,
                margin: 0, color: T.ink,
              }}>{r.label}</h3>
              <p style={{
                fontFamily: F.body, fontSize: 16, lineHeight: 1.55,
                color: T.slate, margin: 0,
              }}>{r.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PracticeNotes() {
  return (
    <section style={{ background: T.ink, color: T.white }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        }}>
          <div>
            <Eyebrow tone="mute">Off the clock</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 40, fontWeight: 500,
              letterSpacing: '-0.025em', lineHeight: 1.1,
              margin: '20px 0 32px', color: T.white,
            }}>He is building an airplane in the garage.</h2>
            <p style={{
              fontFamily: F.body, fontSize: 17, lineHeight: 1.6,
              color: T.mute, margin: '0 0 20px',
            }}>
              Chris is a licensed private pilot, instrument rated, currently building a Van's RV-8
              from a kit. He does not find this unusual. It is the same discipline as a close:
              one step at a time, every step documented, nothing skipped.
            </p>
            <p style={{
              fontFamily: F.body, fontSize: 17, lineHeight: 1.6,
              color: T.mute, margin: 0,
            }}>
              Most CFO work is closer to kit-building than to spreadsheet wizardry. That is the
              posture the firm brings.
            </p>
          </div>

          <div style={{
            background: T.graphite, border: `1px solid ${T.border_d}`,
            padding: '32px 32px',
          }}>
            <Eyebrow tone="mute">Credentials &amp; practice</Eyebrow>
            <dl style={{ margin: '24px 0 0', padding: 0 }}>
              {[
                ['FINRA',         'Series 6 · 7 · 24 · 63 · 66'],
                ['Insurance',     'Life &amp; Health licensed'],
                ['Service',       'USMC veteran'],
                ['Aviation',      'Private pilot · instrument rated'],
                ['Firm founded',  '2021 · Gilbertson Bookkeeping'],
                ['DirectCFO',     'Launched 2024'],
                ['Active seats',  'Kept deliberately small'],
                ['Subcontracting','None. Ever.'],
              ].map(([k, v], i, arr) => (
                <div key={k} style={{
                  display: 'grid', gridTemplateColumns: '140px 1fr',
                  padding: '14px 0',
                  borderBottom: i < arr.length - 1 ? `1px solid ${T.border_d}` : 'none',
                  alignItems: 'baseline',
                }}>
                  <dt style={{
                    fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                    color: T.slate,
                  }}>{k}</dt>
                  <dd
                    style={{
                      margin: 0,
                      fontFamily: F.mono, fontSize: 14, color: T.white,
                      letterSpacing: '0.02em',
                    }}
                    dangerouslySetInnerHTML={{ __html: v }}
                  />
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutCTA({ onCTA }) {
  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{
          borderTop: `1px solid ${T.rule}`, paddingTop: 72,
          display: 'grid', gridTemplateColumns: '1.4fr 1fr',
          gap: 80, alignItems: 'end',
        }}>
          <h2 style={{
            fontFamily: F.display, fontWeight: 500,
            fontSize: 'clamp(40px, 5vw, 60px)',
            letterSpacing: '-0.028em', lineHeight: 1.05,
            margin: 0, color: T.ink, maxWidth: 820, textWrap: 'balance',
          }}>
            If there is a seat open, Chris will say so. <span style={{ color: T.goldDeep }}>Then he will get to work.</span>
          </h2>
          <div>
            <Button variant="primary" onClick={onCTA}>Book a free financial review →</Button>
            <div style={{
              marginTop: 16,
              fontFamily: F.mono, fontSize: 12, color: T.slate,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>
              chris@directcfoadvisory.com
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutPage({ onNavigate = () => {} }) {
  return (
    <main data-screen-label="About">
      <AboutHeader />
      <Principal />
      <Philosophy />
      <Timeline />
      <PracticeNotes />
      <AboutCTA onCTA={openBookings} />
    </main>
  );
}

Object.assign(window, {
  AboutPage, AboutHeader, Principal, Philosophy, Timeline, PracticeNotes, AboutCTA,
});