/* Audax OS site · Let's Build the OS page
   The invitation to co-create: organisation designers, AI builders,
   operators, and ecosystem actors helping shape the OS itself. */

const HERO_BUILD = 'assets/backgrounds/The_Gathering_httpss.mj.runLwdlSY4QCLA_abstract_horizontal_in_4a2611be-ea74-45f7-96c4-c3168455b410_3.png';

const BUILD_AUDIENCES = [
  {
    n: '01', name: 'Organisation Designers',
    q: 'Are you designing how humans work together?',
    who: 'People who design how teams, companies, networks, and institutions actually work — governance, roles, decision-making, culture, trust, facilitation, learning, power, and structure.',
    bring: ['team agreements', 'governance patterns', 'decision protocols', 'conflict pathways', 'culture diagnostics', 'trust infrastructure', 'organisational health maps'],
    invite: 'If you have spent years trying to make organisations more human, more adaptive, more honest, or more alive, Audax OS needs your scar tissue and your imagination.'
  },
  {
    n: '02', name: 'Agentic AI Builders',
    q: 'Are you building agents that need better organisations to live inside?',
    who: 'People building AI agents, agent platforms, AI-native tools, workflow automations, knowledge systems, and human-agent interfaces.',
    bring: ['agent role cards', 'permission profiles', 'agent-ready mission canvases', 'context packets', 'escalation rules', 'inter-agent handoff protocols', 'inspectable autonomy models'],
    invite: 'If you are building agents and keep finding that the hardest problem is not the model, but the messy organisation around it, you are exactly in the problem space of Audax OS.'
  },
  {
    n: '03', name: 'Collaboration Infrastructure Builders',
    q: 'Are you building the tools collective work now depends on?',
    who: 'People building tools for coordination, knowledge, governance, communication, contribution, and distributed work — the plumbing of collective intelligence.',
    bring: ['shared work ontologies', 'commitment ledgers', 'portable contributor profiles', 'open protocols', 'tool interoperability models', 'human-agent collaboration interfaces'],
    invite: 'If you are building the pipes, rooms, ledgers, maps, dashboards, agents, or rituals through which modern collaboration happens, Audax OS is an invitation to make the pieces speak to each other.'
  },
  {
    n: '04', name: 'Regenerative Practitioners',
    q: 'Are you working to make organisations more alive?',
    who: 'People working with living systems, teal and turquoise organisations, developmental culture, regenerative leadership, and ecological ways of organising.',
    bring: ['living systems principles', 'developmental pathways', 'relational rituals', 'regenerative diagnostics', 'purpose practices', 'consent and care protocols', 'culture and maturity maps'],
    invite: 'If your work sits at the edge of organisational design, human development, living systems, and regeneration, Audax OS needs your depth. Otherwise the future becomes a spreadsheet with wings.'
  },
  {
    n: '05', name: 'Future-of-Work Operators',
    q: 'Are you already living the problem?',
    who: 'People running distributed teams, AI-native startups, fractional organisations, communities, DAOs, venture studios, and ecosystem initiatives.',
    bring: ['real use cases', 'failure stories', 'adoption pathways', 'minimum viable protocols', 'practical diagnostics', 'operational constraints', 'what must stay simple'],
    invite: 'If you are already trying to run an organisation that does not fit the old model, Audax OS is a place to turn the pain into pattern.'
  },
  {
    n: '06', name: 'Governance Designers',
    q: 'Are you designing how decisions and accountability work?',
    who: 'People designing decision systems, consent processes, contribution models, DAO governance, legal structures, accountability systems, and agent permission models.',
    bring: ['governance frameworks', 'decision architectures', 'accountability models', 'permission systems', 'agent governance patterns', 'consent protocols'],
    invite: 'If you have been building trustworthy systems for collective decision-making, Audax OS needs governance intelligence at its core.'
  },
  {
    n: '07', name: 'Ecosystem Weavers',
    q: 'Are you helping many centres act together?',
    who: 'People who help independent actors discover alignment, form trust, coordinate missions, and learn together without central control.',
    bring: ['ecosystem mapping', 'trust and reputation signals', 'partnership protocols', 'open mission frameworks', 'contribution pathways', 'collective intelligence practices'],
    invite: 'If you understand the art of making many centres act together without forcing them into one container, you are building the outer layer of Audax OS.'
  }
];

const BUILD_PATHWAYS = [
  { n: '01', title: 'Join the Dialogue', body: 'Participate in conversations about the organisational OS needed for the agentic age. Bring questions, challenges, and half-formed ideas.' },
  { n: '02', title: 'Bring a Use Case', body: 'Share a real organisational challenge involving distributed work, fractional contribution, human-agent collaboration, or ecosystem coordination.' },
  { n: '03', title: 'Contribute to the OS', body: 'Help refine the Spheres, Layers, Modes, principles, protocols, diagnostics, and language.' },
  { n: '04', title: 'Build an Implementation', body: 'Create tools, agents, interfaces, templates, workshops, or integrations based on Audax OS concepts.' },
  { n: '05', title: 'Host a Conversation', body: 'Bring together organisation designers, AI builders, operators, or ecosystem actors to explore the problem space.' },
  { n: '06', title: 'Become a Living Lab', body: 'Use Audax OS as a lens for your own organisation, team, or community, and share what is learned.' }
];

const BUILD_ROLES = [
  'Organisation designer',
  'Agentic AI builder',
  'Collaboration tool builder',
  'Researcher',
  'Regenerative practitioner',
  'Founder / operator',
  'Strategic partner',
  'Other'
];

const PageBuild = ({ onNav }) => {
  return (
    <>

    {/* ─── 1 · HERO ─────────────────────────────────────────────────────────── */}
    <section className="hero" style={{ '--hero-image': `url(${HERO_BUILD})`, minHeight: '92vh', alignItems: 'center' }}>
      <div className="hero-wash"></div>
      <div className="hero-fade"></div>
      <div className="hero-vertical"><span>An invitation to co-creators of the OS</span></div>
      <div className="container">
        <div className="hero-inner" style={{ maxWidth: 960 }}>
          <Eyebrow>Let's build the OS</Eyebrow>
          <h1 className="display lg">
            Audax OS: an invitation to build the organisation OS<br /><em>for a regenerative, turquoise, agentic age</em>
          </h1>
          <p className="lede" style={{ maxWidth: 720 }}>
            Audax OS is not finished. That is the point.
          </p>
          <p className="lede" style={{ maxWidth: 720, marginTop: 16 }}>
            We have identified a problem space that is becoming impossible to ignore. We are inviting the people who can help turn the first map into shared practice.
          </p>
          <div className="hero-ctas" style={{ marginTop: 48 }}>
            <Button size="lg" icon="arrow-right" onClick={() => window.open(JOIN_URL, '_blank')}>
              Join &amp; Build the OS
            </Button>
          </div>
        </div>
      </div>
    </section>

    {/* ─── 2 · THE INVITATION ───────────────────────────────────────────────── */}
    <section className="section manifesto">
      <div className="container">
        <h1 className="q-h1">
          <span className="num">02 · The invitation</span>
          What are we <em>inviting people into?</em>
        </h1>
        <div className="q-body" style={{ maxWidth: 760 }}>
          <p>We are inviting a founding dialogue around one question:</p>
        </div>

        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(32px, 4vw, 56px)',
          fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.1,
          color: 'var(--ink-900)', textWrap: 'balance',
          maxWidth: 920,
          padding: '48px 0',
          borderTop: '2px solid var(--forest-700)',
          borderBottom: '1px solid var(--border-1)',
          margin: '24px 0 40px'
        }}>
          What organisational operating system is worthy of <em style={{ color: 'var(--forest-700)', fontStyle: 'italic' }}>humans and AI agents working together?</em>
        </div>

        <div className="q-body" style={{ maxWidth: 760 }}>
          <p>This dialogue is not theoretical decoration. It should lead to principles, protocols, tools, language, practices, diagnostics, experiments, and implementations.</p>
          <p>Audax OS begins with a proposed architecture: <strong>Five Spheres</strong> (what every healthy organisation must care for), <strong>Five Layers</strong> (where those functions operate), and <strong>Three Modes</strong> (how collaboration happens between humans and agents).</p>
          <p>But the details still need to be shaped. What should a contribution ledger include? How should personal agents protect consent? What does trust look like in a fractional organisation? How do agent-to-agent workflows remain inspectable?</p>
          <p>These are not small questions. They need many kinds of intelligence: organisation intelligence, technical intelligence, governance intelligence, regenerative intelligence, and the quiet intelligence of people who have seen enough failed systems to recognise a real edge when they find one.</p>
        </div>

        <PullQuote>Audax OS is not a product looking for users. <em>It is a problem space looking for co-creators.</em></PullQuote>
      </div>
    </section>

    {/* ─── 3 · WHO IS NEEDED FIRST ──────────────────────────────────────────── */}
    <section className="section" style={{ background: 'var(--surface-paper)' }}>
      <div className="container">
        <h1 className="q-h1">
          <span className="num">03 · First circle</span>
          Who is needed <em>at the beginning?</em>
        </h1>
        <p className="lede" style={{ marginBottom: 56, maxWidth: 760 }}>
          At this stage, Audax OS is primarily for people who can help develop the OS itself. The first circle is not a mass market. It is builders, designers, practitioners, and thinkers who understand that the organisation itself is now the design frontier.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {BUILD_AUDIENCES.slice(0, 4).map(a => (
            <article key={a.n} style={{
              background: 'var(--surface-white)',
              border: '1px solid var(--border-1)',
              borderRadius: 16, padding: '28px 22px',
              display: 'flex', flexDirection: 'column', minHeight: 220
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.22em', color: 'var(--forest-700)', marginBottom: 14
              }}>CIRCLE {a.n}</div>
              <h4 style={{
                fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 400,
                letterSpacing: '-0.02em', lineHeight: 1.05,
                color: 'var(--ink-900)', margin: '0 0 12px'
              }}>{a.name}</h4>
              <p style={{
                fontSize: 13, fontWeight: 300, lineHeight: 1.45,
                color: 'var(--ink-600)', margin: 0, fontStyle: 'italic'
              }}>{a.q}</p>
            </article>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 14 }}>
          {BUILD_AUDIENCES.slice(4).map(a => (
            <article key={a.n} style={{
              background: 'var(--surface-white)',
              border: '1px solid var(--border-1)',
              borderRadius: 16, padding: '28px 22px',
              display: 'flex', flexDirection: 'column', minHeight: 200
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.22em', color: 'var(--forest-700)', marginBottom: 14
              }}>CIRCLE {a.n}</div>
              <h4 style={{
                fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 400,
                letterSpacing: '-0.02em', lineHeight: 1.05,
                color: 'var(--ink-900)', margin: '0 0 12px'
              }}>{a.name}</h4>
              <p style={{
                fontSize: 13, fontWeight: 300, lineHeight: 1.45,
                color: 'var(--ink-600)', margin: 0, fontStyle: 'italic'
              }}>{a.q}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* ─── 4–8 · AUDIENCE DEEP DIVES ────────────────────────────────────────── */}
    <section className="section">
      <div className="container">
        <h1 className="q-h1">
          <span className="num">04–08 · Deep dives</span>
          What does each <em>first circle need?</em>
        </h1>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {BUILD_AUDIENCES.slice(0, 5).map((a, i) => (
            <div key={a.n} className="aud-row" style={{ paddingTop: i === 0 ? 56 : undefined }}>
              <div>
                <h6>{a.n} · First circle</h6>
                <h3>{a.name}</h3>
              </div>
              <div className="who-grid">
                <div>
                  <h6>Who you are</h6>
                  <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.6, color: 'var(--ink-700)', margin: '0 0 24px' }}>
                    {a.who}
                  </p>
                  <p style={{
                    fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 400,
                    letterSpacing: '-0.01em', lineHeight: 1.35,
                    color: 'var(--forest-900)', fontStyle: 'italic',
                    background: 'var(--forest-050)', border: '1px solid var(--forest-200)',
                    borderRadius: 12, padding: '16px 18px', margin: 0
                  }}>
                    {a.invite}
                  </p>
                </div>
                <div>
                  <h6>What you might help shape</h6>
                  <ul>{a.bring.map(x => <li key={x}>{x}</li>)}</ul>
                  <a href="#" className="aud-cta" onClick={(e) => { e.preventDefault(); window.open(JOIN_URL, '_blank'); }}>
                    Join &amp; Build the OS <span style={{ fontSize: 16 }}>&rarr;</span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Pull quotes */}
    <section className="section manifesto" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <PullQuote>The agentic age needs organisation designers, <em>not just AI engineers with admin access.</em></PullQuote>
        <PullQuote>Agents do not only need better prompts. <em>They need better organisational habitats.</em></PullQuote>
        <PullQuote>The next organisational OS should be interoperable, <em>not imperial.</em></PullQuote>
      </div>
    </section>

    {/* Sections 06–07 deep dives */}
    <section className="section" style={{ background: 'var(--surface-paper)' }}>
      <div className="container">
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {BUILD_AUDIENCES.slice(5).map((a, i) => (
            <div key={a.n} className="aud-row" style={{ paddingTop: i === 0 ? 0 : undefined }}>
              <div>
                <h6>{a.n} · First circle</h6>
                <h3>{a.name}</h3>
              </div>
              <div className="who-grid">
                <div>
                  <h6>Who you are</h6>
                  <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.6, color: 'var(--ink-700)', margin: '0 0 24px' }}>
                    {a.who}
                  </p>
                  <p style={{
                    fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 400,
                    letterSpacing: '-0.01em', lineHeight: 1.35,
                    color: 'var(--forest-900)', fontStyle: 'italic',
                    background: 'var(--forest-050)', border: '1px solid var(--forest-200)',
                    borderRadius: 12, padding: '16px 18px', margin: 0
                  }}>
                    {a.invite}
                  </p>
                </div>
                <div>
                  <h6>What you might help shape</h6>
                  <ul>{a.bring.map(x => <li key={x}>{x}</li>)}</ul>
                  <a href="#" className="aud-cta" onClick={(e) => { e.preventDefault(); window.open(JOIN_URL, '_blank'); }}>
                    Join &amp; Build the OS <span style={{ fontSize: 16 }}>&rarr;</span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ─── 9 · STRATEGIC PARTNERS ───────────────────────────────────────────── */}
    <section className="section">
      <div className="container">
        <h1 className="q-h1">
          <span className="num">09 · Partners</span>
          Who can <em>build with Audax OS?</em>
        </h1>
        <div className="q-body" style={{ maxWidth: 760, marginBottom: 48 }}>
          <p>Audax OS is intended to be an open OS, not a closed product. Like Agile, it should become something many people can interpret, extend, implement, critique, teach, and build upon. Strategic partners are not future customers. They are potential co-creators.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          <div style={{ background: 'var(--surface-white)', border: '1px solid var(--border-1)', borderRadius: 18, padding: '36px 36px' }}>
            <h6 style={{ fontSize: 10, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--forest-700)', margin: '0 0 16px' }}>Partner types</h6>
            {[
              'Organisation design consultancies',
              'AI agent platforms',
              'Collaboration tool vendors',
              'Governance and DAO platforms',
              'Knowledge management tools',
              'Learning and development platforms',
              'Community and network platforms',
              'Research labs and foundations',
              'Open-source communities',
              'Venture studios and funders'
            ].map((p, i) => (
              <div key={p} style={{
                padding: '10px 0', borderBottom: '1px solid var(--border-2)',
                fontSize: 15, fontWeight: 400, color: 'var(--ink-800)',
                display: 'flex', gap: 12, alignItems: 'center'
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--forest-600)', letterSpacing: '0.04em', flexShrink: 0 }}>{String(i + 1).padStart(2, '0')}</span>
                {p}
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ background: 'var(--forest-050)', border: '1px solid var(--forest-200)', borderRadius: 18, padding: '32px 32px' }}>
              <h6 style={{ fontSize: 10, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--forest-800)', margin: '0 0 16px' }}>What partners might build</h6>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 24px' }}>
                {['Diagnostics', 'Protocols', 'Training programmes', 'Workshops', 'AI agents', 'Tool integrations', 'Standards', 'Case studies', 'Research papers', 'Pilot programmes'].map(x => (
                  <div key={x} style={{ padding: '8px 0', borderBottom: '1px solid var(--forest-200)', fontSize: 13, color: 'var(--forest-900)' }}>{x}</div>
                ))}
              </div>
            </div>
            <div style={{ background: 'var(--surface-white)', border: '1px solid var(--border-1)', borderRadius: 18, padding: '32px 32px', flex: 1 }}>
              <p style={{
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400,
                letterSpacing: '-0.015em', lineHeight: 1.2,
                color: 'var(--ink-900)', fontStyle: 'italic', margin: 0
              }}>
                "The goal is not platform capture. The goal is shared infrastructure."
              </p>
            </div>
          </div>
        </div>
        <PullQuote>Audax OS should become a shared grammar many builders can use, <em>not a castle one vendor owns.</em></PullQuote>
      </div>
    </section>

    {/* ─── 10 · PARTICIPATION PATHWAYS ──────────────────────────────────────── */}
    <section className="section" style={{ background: 'var(--surface-paper)' }}>
      <div className="container">
        <h1 className="q-h1">
          <span className="num">10 · Ways in</span>
          How can people <em>help shape Audax OS?</em>
        </h1>
        <div className="q-body" style={{ maxWidth: 760, marginBottom: 56 }}>
          <p>There are many ways to contribute. The goal is not to make everyone contribute in the same way. The goal is to make contribution visible, useful, and alive.</p>
        </div>
        <div className="join-grid">
          {BUILD_PATHWAYS.map(p => (
            <div key={p.n} className="join-card">
              <div className="num">{p.n}</div>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
        <PullQuote>The OS will become real through <em>the quality of the people and practices that gather around it.</em></PullQuote>
      </div>
    </section>

    {/* ─── 11 · THE COHERENCE COMPANY ───────────────────────────────────────── */}
    <section className="section">
      <div className="container">
        <h1 className="q-h1">
          <span className="num">11 · Living lab</span>
          Where does this <em>begin in practice?</em>
        </h1>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
          background: 'var(--surface-white)',
          border: '1px solid var(--border-1)',
          borderRadius: 20, padding: '56px 56px',
          alignItems: 'start'
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--forest-700)', marginBottom: 16
            }}>First living lab</div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 40px)',
              fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05,
              color: 'var(--ink-900)', margin: '0 0 24px'
            }}>The Coherence Company</h3>
            <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.6, color: 'var(--ink-700)', margin: '0 0 16px' }}>
              The Coherence Company is the first organisation joining to develop, test, and evolve Audax OS in real organisational life.
            </p>
            <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.6, color: 'var(--ink-700)', margin: '0 0 16px' }}>
              It is not the owner of the OS. It is the first living lab — using Audax OS to explore how a distributed, fractional, AI-native organisation can organise work, contribution, learning, communication, human relationship, and agentic collaboration.
            </p>
            <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0 }}>
              The future organisational OS cannot be designed from a balcony. It must be tested inside real commitments, real tensions, real people, real agents, real projects, and real learning loops.
            </p>
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--ink-500)', marginBottom: 16
            }}>The constellation grows</div>
            <div style={{
              background: 'var(--forest-050)',
              border: '1px solid var(--forest-200)',
              borderRadius: 16, padding: '28px 28px', marginBottom: 16
            }}>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.3, color: 'var(--forest-900)', fontStyle: 'italic', margin: 0 }}>
                "The first living lab is not the owner of the field. It is the first place where the OS learns from reality."
              </p>
            </div>
            <p style={{ fontSize: 14, fontWeight: 300, lineHeight: 1.6, color: 'var(--ink-600)', margin: 0 }}>
              The Coherence Company will help generate the first practical patterns, but the OS should grow through a wider field of contributors, partners, and living labs. One node in a growing constellation — not the whole sky.
            </p>
          </div>
        </div>
      </div>
    </section>

    {/* ─── 12 · THE KIND OF DIALOGUE ────────────────────────────────────────── */}
    <section className="section manifesto">
      <div className="container">
        <h1 className="q-h1">
          <span className="num">12 · Culture</span>
          What kind of conversation <em>are we trying to host?</em>
        </h1>
        <div className="q-body" style={{ maxWidth: 760 }}>
          <p>The founding dialogue should be serious, generous, practical, and alive.</p>
          <p>Not a panel series where everyone performs insight and nothing changes. Not a Discord swamp where good ideas go to slowly become scroll sediment. Not a closed expert committee pretending the future has already been decided.</p>
          <p className="lead">We want conversations that <em>move.</em></p>
          <p>From question to pattern. From pattern to protocol. From protocol to test. From test to learning. From learning to better questions.</p>
          <p>The dialogue should welcome disagreement. Audax OS will be stronger if people challenge the language, test the assumptions, expose blind spots, bring edge cases, and refuse lazy consensus.</p>
          <p><strong>Co-creation is not polite agreement. It is disciplined imagination.</strong></p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0 64px', margin: '48px 0 0' }}>
          {[
            'Start from real problems.',
            'Stay close to practice.',
            'Make concepts legible.',
            'Name tensions early.',
            'Protect human agency.',
            'Respect technical reality.',
            'Prefer protocols over slogans.',
            'Treat critique as contribution.',
            'Build with enough openness that others can extend it.',
            'Keep asking what this makes possible for people, teams, and ecosystems.'
          ].map((p, i) => (
            <div key={i} style={{
              padding: '22px 0',
              borderBottom: '1px solid var(--border-2)',
              display: 'flex', gap: 20, alignItems: 'flex-start'
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.04em', color: 'var(--forest-700)',
                flexShrink: 0, minWidth: 28, paddingTop: 2
              }}>{String(i + 1).padStart(2, '0')}</span>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 400,
                letterSpacing: '-0.01em', color: 'var(--ink-900)', lineHeight: 1.25
              }}>{p}</div>
            </div>
          ))}
        </div>

        <PullQuote>We are not gathering to admire complexity. <em>We are gathering to make it workable.</em></PullQuote>
      </div>
    </section>

    {/* ─── 13 · WHAT COULD THIS BECOME ──────────────────────────────────────── */}
    <section className="section" style={{ background: 'var(--surface-paper)' }}>
      <div className="container">
        <h1 className="q-h1">
          <span className="num">13 · Horizon</span>
          What could this become <em>if we build it well?</em>
        </h1>
        <div className="q-body" style={{ maxWidth: 760, marginBottom: 48 }}>
          <p>If Audax OS works, it will not become one company's proprietary method. It will become a shared language for designing organisations in the agentic age.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
          {[
            { for: 'Organisation designers', becomes: 'A way to speak with AI builders around shared organisational objects.' },
            { for: 'Founders', becomes: 'A way to think beyond roles and task boards from the beginning.' },
            { for: 'Contributors', becomes: 'A way to see commitments, value, learning, and agency across contexts.' },
            { for: 'Teams', becomes: 'A way to make work legible without becoming bureaucratic.' },
            { for: 'Agents', becomes: 'A way to participate with context, permissions, feedback, and clear boundaries.' },
            { for: 'Vendors', becomes: 'A way to build interoperable tools around shared organisational objects.' },
            { for: 'Ecosystems', becomes: 'A way to coordinate missions without central control.' },
            { for: 'The future of work', becomes: 'A way to become more humane, not merely more automated.' },
            { for: 'Many builders', becomes: 'A shared grammar many systems may one day use.' }
          ].map((c, i) => (
            <div key={i} style={{
              background: 'var(--surface-white)',
              border: '1px solid var(--border-1)',
              borderRadius: 14, padding: '24px 22px'
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'var(--forest-700)', marginBottom: 10
              }}>For {c.for}</div>
              <p style={{
                fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 400,
                letterSpacing: '-0.01em', lineHeight: 1.25,
                color: 'var(--ink-900)', margin: 0, fontStyle: 'italic'
              }}>{c.becomes}</p>
            </div>
          ))}
        </div>
        <PullQuote>Audax OS will be valuable only if it becomes <em>bigger than the people who started it.</em></PullQuote>
      </div>
    </section>

    {/* FINAL MANIFESTO */}
    <section className="section" style={{ background: 'var(--bg-deep)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--grad-deep)', opacity: 1, pointerEvents: 'none' }}></div>
      <div className="container-narrow" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <Eyebrow color="var(--lichen-300)">A closing statement</Eyebrow>
        <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(40px, 5vw, 72px)', marginBottom: 32 }}>
          The old organisational OS is <em>creaking.</em>
        </h2>
        <p style={{ fontSize: 19, fontWeight: 300, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)', maxWidth: 620, margin: '0 auto 40px' }}>
          The agentic age will not wait for perfect theory. We need to build the next OS through practice, dialogue, and serious experimentation.
        </p>
        <Button size="lg" icon="arrow-right" onClick={() => window.open(JOIN_URL, '_blank')}>
          Let's build a holistic organisation OS for our times
        </Button>
      </div>
    </section>
    </>
  );
};

window.PageBuild = PageBuild;
