// ARGUS Framework one-pager, main app
const { useState: useS, useEffect: useE, useRef: useR } = React;

const PILLARS = [
  {
    num: '01',
    title: 'Identity Governance',
    glyph: PillarGlyphs.identity,
    body: 'Who has access to what, when, and why. The foundation of every secure organisation. Identity Governance provides visibility and control over all human identities, machine identities, and AI agents. Without identity, there is no governance. Without governance, there is no safe AI.'
  },
  {
    num: '02',
    title: 'Security',
    glyph: PillarGlyphs.security,
    body: 'Identity-centric security that goes beyond perimeter defence. Every actor, human, machine, or AI, operates within governed environments with full traceability. From onboarding to offboarding, from first login to final access review, every action is linked to an identity.'
  },
  {
    num: '03',
    title: 'AI Governance',
    glyph: PillarGlyphs.ai,
    body: 'How do AI agents operate within the organisation? Who owns them? What data can they access? What decisions can they make autonomously, and where is human oversight required? AI Governance defines the boundaries, ownership, and accountability structures for every AI actor.'
  },
  {
    num: '04',
    title: 'Organisational Intelligence',
    glyph: PillarGlyphs.intelligence,
    body: 'The convergence of identity, security, and AI governance creates organisation-wide intelligence. A continuous feedback loop where insights from access patterns, security events, and AI behaviour inform governance decisions. Not just a dashboard, a living system.'
  }
];

const ECOSYSTEM = [
  { num: '01', title: 'ARGUS Maturity Pyramid', desc: 'The evolution model at the heart of the framework. It defines the path from Fragmented to Autonomous Organisation in clear, measurable stages. Each level has defined criteria, making progress objective and communicable to stakeholders at every level.' },
  { num: '02', title: 'ARGUS Compass', desc: 'An executive-level assessment that positions an organisation on the Maturity Pyramid. The Compass evaluates six interconnected domains and produces an actionable report with maturity scores, gap analysis, and prioritised recommendations.' },
  { num: '03', title: 'ARGUS Control Centre', desc: 'A central, real-time dashboard providing structured overview of maturity across all key domains. Beyond insight, it enables action: organisations initiate AI-driven commands directly from the platform, translating governance insights into immediate, controlled improvements.' },
  { num: '04', title: 'ARGUS Methodology, The 6C\u2019s', desc: 'A structured, business-driven implementation approach built around six phases: Check, Course, Configure, Coach, Care, and Communicate. Designed for iterative progress, not big-bang transformation. Each cycle moves the organisation one level up the Maturity Pyramid.' },
  { num: '05', title: 'ARGUS Teammate', desc: 'Continuous operational support through AI. The Teammate augments security and governance teams by assisting in monitoring, anomaly detection, policy enforcement, and decision support. It strengthens the team, it doesn\u2019t replace human oversight.' }
];

const DOMAINS = [
  { num: '01', title: 'Identity & Account Governance', desc: 'Visibility and ownership of all human, machine, and AI identities. Who exists in the system, who owns them, and are they still needed?' },
  { num: '02', title: 'Access & Authentication', desc: 'Central access control, multi-factor authentication, single sign-on, and enforcement of least privilege. How is access granted, and how is it protected?' },
  { num: '03', title: 'Lifecycle & Automation', desc: 'Onboarding, offboarding, role changes, and periodic account reviews. How are identity changes managed, and how much of it is automated versus manual?' },
  { num: '04', title: 'Logging, Monitoring & Detection', desc: 'Central logging, anomaly detection, and audit trails. Can the organisation see what is happening, detect deviations, and respond in time?' },
  { num: '05', title: 'Governance, Policy & Compliance', desc: 'IAM policy, risk management, and regulatory alignment. Is governance documented, enforced, and demonstrable?' },
  { num: '06', title: 'Organisation & Decision-Making', desc: 'Stakeholder roles, accountability structures, and roadmap governance. Who decides, who is responsible, and is there a plan?' }
];

const PRINCIPLES = [
  { num: '01', title: 'Identity-first', desc: 'Every governance decision starts with identity. No access without identity. No AI without ownership. Identity is the operating system of the modern organisation.' },
  { num: '02', title: 'Technology-agnostic', desc: 'ARGUS works across platforms, vendors, and environments. The framework adapts to the technology stack, not the other way around. Whether an organisation runs on Azure, AWS, Google Workspace, or on-premise systems, the model applies.' },
  { num: '03', title: 'Business-driven', desc: 'Designed for board-level conversations, not just technical implementation. The Maturity Pyramid, Compass, and Methodology speak the language of risk, accountability, and strategic value, making governance accessible beyond IT.' },
  { num: '04', title: 'Iterative by design', desc: 'Organisations progress through maturity levels, not big-bang transformations. Each step is concrete, measurable, and achievable. The framework meets organisations where they are and guides them forward.' },
  { num: '05', title: 'Vendor-neutral', desc: 'ARGUS is not a product. It is an open operating model that can be adopted, implemented, and extended by any organisation or consultancy. There is no lock-in, no proprietary tooling requirement, and no single-vendor dependency.' }
];

const COMPLIANCE = [
  { code: 'NIS2', name: 'Network & Information Security' },
  { code: 'ISO 27001', name: 'Information Security Management' },
  { code: 'EU AI Act', name: 'European AI Regulation' },
  { code: 'DORA', name: 'Digital Operational Resilience' },
  { code: 'GDPR', name: 'General Data Protection' },
  { code: 'BIO', name: 'Baseline NL Government' },
  { code: 'NEN 7510', name: 'Healthcare Infosec' }
];

const NAV = [
  { id: 'overview', label: 'Overview' },
  { id: 'pillars', label: 'Pillars' },
  { id: 'maturity', label: 'Maturity' },
  { id: 'ecosystem', label: 'Ecosystem' },
  { id: 'domains', label: 'Domains' },
  { id: 'compliance', label: 'Compliance' },
  { id: 'principles', label: 'Principles' }
];

// ============= Sections =============

const Nav = ({ active, onNav, variant }) => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#top" className="nav-logo" onClick={(e) => { e.preventDefault(); onNav('top'); }}>
        <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logo) || 'assets/argus-logo.png'} alt="ARGUS Framework" />
      </a>
      <div className="nav-links">
        {NAV.map(n => (
          <a key={n.id} href={`#${n.id}`} className={active === n.id ? 'active' : ''}
            onClick={(e) => { e.preventDefault(); onNav(n.id); }}>{n.label}</a>
        ))}
      </div>
      <div className="chip" style={{display: 'inline-flex'}}>
        <span className="dot"/> v1.0 · Vendor-neutral
      </div>
    </div>
  </nav>
);

const Hero = () => (
  <section id="top" className="hero">
    <div className="hero-inner">
      <div className="hero-logo">
        <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logo) || 'assets/argus-logo.png'} alt="ARGUS Framework" />
      </div>
      <div className="chip" style={{marginBottom: 32}}><span className="dot"/> Framework v1.0 · Vendor-neutral</div>
      <h1>
        Identity-Driven AI Governance.<br/>
        <em>A strategic operating model for the AI era.</em>
      </h1>
      <p className="hero-lede">
        ARGUS connects Identity, Security, and AI Governance into a single coherent structure, enabling organisations to adopt AI with clarity, control, and confidence.
      </p>
      <div className="hero-meta">
        <span className="chip">Not a product</span>
        <span className="chip">Not a tool</span>
        <span className="chip" style={{borderColor: 'var(--gold)', color: 'var(--gold-deep)'}}>
          <span className="dot" /> A strategic operating model
        </span>
      </div>

      <div className="hero-grid">
        {[
          ['Identity Governance', 'Visibility and control over every human, machine, and AI identity in the organisation.'],
          ['Security', 'Identity-centric security with full traceability, from onboarding to offboarding.'],
          ['AI Governance', 'Ownership, boundaries, and accountability structures for every AI agent.']
        ].map(([t, d], i) => (
          <div key={i} className="hero-grid-cell">
            <div className="num">{`0${i+1} / 03`}</div>
            <div className="ttl">{t}</div>
            <div className="desc">{d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Overview = () => (
  <section id="overview" className="section">
    <div className="section-inner">
      <div className="section-hd">
        <div className="meta">
          <div className="eyebrow-num">§ 01 / The Challenge</div>
          <div className="gold-rule" />
          <div className="eyebrow">The AI governance gap</div>
        </div>
        <div>
          <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 40px', maxWidth: 880}}>
            Most frameworks address AI from an ethical perspective. <em>ARGUS addresses what comes before that.</em>
          </h2>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px', marginTop: '48px'}}>
            <p className="body">
              Organisations are integrating AI at pace, from automation and decision support to autonomous agents operating across systems. But most lack a structured approach to the identities, access rights, and accountability structures that AI depends on.
            </p>
            <p className="body">
              <strong>The result:</strong> AI tools adopted without ownership. Machine accounts created without lifecycle management. Access rights that expand invisibly. Compliance exposure that surfaces only after an incident.
            </p>
          </div>

          <div style={{marginTop: '64px', borderTop: '1px solid var(--rule)', paddingTop: '40px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '32px'}}>
            {[
              ['Who has access?', 'human · machine · AI'],
              ['Who owns the AI agent?', 'accountability'],
              ['What data can it reach?', 'scope · boundaries'],
              ['Who is accountable?', 'when something goes wrong']
            ].map(([q, sub], i) => (
              <div key={i}>
                <div className="eyebrow-num" style={{marginBottom: 12}}>Q{String(i+1).padStart(2, '0')}</div>
                <div style={{fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 600, lineHeight: 1.3, letterSpacing: '-0.012em', marginBottom: 8, color: 'var(--ink)'}}>{q}</div>
                <div style={{fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-40)', textTransform: 'uppercase'}}>{sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const WhatIsArgus = () => (
  <section className="section dark" style={{paddingTop: 140, paddingBottom: 140}}>
    <div className="section-inner">
      <div className="section-hd">
        <div className="meta">
          <div className="eyebrow-num" style={{color: 'rgba(247,243,236,0.5)'}}>§ 02 / Definition</div>
          <div className="gold-rule" />
          <div className="eyebrow">What is ARGUS?</div>
        </div>
        <div>
          <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px', color: 'var(--cream)', maxWidth: 880}}>
            Named after Argus Panoptes, the all-seeing guardian of Greek mythology.
          </h2>
          <p className="body" style={{maxWidth: 780, marginTop: 24, color: 'rgba(247,243,236,0.72)', fontSize: 16}}>
            In the same way, the ARGUS Framework provides continuous, structured visibility across every identity, every access point, every AI agent, and every governance decision. It is a technology-agnostic operating model designed to bridge the gap between three domains traditionally managed in silos.
          </p>

          <div style={{marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(247,243,236,0.16)'}}>
            {[
              ['I', 'Identity & Access Management', 'who has access and why'],
              ['II', 'Cybersecurity', 'how that access is protected and monitored'],
              ['III', 'AI Governance', 'how AI agents operate and what they can do']
            ].map(([numeral, title, sub], i) => (
              <div key={i} style={{
                padding: '40px 32px 36px',
                borderRight: i < 2 ? '1px solid rgba(247,243,236,0.16)' : 'none'
              }}>
                <div style={{fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', color: 'var(--gold)', textTransform: 'uppercase'}}>{`Domain 0${i+1}`}</div>
                <div style={{height: 1, background: 'rgba(247,243,236,0.16)', margin: '20px 0'}} />
                <div style={{fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 600, lineHeight: 1.25, letterSpacing: '-0.012em', color: 'var(--cream)', marginBottom: 8}}>{title}</div>
                <div style={{fontFamily: 'var(--sans)', fontSize: 13, color: 'rgba(247,243,236,0.6)', lineHeight: 1.5}}>{sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Pillars = () => {
  const [active, setActive] = useS(0);
  return (
    <section id="pillars" className="section">
      <div className="section-inner">
        <div className="section-hd">
          <div className="meta">
            <div className="eyebrow-num">§ 03 / Foundation</div>
            <div className="gold-rule" />
            <div className="eyebrow">Four Pillars</div>
          </div>
          <div>
            <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px'}}>
              Four pillars. <em>One connected model.</em>
            </h2>
            <p className="body-lede" style={{maxWidth: 720}}>
              The ARGUS Framework is built on four interdependent pillars that together form a complete governance model for the AI era.
            </p>
          </div>
        </div>
        <div className="pillars-grid">
          {PILLARS.map((p, i) => (
            <div key={i}
              className={'pillar' + (active === i ? ' active' : '')}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}>
              <div className="pillar-num">{p.num} / 04</div>
              <div className="pillar-glyph">{p.glyph}</div>
              <h3 className="pillar-title">{p.title}</h3>
              <p className="pillar-body">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Maturity = () => (
  <section id="maturity" className="section dark" style={{paddingTop: 140, paddingBottom: 140}}>
    <div className="section-inner">
      <div className="section-hd">
        <div className="meta">
          <div className="eyebrow-num" style={{color: 'rgba(247,243,236,0.5)'}}>§ 04 / Journey</div>
          <div className="gold-rule" />
          <div className="eyebrow">Maturity Pyramid</div>
        </div>
        <div>
          <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px', color: 'var(--cream)'}}>
            Six levels. <em style={{color: 'rgba(247,243,236,0.55)'}}>One common language.</em>
          </h2>
          <p className="body" style={{maxWidth: 720, color: 'rgba(247,243,236,0.72)'}}>
            Every organisation is on a journey. The ARGUS Maturity Pyramid provides a common language for assessing where an organisation stands today, what the target state should be, and what the safest next step looks like.
          </p>
        </div>
      </div>

      <Pyramid />
    </div>
  </section>
);

const Ecosystem = () => {
  // 12-col grid: pyramid (12 wide), then 2x2 underneath, then teammate full
  const layout = [
    { span: 12, item: ECOSYSTEM[0], featured: true },
    { span: 6, item: ECOSYSTEM[1] },
    { span: 6, item: ECOSYSTEM[2] },
    { span: 6, item: ECOSYSTEM[3] },
    { span: 6, item: ECOSYSTEM[4] },
  ];
  return (
    <section id="ecosystem" className="section" style={{background: 'var(--paper-2)'}}>
      <div className="section-inner">
        <div className="section-hd">
          <div className="meta">
            <div className="eyebrow-num">§ 05 / Components</div>
            <div className="gold-rule" />
            <div className="eyebrow">The Ecosystem</div>
          </div>
          <div>
            <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px'}}>
              The strategic core. <em>Five specialised components.</em>
            </h2>
            <p className="body-lede" style={{maxWidth: 720}}>
              The framework is the strategic core. Around it, specialised components provide the tools for assessment, implementation, and continuous improvement.
            </p>
          </div>
        </div>

        <div className="eco-grid">
          {layout.map((l, i) => (
            <div key={i} className="eco-card" style={{
              gridColumn: `span ${l.span}`, minHeight: l.featured ? 220 : 280, ...(l.featured ? {flexDirection: 'row', alignItems: 'flex-start', gap: 56, padding: '44px 40px'} : {})
            }}>
              {l.featured ? (
                <>
                  <div style={{flex: '0 0 280px'}}>
                    <div className="eco-num">{l.item.num} / 05</div>
                    <h3 style={{marginTop: 14, fontSize: 30}}>{l.item.title}</h3>
                  </div>
                  <p style={{flex: 1, fontSize: 15.5}}>{l.item.desc}</p>
                  <div style={{flex: '0 0 80px', display: 'flex', justifyContent: 'flex-end'}}>
                    <svg width="64" height="48" viewBox="0 0 64 48" fill="none">
                      <path d="M4 44 L32 4 L60 44 Z" stroke="#0E1A3A" strokeWidth="1.2"/>
                      <path d="M10 36 L32 36" stroke="#C8A961" strokeWidth="1"/>
                      <path d="M14 28 L32 28" stroke="#C8A961" strokeWidth="1"/>
                      <path d="M18 20 L32 20" stroke="#C8A961" strokeWidth="1"/>
                      <path d="M22 12 L32 12" stroke="#C8A961" strokeWidth="1"/>
                    </svg>
                  </div>
                </>
              ) : (
                <>
                  <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
                    <div className="eco-num">{l.item.num} / 05</div>
                    <EcoGlyph kind={i} />
                  </div>
                  <h3>{l.item.title}</h3>
                  <p>{l.item.desc}</p>
                </>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const EcoGlyph = ({ kind }) => {
  const stroke = '#0E1A3A';
  const gold = '#C8A961';
  if (kind === 1) return ( // Compass
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="13" stroke={stroke} strokeWidth="1"/>
      <path d="M16 6 L18 16 L16 26 L14 16 Z" fill={gold} stroke={gold} strokeWidth="0.5"/>
      <circle cx="16" cy="16" r="1.6" fill={stroke}/>
    </svg>
  );
  if (kind === 2) return ( // Control centre, grid with active dot
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="4" y="4" width="9" height="9" stroke={stroke} strokeWidth="1"/>
      <rect x="19" y="4" width="9" height="9" stroke={stroke} strokeWidth="1" fill={gold} fillOpacity="0.4"/>
      <rect x="4" y="19" width="9" height="9" stroke={stroke} strokeWidth="1" fill={gold} fillOpacity="0.4"/>
      <rect x="19" y="19" width="9" height="9" stroke={stroke} strokeWidth="1"/>
    </svg>
  );
  if (kind === 3) return ( // Methodology, 6 dots in a circle
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      {Array.from({length: 6}).map((_, i) => {
        const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
        const x = 16 + Math.cos(a) * 11;
        const y = 16 + Math.sin(a) * 11;
        return <circle key={i} cx={x} cy={y} r="2" fill={i === 0 ? gold : stroke}/>;
      })}
      <circle cx="16" cy="16" r="13" stroke={stroke} strokeWidth="0.5" opacity="0.4"/>
    </svg>
  );
  if (kind === 4) return ( // Teammate, two figures
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <circle cx="11" cy="11" r="4" stroke={stroke} strokeWidth="1"/>
      <circle cx="22" cy="11" r="4" stroke={gold} strokeWidth="1"/>
      <path d="M3 26 c0-4 4-7 8-7 s8 3 8 7" stroke={stroke} strokeWidth="1"/>
      <path d="M14 26 c0-4 4-7 8-7 s8 3 8 7" stroke={gold} strokeWidth="1"/>
    </svg>
  );
  return null;
};

const Domains = () => {
  const [open, setOpen] = useS(0);
  return (
    <section id="domains" className="section">
      <div className="section-inner">
        <div className="section-hd">
          <div className="meta">
            <div className="eyebrow-num">§ 06 / Coverage</div>
            <div className="gold-rule" />
            <div className="eyebrow">Six Domains</div>
          </div>
          <div>
            <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px'}}>
              What ARGUS covers.
            </h2>
            <p className="body-lede" style={{maxWidth: 720}}>
              The framework assesses and structures governance across six interconnected domains. Together, they provide a complete view of an organisation's identity, access, and AI governance posture.
            </p>
          </div>
        </div>
        <div>
          {DOMAINS.map((d, i) => (
            <div key={i} className={'acc-item' + (open === i ? ' open' : '')} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="acc-row">
                <div className="acc-num">{d.num} / 06</div>
                <div className="acc-title">{d.title}</div>
                <button className="acc-toggle" aria-label="Toggle">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <line x1="6" y1="1" x2="6" y2="11" stroke="currentColor" strokeWidth="1.4"/>
                    <line x1="1" y1="6" x2="11" y2="6" stroke="currentColor" strokeWidth="1.4"/>
                  </svg>
                </button>
              </div>
              <div className="acc-content">
                <div className="acc-content-inner">{d.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Compliance = () => (
  <section id="compliance" className="section" style={{background: 'var(--paper-2)'}}>
    <div className="section-inner">
      <div className="section-hd">
        <div className="meta">
          <div className="eyebrow-num">§ 07 / Alignment</div>
          <div className="gold-rule" />
          <div className="eyebrow">Compliance</div>
        </div>
        <div>
          <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px'}}>
            Aligned with leading standards & regulations.
          </h2>
          <p className="body-lede" style={{maxWidth: 720}}>
            ARGUS provides the structural and operational foundation that supports compliance across major frameworks and regulations. It does not replace these standards, it provides the identity and governance layer that makes compliance demonstrable and auditable.
          </p>
        </div>
      </div>

      <div className="comp-grid">
        {COMPLIANCE.map((c, i) => (
          <div key={i} className="comp-cell">
            <div className="code">{c.code}</div>
            <div className="name">{c.name}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Principles = () => {
  const [open, setOpen] = useS(0);
  return (
    <section id="principles" className="section">
      <div className="section-inner">
        <div className="section-hd">
          <div className="meta">
            <div className="eyebrow-num">§ 08 / Foundations</div>
            <div className="gold-rule" />
            <div className="eyebrow">Design Principles</div>
          </div>
          <div>
            <h2 className="display" style={{fontSize: 'clamp(34px, 4vw, 52px)', margin: '0 0 24px'}}>
              Principles behind the framework.
            </h2>
          </div>
        </div>
        <div>
          {PRINCIPLES.map((d, i) => (
            <div key={i} className={'acc-item' + (open === i ? ' open' : '')} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="acc-row">
                <div className="acc-num">{d.num} / 05</div>
                <div className="acc-title">{d.title}</div>
                <button className="acc-toggle" aria-label="Toggle">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <line x1="6" y1="1" x2="6" y2="11" stroke="currentColor" strokeWidth="1.4"/>
                    <line x1="1" y1="6" x2="11" y2="6" stroke="currentColor" strokeWidth="1.4"/>
                  </svg>
                </button>
              </div>
              <div className="acc-content">
                <div className="acc-content-inner">{d.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Closing = () => (
  <section className="section dark" style={{paddingTop: 140, paddingBottom: 140, borderTop: '1px solid rgba(247,243,236,0.14)'}}>
    <div className="section-inner">
      <div style={{maxWidth: 980}}>
        <div className="eyebrow" style={{color: 'var(--gold)'}}>§ 09 / In summary</div>
        <div className="gold-rule" style={{margin: '20px 0 32px'}} />
        <h2 className="display" style={{fontSize: 'clamp(36px, 4.4vw, 60px)', margin: '0 0 40px', color: 'var(--cream)', lineHeight: 1.08}}>
          Identity is the operating system of the modern organisation.
          <em style={{color: 'rgba(247,243,236,0.55)', display: 'block', marginTop: 16}}>ARGUS makes it visible, governable, and accountable.</em>
        </h2>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(247,243,236,0.16)', marginTop: 64}}>
          {[
            ['100+', 'Eyes', 'Continuous visibility across every identity, agent, and decision.'],
            ['06', 'Maturity Levels', 'A common language from Unmanaged to Autonomous Organisation.'],
            ['07', 'Standards', 'Aligned with NIS2, ISO 27001, EU AI Act, DORA, GDPR, BIO, NEN 7510.']
          ].map(([n, l, d], i) => (
            <div key={i} style={{padding: '40px 32px 36px', borderRight: i < 2 ? '1px solid rgba(247,243,236,0.16)' : 'none'}}>
              <div style={{fontFamily: 'var(--serif)', fontSize: 64, fontWeight: 400, color: 'var(--gold)', lineHeight: 1, letterSpacing: '-0.02em'}}>{n}</div>
              <div style={{fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', color: 'rgba(247,243,236,0.5)', textTransform: 'uppercase', margin: '20px 0 12px'}}>{l}</div>
              <div style={{fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.6, color: 'rgba(247,243,236,0.72)'}}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div>
        <div style={{marginBottom: 32, filter: 'brightness(0) invert(1)', opacity: 0.95}}>
          <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logo) || 'assets/argus-logo.png'} alt="ARGUS Framework" style={{height: 64, width: 'auto'}} />
        </div>
        <p className="footer-tagline">
          An open, vendor-neutral operating model for identity-driven AI governance.
        </p>
        <div style={{marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap'}}>
          <span className="chip" style={{background: 'transparent', borderColor: 'rgba(247,243,236,0.2)', color: 'rgba(247,243,236,0.7)'}}>Vendor-neutral</span>
          <span className="chip" style={{background: 'transparent', borderColor: 'rgba(247,243,236,0.2)', color: 'rgba(247,243,236,0.7)'}}>Technology-agnostic</span>
          <span className="chip" style={{background: 'transparent', borderColor: 'rgba(247,243,236,0.2)', color: 'rgba(247,243,236,0.7)'}}>Identity-first</span>
        </div>
      </div>
      <div>
        <h4>The Framework</h4>
        <ul>
          <li><a href="#overview">The Challenge</a></li>
          <li><a href="#pillars">Four Pillars</a></li>
          <li><a href="#maturity">Maturity Pyramid</a></li>
          <li><a href="#ecosystem">Ecosystem</a></li>
          <li><a href="#domains">Six Domains</a></li>
        </ul>
      </div>
      <div>
        <h4>Resources</h4>
        <ul>
          <li><a href="#compliance">Compliance Alignment</a></li>
          <li><a href="#principles">Design Principles</a></li>
          <li><a href="documentation.html">v1.0 Documentation</a></li>
          <li><a href="privacy.html">Privacy Policy</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© ARGUS Framework 2026</span>
      <span>Identity-Driven AI Governance</span>
      <span>argus-framework.com</span>
    </div>
  </footer>
);

// ===== Main App =====

const ArgusOnePager = ({ variant = 'light' }) => {
  const [active, setActive] = useS('top');
  const rootRef = useR(null);

  const onNav = (id) => {
    const el = (rootRef.current || document).querySelector(`#${id}`);
    if (el) {
      const root = rootRef.current;
      // For canvas mode, scroll within the artboard
      if (root && root.scrollTo) {
        const top = el.offsetTop - 60;
        root.scrollTo({ top, behavior: 'smooth' });
      } else {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
    setActive(id);
  };

  useE(() => {
    const root = rootRef.current;
    if (!root) return;
    const handler = () => {
      const sections = NAV.map(n => ({ id: n.id, el: root.querySelector(`#${n.id}`) })).filter(s => s.el);
      const scrollY = root.scrollTop || window.scrollY;
      const found = sections.reverse().find(s => s.el.offsetTop - 120 <= scrollY);
      if (found) setActive(found.id);
    };
    root.addEventListener('scroll', handler);
    return () => root.removeEventListener('scroll', handler);
  }, []);

  return (
    <div className={'argus-root' + (variant === 'dark' ? ' var-dark' : variant === 'warm' ? ' var-warm' : '')} ref={rootRef}>
      <Hero />
      <Overview />
      <WhatIsArgus />
      <Pillars />
      <Maturity />
      <Ecosystem />
      <Domains />
      <Compliance />
      <Principles />
      <Closing />
      <Footer />
    </div>
  );
};

window.ArgusOnePager = ArgusOnePager;
