// Resources / a peek at the stack — reframed for Christian's offering
function Resources({ onBook }) {
  return (
    <section id="resources" style={{ padding: '96px 32px', borderBottom: '1px solid var(--line-2)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <h2 style={window.sectionHeadingStyle}>An opinionated, AI-native stack.</h2>
        <p style={{
          marginTop: 16, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6
        }}>I build a stack fitted to the company you have and the one you're building. Inside thirty days: cleaner books, a tighter close, reports worth reading.



        </p>

        <div className="resources-grid" style={{
          marginTop: 56,
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 24,
          alignItems: 'stretch'
        }}>
          <StackPreview />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <ResourceLink title="Stack A · Puzzle-centered" sub="Default for pre-seed to Series A, US-only, under 25 people, Stripe-based revenue." />
            <ResourceLink title="Stack B · Campfire-centered" sub="Multi-entity, multi-currency. Typically a better fit for Series B+." />

            <button onClick={onBook} style={{
              marginTop: 'auto',
              background: 'var(--ink)', color: 'var(--paper)',
              border: 'none', borderRadius: 999,
              padding: '14px 22px', fontSize: 15, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between'
            }}>
              Book a 30-min intro
              <span>→</span>
            </button>
          </div>
        </div>
      </div>
    </section>);

}

function ResourceLink({ title, sub }) {
  return (
    <div style={{
      padding: '20px 18px',
      border: '1px solid var(--line)', borderRadius: 8,
      background: 'var(--paper)'
    }}>
      <div className="mono" style={{
        fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: 'var(--ink-3)', marginBottom: 8
      }}>
        Illustrative
      </div>
      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}
      dangerouslySetInnerHTML={{ __html: title }} />
      <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.45, marginTop: 2 }}
      dangerouslySetInnerHTML={{ __html: sub }} />
    </div>);

}

// Seven-layer stack diagram
function StackPreview() {
  const layers = [
  { name: 'Decisioning', a: 'Christian + memos', b: 'Christian + memos' },
  { name: 'Reporting & dash', a: 'Mosaic-lite / sheets', b: 'Mosaic / Cube' },
  { name: 'Forecasting', a: 'Custom model', b: 'Custom + Cube' },
  { name: 'Ledger / close', a: 'Puzzle', b: 'Campfire' },
  { name: 'Spend', a: 'Brex / Ramp', b: 'Ramp' },
  { name: 'Revenue', a: 'Stripe', b: 'Stripe + Ironclad' },
  { name: 'Banking & payroll', a: 'Mercury · Gusto', b: 'Mercury · Rippling' }];

  return (
    <div style={{
      border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden',
      background: 'var(--paper)',
      display: 'flex', flexDirection: 'column'
    }}>
      <div className="stack-preview-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1.2fr 1fr 1fr',
        fontSize: 12
      }}>
        {['Layer', 'Stack A · Puzzle', 'Stack B · Campfire'].map((h, i) =>
        <div key={i} className="mono" style={{
          padding: '10px 14px',
          background: 'var(--bg-alt)',
          color: 'var(--ink-3)',
          letterSpacing: '0.06em', textTransform: 'uppercase',
          fontSize: 11,
          borderBottom: '1px solid var(--line-2)',
          borderRight: i < 2 ? '1px solid var(--line-2)' : 'none'
        }}>{h}</div>
        )}
        {layers.map((row, ri) =>
        <React.Fragment key={ri}>
            <div style={{
            padding: '12px 14px', fontSize: 14, color: 'var(--ink)',
            borderBottom: ri < layers.length - 1 ? '1px solid var(--line-2)' : 'none',
            borderRight: '1px solid var(--line-2)',
            fontWeight: 500
          }}>{row.name}</div>
            <div style={{
            padding: '12px 14px', fontSize: 13, color: 'var(--ink-2)',
            borderBottom: ri < layers.length - 1 ? '1px solid var(--line-2)' : 'none',
            borderRight: '1px solid var(--line-2)'
          }}>{row.a}</div>
            <div style={{
            padding: '12px 14px', fontSize: 13, color: 'var(--ink-2)',
            borderBottom: ri < layers.length - 1 ? '1px solid var(--line-2)' : 'none'
          }}>{row.b}</div>
          </React.Fragment>
        )}
      </div>
      <div style={{
        marginTop: 'auto', padding: '10px 14px', borderTop: '1px solid var(--line-2)',
        background: 'var(--bg)',
        display: 'flex', justifyContent: 'flex-end',
        fontSize: 12, color: 'var(--ink-3)'
      }}>
        <span className="mono">Target close: 3 to 5 days</span>
      </div>
    </div>);

}

function Dot({ c }) {return <div style={{ width: 10, height: 10, borderRadius: 999, background: c }} />;}
function Chip({ children }) {
  return <span style={{
    fontSize: 12, padding: '3px 10px', borderRadius: 4,
    border: '1px solid var(--line)', color: 'var(--ink-2)',
    background: 'var(--paper)'
  }}>{children}</span>;
}

window.Resources = Resources;