// Beliefs.jsx — Core beliefs as declarative pull quotes
function Beliefs({ darkBg = 'forest' }) {
  const bg = darkBg === 'deep' ? 'var(--aq-deep)' : 'var(--aq-forest)';
  const beliefs = [
    {
      label: 'Belief 01',
      t: 'Capability over product.',
      b: 'AI is an organizational skill to be developed — not just a tool to be bought. The spend follows the capability, not the other way around.',
    },
    {
      label: 'Belief 02',
      t: 'The human factor.',
      b: 'AI failures happen when the human side is an afterthought. Most of the hard work is social, not technical.',
    },
    {
      label: 'Belief 03',
      t: 'Honest limits.',
      b: 'Naming AI\'s constraints and risks transparently is required for trust. We tell leaders what AI can\'t do as readily as what it can.',
    },
    {
      label: 'Belief 04',
      t: 'Co-design.',
      b: 'Only co-built solutions actually stick. If your team didn\'t help design it, they won\'t defend it when it breaks.',
    },
  ];
  return (
    <section className="aq-on-dark" style={{
      background: bg, padding: '128px 40px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96,
          alignItems: 'start', marginBottom: 72,
        }}>
          <div>
            <div className="aq-eyebrow" style={{ color: 'var(--aq-teal)', marginBottom: 20 }}>
              Core beliefs
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 48,
              lineHeight: 1.1, color: 'var(--aq-parchment)',
              letterSpacing: '-0.01em', margin: 0,
            }}>
              Four things we <em>won't</em> compromise on.
            </h2>
          </div>
          <p style={{
            fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 17,
            lineHeight: 1.6, color: 'var(--aq-sage)', margin: 0,
            paddingTop: 24, borderTop: '1px solid rgba(216,228,220,.18)',
          }}>
            These aren't positioning statements. They're the beliefs that decide whether we take an engagement, how we scope it, and when we tell a client something they don't want to hear.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
          borderTop: '1px solid rgba(216,228,220,.18)',
          borderLeft: '1px solid rgba(216,228,220,.18)',
        }}>
          {beliefs.map((b) => (
            <div key={b.label} style={{
              padding: '48px 40px 56px',
              borderRight: '1px solid rgba(216,228,220,.18)',
              borderBottom: '1px solid rgba(216,228,220,.18)',
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div className="aq-eyebrow" style={{ color: 'var(--aq-teal)' }}>
                {b.label}
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
                fontSize: 34, lineHeight: 1.2,
                color: 'var(--aq-parchment)', letterSpacing: '-0.005em',
                maxWidth: 22 + 'ch',
              }}>{b.t}</div>
              <p style={{
                fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 15,
                lineHeight: 1.6, color: 'var(--aq-sage)', margin: 0,
                maxWidth: 44 + 'ch',
              }}>{b.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Beliefs = Beliefs;