// HomePage.jsx — DirectCFO home page composition
// Sections: Hero, Who it's for, What we do, How it works, About brief, CTA close

// ────────────────────────────────────────────────────────────────────────────
// Hero — dark, typography-driven
// ────────────────────────────────────────────────────────────────────────────
function HomeHero({ onCTA }) {
  return (
    <section style={{ background: T.ink, color: T.white, position: 'relative' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '120px 32px 120px',
      }}>
        <div style={{ marginBottom: 56 }}>
          <WordmarkInline size={80} onDark />
          <div style={{
            height: 1, background: T.border_d, marginTop: 32,
          }} />
        </div>

        <Eyebrow style={{ color: T.gold }}>Fractional CFO · Remote-first</Eyebrow>

        <h1 style={{
          fontFamily: F.display, fontWeight: 500,
          fontSize: 'clamp(52px, 7.2vw, 96px)',
          letterSpacing: '-0.035em', lineHeight: 0.98,
          margin: '32px 0 40px',
          maxWidth: 1040, textWrap: 'balance',
        }}>
          The financial leadership your<br />
          business needs.<span style={{ color: T.gold }}> Without</span><br />
          the full-time hire.
        </h1>

        <p style={{
          fontFamily: F.body, fontSize: 22, fontWeight: 400,
          lineHeight: 1.45, color: T.mute,
          margin: '0 0 56px', maxWidth: 640,
        }}>
          DirectCFO gives founders running $2M–$20M businesses the strategic finance
          seat a full-time CFO fills — priced for the portion of the year you actually need it.
        </p>

        <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="accent" onClick={onCTA}>Book a free financial review →</Button>
          <div style={{
            fontFamily: F.mono, fontSize: 13, color: T.mute,
            letterSpacing: '0.12em', textTransform: 'uppercase',
          }}>
            30 min · no pitch
          </div>
        </div>
      </div>

      {/* Meta strip at the bottom of the hero — quiet institutional signal */}
      <div style={{ borderTop: `1px solid ${T.border_d}` }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto', padding: '0 32px',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        }}>
          {[
            ['Revenue range',   '$2M – $20M'],
            ['Service model',   'Remote · primarily Texas'],
            ['Engagement',      'Fractional · monthly'],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: '24px 24px 24px 0',
              borderRight: i < 2 ? `1px solid ${T.border_d}` : 'none',
              paddingLeft: i === 0 ? 0 : 24,
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: T.slate,
              }}>{k}</div>
              <div style={{
                fontFamily: F.mono, fontSize: 14, color: T.white,
                marginTop: 8, letterSpacing: '0.02em',
              }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Who it's for — light surface, three blocks
// ────────────────────────────────────────────────────────────────────────────
function WhoItsFor() {
  const blocks = [
    {
      num: '01',
      title: 'Past the startup phase.',
      body: 'You are generating $2M to $20M in revenue. The spreadsheet that got you here is no longer the one that takes you further.',
    },
    {
      num: '02',
      title: 'Cash in, clarity missing.',
      body: 'The business is making money. What it is not telling you: where the margin is, what to cut, and how much runway you really have.',
    },
    {
      num: '03',
      title: 'CFO thinking, not CFO payroll.',
      body: 'You need the strategic lens of a finance chief. You do not need — or want — a $275K line item to get it.',
    },
  ];

  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 2fr',
          gap: 80, alignItems: 'end', marginBottom: 72,
        }}>
          <div>
            <Eyebrow>01 — Who we work with</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 48, fontWeight: 500,
              letterSpacing: '-0.028em', lineHeight: 1.05,
              margin: '20px 0 0', color: T.ink,
            }}>
              Built for owners, not founders raising a Series A.
            </h2>
          </div>
          <p style={{
            fontFamily: F.body, fontSize: 18, lineHeight: 1.55,
            color: T.slate, margin: 0, maxWidth: 520,
          }}>
            We run the finance seat for a narrow kind of operator — the one who
            owns their business, knows their numbers at 30,000 feet, and is ready to fly lower.
          </p>
        </div>

        <div style={{ borderTop: `1px solid ${T.rule}` }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 0,
          }}>
            {blocks.map((b, i) => (
              <div key={b.num} style={{
                padding: '40px 40px 40px 0',
                paddingLeft: i === 0 ? 0 : 40,
                borderRight: i < 2 ? `1px solid ${T.rule}` : 'none',
              }}>
                <div style={{
                  fontFamily: F.mono, fontSize: 13, color: T.goldDeep,
                  letterSpacing: '0.18em', fontWeight: 500,
                }}>{b.num}</div>
                <h3 style={{
                  fontFamily: F.display, fontSize: 26, fontWeight: 600,
                  letterSpacing: '-0.018em', lineHeight: 1.2,
                  margin: '20px 0 16px', color: T.ink,
                }}>{b.title}</h3>
                <p style={{
                  fontFamily: F.body, fontSize: 16, lineHeight: 1.55,
                  color: T.slate, margin: 0,
                }}>{b.body}</p>
              </div>
            ))}
          </div>
        </div>

        <SectionSignature num="01" />
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// What we do — dark, three tiers
// ────────────────────────────────────────────────────────────────────────────
function WhatWeDo({ onSeeServices }) {
  const tiers = [
    {
      num: '01',
      tier: 'CFO Advisor',
      cadence: 'Monthly',
      headline: 'A finance chief on call.',
      body: 'Monthly working sessions. You send the questions; we send the answers, a variance narrative, and the decision framework. Right-sized for owners who mostly need a second pair of eyes.',
    },
    {
      num: '02',
      tier: 'CFO Partner',
      cadence: 'Bi-weekly',
      headline: 'Embedded in the cadence.',
      body: 'We sit in your leadership meeting, own the close, and maintain the cash model. Your management team gets real-time finance support without a permanent seat on payroll.',
    },
    {
      num: '03',
      tier: 'CFO Embedded',
      cadence: 'Weekly',
      headline: 'The seat, without the headcount.',
      body: 'Full CFO function. Board packs, fundraise support, banking relationships, team-building across the finance stack. The difference from a full-time CFO is the invoice, not the output.',
    },
  ];

  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: 72,
        }}>
          <div>
            <Eyebrow tone="mute">02 — What we do</Eyebrow>
            <h2 style={{
              fontFamily: F.display, fontSize: 48, fontWeight: 500,
              letterSpacing: '-0.028em', lineHeight: 1.05,
              margin: '20px 0 0',
            }}>
              Three ways to run the seat.
            </h2>
          </div>
          <p style={{
            fontFamily: F.body, fontSize: 18, lineHeight: 1.55,
            color: T.mute, margin: 0, maxWidth: 560,
          }}>
            Three engagement tiers, scoped to the pace your business moves at.
            We recommend one on the first call.
          </p>
        </div>

        <div style={{ borderTop: `1px solid ${T.border_d}` }}>
          {tiers.map((t) => (
            <TierRow key={t.num} {...t} />
          ))}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'flex-end',
          marginTop: 48,
        }}>
          <Button variant="ghost-on-ink" onClick={onSeeServices}>
            See full scope of services →
          </Button>
        </div>

        <SectionSignature num="02" dark />
      </div>
    </section>
  );
}

function TierRow({ num, tier, cadence, headline, body }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '64px 1.2fr 2fr',
        gap: 40, padding: '48px 0',
        borderBottom: `1px solid ${T.border_d}`,
        background: hover ? 'rgba(255,255,255,0.02)' : 'transparent',
        transition: 'background 120ms',
      }}
    >
      <div style={{
        fontFamily: F.mono, fontSize: 13, color: T.slate,
        letterSpacing: '0.18em', paddingTop: 10,
      }}>{num}</div>

      <div>
        <div style={{
          fontFamily: F.mono, fontSize: 12, fontWeight: 500,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: T.gold, marginBottom: 16,
        }}>{cadence}</div>
        <h3 style={{
          fontFamily: F.display, fontSize: 34, fontWeight: 600,
          letterSpacing: '-0.02em', lineHeight: 1.1,
          margin: 0, color: T.white,
        }}>{tier}</h3>
      </div>

      <div>
        <h4 style={{
          fontFamily: F.display, fontSize: 22, fontWeight: 500,
          letterSpacing: '-0.01em', lineHeight: 1.3,
          margin: '0 0 14px', color: T.white,
        }}>{headline}</h4>
        <p style={{
          fontFamily: F.body, fontSize: 16, lineHeight: 1.6,
          color: T.mute, margin: 0, maxWidth: 560,
        }}>{body}</p>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// How it works — light, three steps
// ────────────────────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      num: '01',
      title: 'Assess',
      body: 'A free financial review. We look at your books, your cash position, and what the leadership team is actually deciding. You leave the call with a memo, not a pitch.',
      detail: 'Week 1',
    },
    {
      num: '02',
      title: 'Engage',
      body: 'We scope a fixed-fee monthly engagement at the right tier. No hourly billing. No locked-in annual contract. Cancel with 30 days.',
      detail: 'Week 2',
    },
    {
      num: '03',
      title: 'Lead',
      body: 'We run the finance function at the cadence we agreed to — close, cash, board prep, banking — and keep you out of the weeds.',
      detail: 'Ongoing',
    },
  ];

  return (
    <section style={{ background: T.paper, color: T.ink }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px' }}>
        <div style={{ marginBottom: 72 }}>
          <Eyebrow>03 — How it works</Eyebrow>
          <h2 style={{
            fontFamily: F.display, fontSize: 48, fontWeight: 500,
            letterSpacing: '-0.028em', lineHeight: 1.05,
            margin: '20px 0 0', color: T.ink, maxWidth: 760,
          }}>
            Three steps. No sales funnel.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0, position: 'relative',
        }}>
          {/* Connecting rule */}
          <div style={{
            position: 'absolute', top: 36, left: 0, right: 0, height: 1,
            background: T.rule,
          }} />
          {steps.map((s, i) => (
            <div key={s.num} style={{
              position: 'relative',
              paddingRight: i < 2 ? 40 : 0,
            }}>
              {/* Step marker */}
              <div style={{
                width: 72, height: 72, borderRadius: 0,
                background: T.paper,
                border: `1px solid ${T.ink}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: F.mono, fontSize: 14, fontWeight: 500,
                color: T.ink, letterSpacing: '0.1em',
                position: 'relative', zIndex: 1,
              }}>
                {s.num}
              </div>
              <div style={{
                fontFamily: F.mono, fontSize: 12, color: T.goldDeep,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                marginTop: 28,
              }}>{s.detail}</div>
              <h3 style={{
                fontFamily: F.display, fontSize: 40, fontWeight: 500,
                letterSpacing: '-0.028em', lineHeight: 1.05,
                margin: '14px 0 18px', color: T.ink,
              }}>{s.title}</h3>
              <p style={{
                fontFamily: F.body, fontSize: 16, lineHeight: 1.6,
                color: T.slate, margin: 0, maxWidth: 340,
              }}>{s.body}</p>
            </div>
          ))}
        </div>

        <SectionSignature num="03" />
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// About brief — dark
// ────────────────────────────────────────────────────────────────────────────
function AboutBrief({ onAbout }) {
  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 1.4fr', gap: 96,
          alignItems: 'start',
        }}>
          <div>
            <Eyebrow tone="mute">04 — About</Eyebrow>
            <div style={{
              marginTop: 32,
              border: `1px solid ${T.border_d}`,
              background: T.graphite,
              padding: '28px 28px 24px',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 12, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: T.slate,
              }}>Principal</div>
              <div style={{
                fontFamily: F.display, fontSize: 28, fontWeight: 600,
                letterSpacing: '-0.018em',
                color: T.white, marginTop: 14, lineHeight: 1.15,
              }}>Chris Gilbertson</div>
              <div style={{
                fontFamily: F.body, fontSize: 15,
                color: T.mute, marginTop: 10, lineHeight: 1.5,
              }}>Founder, DirectCFO</div>

              <HairRule dark style={{ margin: '24px 0' }} />

              <dl style={{ margin: 0, display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
                <InfoRow k="Background" v="USMC · NYL partner" />
                <InfoRow k="Practice" v="G² Advisory Group" />
                <InfoRow k="Based" v="Montgomery County, TX" />
              </dl>
            </div>
          </div>

          <div>
            <h2 style={{
              fontFamily: F.display, fontSize: 48, fontWeight: 500,
              letterSpacing: '-0.028em', lineHeight: 1.1,
              margin: 0, color: T.white, textWrap: 'balance',
            }}>
              A career built around business-owner questions,
              scoped to the business in front of you.
            </h2>

            <div style={{ marginTop: 36, maxWidth: 620 }}>
              <p style={{
                fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
                color: T.mute, margin: '0 0 20px',
              }}>
                Chris Gilbertson served in the Marine Corps, then spent six years at
                New York Life — agent, registered representative, partner — earning full
                FINRA credentials. His favorite clients were always the business owners;
                the questions were harder and the stakes more direct. He founded the
                practice in 2021. DirectCFO is what that became.
              </p>
              <p style={{
                fontFamily: F.body, fontSize: 18, lineHeight: 1.6,
                color: T.mute, margin: 0,
              }}>
                DirectCFO is a service of G² Advisory Group LLC and works with a deliberately
                small book of clients. Every engagement is run by the principal. No handoffs.
              </p>
            </div>

            <div style={{ marginTop: 40 }}>
              <Button variant="ghost-on-ink" onClick={onAbout}>
                Read the full story →
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function InfoRow({ k, v }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '110px 1fr', gap: 16, alignItems: 'baseline',
    }}>
      <div style={{
        fontFamily: F.mono, fontSize: 12, fontWeight: 500,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: T.slate,
      }}>{k}</div>
      <div style={{
        fontFamily: F.mono, fontSize: 14,
        color: T.white, letterSpacing: '0.02em',
      }}>{v}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// CTA close — full-width Ink
// ────────────────────────────────────────────────────────────────────────────
function CTAClose({ onCTA }) {
  return (
    <section style={{
      background: T.ink, color: T.white,
      borderTop: `1px solid ${T.border_d}`,
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '140px 32px 140px',
        display: 'grid', gridTemplateColumns: '1.6fr 1fr',
        gap: 80, alignItems: 'end',
      }}>
        <div>
          <Eyebrow style={{ color: T.gold }}>Start here</Eyebrow>
          <h2 style={{
            fontFamily: F.display, fontWeight: 500,
            fontSize: 'clamp(48px, 6.4vw, 84px)',
            letterSpacing: '-0.032em', lineHeight: 0.98,
            margin: '28px 0 0', textWrap: 'balance',
          }}>
            Thirty minutes.<br />
            One honest read<br />
            of your<span style={{ color: T.gold }}> finances.</span>
          </h2>
        </div>

        <div>
          <p style={{
            fontFamily: F.body, fontSize: 18, lineHeight: 1.55,
            color: T.mute, margin: '0 0 32px', maxWidth: 420,
          }}>
            Book a free financial review. We will tell you what we see, what we would do,
            and whether you need us. No pitch deck.
          </p>
          <Button variant="accent" onClick={onCTA}>
            Book a free financial review →
          </Button>
          <div style={{
            marginTop: 20,
            fontFamily: F.mono, fontSize: 12, color: T.slate,
            letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            chris@directcfoadvisory.com
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Full Home composition
// ────────────────────────────────────────────────────────────────────────────
function HomePage({ onNavigate = () => {} }) {
  return (
    <main data-screen-label="Home">
      <HomeHero onCTA={openBookings} />
      <WhoItsFor />
      <WhatWeDo onSeeServices={() => onNavigate('Services')} />
      <HowItWorks />
      <AboutBrief onAbout={() => onNavigate('About')} />
      <CTAClose onCTA={openBookings} />
    </main>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Section signature — quiet brand stamp at the end of major sections
// ────────────────────────────────────────────────────────────────────────────
function SectionSignature({ num, dark = false }) {
  const ruleColor = dark ? T.border_d : T.rule;
  const numColor = dark ? T.slate : T.slate;
  return (
    <div style={{
      marginTop: 72, paddingTop: 24,
      borderTop: `1px solid ${ruleColor}`,
      display: 'flex', justifyContent: 'flex-end',
      alignItems: 'baseline', gap: 16,
    }}>
      <div style={{
        fontFamily: F.mono, fontSize: 12, color: numColor,
        letterSpacing: '0.18em', fontWeight: 500,
      }}>{num}</div>
      <WordmarkInline size={24} onDark={dark} />
    </div>
  );
}

Object.assign(window, {
  HomePage, HomeHero, WhoItsFor, WhatWeDo, HowItWorks, AboutBrief, CTAClose, TierRow, InfoRow, SectionSignature,
});