// Manifesto — full editorial treatment of the 10 core philosophies.
// On home: shows 6 principles (compact). On about: shows all 10.

const PRINCIPLES = [
  ['01', 'Purpose over profit',         'Profit is a byproduct. We exist to solve problems that matter — to people, businesses, and society.'],
  ['02', 'Build only what should exist', 'We do not glorify building. If a solution exists, we adopt it. We create only when we can do it meaningfully better.'],
  ['03', 'Customer ≠ cost. Team ≠ cost.', 'We do not trade off between stakeholders. We design systems where customers win and teams thrive — simultaneously.'],
  ['04', 'Speed through clarity, not chaos', 'We move fast not by rushing, but by thinking better. Our goal is to solve problems before they become obvious.'],
  ['05', 'Small teams, deep ownership', 'We stay intentionally small — or structured like small companies. Every leader builds their team like their own venture.'],
  ['06', "Builder's integrity",         "We don't just point out problems — we bring solutions. Execution matters more than opinion."],
  ['07', 'Human-centric by default',    'We respect all individuals — across cultures, backgrounds, and beliefs. No compromise on dignity, ever.'],
  ['08', 'Craft over cheap',            'We build premium products and services. We do not compete by being cheaper — we compete by being better.'],
  ['09', 'Adaptive by design',          "If something doesn't work, we pivot. The ego never outweighs evidence."],
  ['10', 'Open where possible',         'If something can benefit the larger ecosystem, we open-source it. We grow by contributing — not hoarding.'],
];

function Manifesto({ compact = false }) {
  const wrap = { padding: '120px clamp(20px,4vw,48px)', maxWidth: 1280, margin: '0 auto', borderTop: '1px solid var(--bc-border-subtle)' };

  // Header — single column, centered visual weight. Avoids large empty left rail.
  const headWrap = { marginBottom: 64, paddingBottom: 56, borderBottom: '1px solid var(--bc-border-subtle)' };
  const eb = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500, marginBottom: 28 };
  const h = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(40px,5.5vw,80px)', lineHeight: 1.05, letterSpacing: '-0.03em', color: 'var(--bc-fg-primary)', textWrap: 'balance', maxWidth: 1080 };
  const sub = { fontFamily: 'var(--bc-font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 22, lineHeight: 1.4, color: 'var(--bc-fg-secondary)', maxWidth: 720, marginTop: 28 };

  const list = compact ? PRINCIPLES.slice(0, 6) : PRINCIPLES;

  // 2-column grid; even count guaranteed (6 or 10) so it never looks lopsided.
  const grid = { display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 0, borderTop: '1px solid var(--bc-border-default)' };
  const item = (i) => ({
    padding: '36px 32px 36px 0',
    borderBottom: '1px solid var(--bc-border-subtle)',
    paddingLeft: i % 2 === 1 ? 32 : 0,
    borderLeft: i % 2 === 1 ? '1px solid var(--bc-border-subtle)' : 'none',
    display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20,
  });
  const num = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--bc-selvedge)', fontWeight: 500, paddingTop: 6 };
  const t = { fontFamily: 'var(--bc-font-display)', fontSize: 26, fontWeight: 400, letterSpacing: '-0.02em', color: 'var(--bc-fg-primary)', marginBottom: 10, lineHeight: 1.15 };
  const d = { fontFamily: 'var(--bc-font-sans)', fontSize: 15, lineHeight: 1.6, color: 'var(--bc-fg-secondary)', maxWidth: 460 };

  return (
    <section style={wrap} data-screen-label="04 Manifesto">
      <div style={headWrap}>
        <div style={eb}>§ 02 — Manifesto · The principles we hold to</div>
        <h2 style={h}>What we hold to, even when nobody's watching.</h2>
        <p style={sub}>
          {compact ? 'Six of ten principles. The full manifesto reads on the About page.' : 'Ten principles. Read once a quarter. Argued over more than that.'}
        </p>
      </div>
      <div style={grid}>
        {list.map(([n, ttl, desc], i) => (
          <div key={n} style={item(i)}>
            <div style={num}>{n}</div>
            <div>
              <h3 style={t}>{ttl}</h3>
              <p style={d}>{desc}</p>
            </div>
          </div>
        ))}
      </div>
      {compact && (
        <div style={{ paddingTop: 32, fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-tertiary)' }}>
          — four more principles in the full manifesto —
        </div>
      )}
    </section>
  );
}

window.Manifesto = Manifesto;