// components/HomePage.jsx

function SectionSignature({ num }) {
  return (
    <div style={{
      marginTop: 64, paddingTop: 24,
      borderTop: '1px solid var(--sb-stone)',
      display: 'flex', justifyContent: 'flex-end',
      alignItems: 'baseline', gap: 16,
    }}>
      <div style={{
        fontFamily: 'var(--sb-font-mono)', fontSize: 12, color: 'var(--sb-taupe)',
        letterSpacing: '0.18em', fontWeight: 500,
      }}>{num}</div>
      <LogoBlock size={20} color="var(--sb-ink)" accent="var(--sb-amber)" />
    </div>
  );
}

function HomePage() {
  return (
    <div className="sb-page">
      {/* Hero */}
      <Section tone="linen" style={{ paddingBlock: 'clamp(48px, 8vw, 96px)' }}>
        <div style={{ marginBottom: 48 }}>
          <LogoBlock size={56} color="var(--sb-ink)" accent="var(--sb-amber)" />
          <div style={{ height: 1, background: 'var(--sb-stone)', marginTop: 28 }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 56, alignItems: 'center' }}>
          <div>
            <Eyebrow>Bookkeeping · Small business</Eyebrow>
            <h1 className="sb-display" style={{ marginTop: 22 }}>
              Your books, <span style={{ color: 'var(--sb-taupe)' }}>settled.</span>
            </h1>
            <p className="sb-body-lg" style={{ marginTop: 24, maxWidth: 480 }}>
              Reconciled monthly. Categorized correctly. Closed on time. So you can stop thinking about it and run your business.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <Btn variant="primary" as="a" href={window.BOOKINGS_URL} target="_blank" rel="noopener noreferrer">Schedule a consultation</Btn>
              <Btn variant="ghost" onClick={() => window.SBNav('/services')}>See services</Btn>
            </div>
          </div>

          {/* Monthly close panel */}
          <div className="sb-card" style={{
            padding: 28,
            boxShadow: '0 4px 12px rgba(42, 39, 36, 0.20), 0 36px 80px -12px rgba(42, 39, 36, 0.42)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
              <div className="sb-caption">March 2026</div>
              <div className="sb-caption" style={{ color: 'var(--sb-amber)' }}>● Closed</div>
            </div>
            {[
              ['Operating account', '$54,118.00'],
              ['Savings', '$22,400.00'],
              ['Credit card', '−$3,816.42'],
              ['Payroll', '$14,200.00'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid var(--sb-stone)' }}>
                <span style={{ color: 'var(--sb-ink-soft)', fontSize: 14 }}>{k}</span>
                <span style={{ fontFamily: 'var(--sb-font-mono)', color: 'var(--sb-ink)', fontWeight: 500, fontSize: 14 }}>{v}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 18 }}>
              <span style={{ color: 'var(--sb-ink)', fontWeight: 500, fontSize: 14 }}>Reconciled</span>
              <span style={{ fontFamily: 'var(--sb-font-mono)', color: 'var(--sb-ink)', fontWeight: 500, fontSize: 14 }}>to the penny</span>
            </div>
          </div>
        </div>
      </Section>

      {/* Promise — three pillars */}
      <Section tone="cream">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14, marginBottom: 64 }}>
          <Eyebrow>The promise</Eyebrow>
          <h2 className="sb-h1" style={{ maxWidth: 720 }}>
            Three things you stop worrying about.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 0, borderTop: '1px solid var(--sb-stone)' }}>
          {[
            { n: '01', t: 'Are my books right?', d: 'Bank and credit-card accounts reconciled to the penny each month. Transactions categorized to a chart of accounts that matches how you actually run the business.' },
            { n: '02', t: 'Do I know where I stand?', d: 'A short monthly note in plain language. Income, cash on hand, anything unusual. No jargon, no spreadsheet homework, no calls you have to schedule.' },
            { n: '03', t: 'Will my CPA be happy?', d: 'Books that hand off cleanly to your tax preparer at year-end. No frantic January reconstructions. No surprise adjustments.' },
          ].map((p, i) => (
            <div key={p.n} style={{
              padding: '40px 28px 32px',
              borderRight: i < 2 ? '1px solid var(--sb-stone)' : 'none',
              borderBottom: '1px solid var(--sb-stone)',
            }}>
              <div className="sb-caption" style={{ color: 'var(--sb-amber)', marginBottom: 18 }}>{p.n}</div>
              <h3 className="sb-h3" style={{ marginBottom: 14 }}>{p.t}</h3>
              <p className="sb-body" style={{ fontSize: 15 }}>{p.d}</p>
            </div>
          ))}
        </div>
        <SectionSignature num="01" />
      </Section>

      {/* How it works */}
      <Section tone="linen">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 64 }}>
          <div>
            <Eyebrow>How it works</Eyebrow>
            <h2 className="sb-h1" style={{ marginTop: 18, marginBottom: 24 }}>A quiet rhythm, every month.</h2>
            <p className="sb-body-lg" style={{ maxWidth: 460 }}>
              You connect your accounts once. After that, the cycle runs in the background. You only hear from us when there's a question worth asking — or a number worth knowing.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {[
              { w: 'Week 1', t: 'Transactions sync, get categorized.' },
              { w: 'Week 2', t: 'Open questions surface — flagged, not chased.' },
              { w: 'Week 3', t: 'Accounts reconciled. Books closed.' },
              { w: 'Week 4', t: 'Monthly note. Plain English. Two minutes to read.' },
            ].map((row, i) => (
              <div key={row.w} style={{
                display: 'grid',
                gridTemplateColumns: '110px 1fr',
                gap: 28,
                padding: '22px 0',
                borderTop: '1px solid var(--sb-stone)',
                borderBottom: i === 3 ? '1px solid var(--sb-stone)' : 'none',
                alignItems: 'baseline',
              }}>
                <div className="sb-caption">{row.w}</div>
                <div style={{ fontFamily: 'var(--sb-font-sans)', fontSize: 17, color: 'var(--sb-ink)', lineHeight: 1.45, letterSpacing: '-0.01em' }}>
                  {row.t}
                </div>
              </div>
            ))}
          </div>
        </div>
        <SectionSignature num="02" />
      </Section>

      {/* Who it's for */}
      <Section tone="bone">
        <div style={{ maxWidth: 760 }}>
          <Eyebrow>Who it's for</Eyebrow>
          <h2 className="sb-h1" style={{ marginTop: 18 }}>
            Owners who'd rather be doing something else.
          </h2>
          <p className="sb-body-lg" style={{ marginTop: 24 }}>
            We work with small businesses in the $500K–$3M range — service firms, contractors, professional practices, owner-led shops. You're past the point where bookkeeping fits in evenings, and not yet at a stage where a controller makes sense. That middle is where we live.
          </p>
        </div>
        <SectionSignature num="03" />
      </Section>

      {/* Sister-brand cross link */}
      <Section tone="ink">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 48, alignItems: 'center' }}>
          <div>
            <Eyebrow>Need more than bookkeeping?</Eyebrow>
            <h2 className="sb-h2" style={{ marginTop: 16, maxWidth: 480 }}>
              Pair Settled Books with fractional CFO support through our sister practice, DirectCFO.
            </h2>
            <p className="sb-body" style={{ marginTop: 20, maxWidth: 460 }}>
              Hybrid engagements combine clean monthly books with strategic finance — forecasting, cash planning, KPI reporting — under one relationship.
            </p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <a href="https://directcfoadvisory.com" target="_blank" rel="noopener noreferrer"
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 14,
                 padding: '20px 24px',
                 border: '1px solid rgba(251, 247, 241, 0.25)',
                 color: 'var(--sb-cream)',
                 transition: 'border-color .15s, background .15s',
                 background: 'transparent',
               }}
               onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--sb-amber-soft)'; }}
               onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(251, 247, 241, 0.25)'; }}>
              <div>
                <div className="sb-caption" style={{ color: 'var(--sb-amber-soft)', marginBottom: 6 }}>Sister practice</div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>DirectCFO Advisory</div>
                <div style={{ fontSize: 13, color: 'rgba(251, 247, 241, 0.55)', marginTop: 4 }}>directcfoadvisory.com</div>
              </div>
              <span style={{ fontSize: 24, color: 'var(--sb-amber-soft)' }}>↗</span>
            </a>
          </div>
        </div>
      </Section>

      {/* CTA */}
      <Section tone="cream">
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
          <Eyebrow>Ready to be done with this?</Eyebrow>
          <h2 className="sb-h1" style={{ marginTop: 18, marginBottom: 28 }}>
            One conversation. Then quiet books.
          </h2>
          <Btn variant="primary" as="a" href={window.BOOKINGS_URL} target="_blank" rel="noopener noreferrer">Schedule a consultation</Btn>
        </div>
      </Section>
    </div>
  );
}

window.HomePage = HomePage;