// Shared sub-page layout: header strip + content area + footer
const { useState: usePS, useRef: usePR } = React;

const SubPageHeader = ({ kicker, title, lede }) => (
  <header style={{
    padding: '64px 56px 80px',
    borderBottom: '1px solid var(--rule)',
    background: 'var(--paper)'
  }}>
    <div style={{maxWidth: 1240, margin: '0 auto'}}>
      <a href="index.html" style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 12,
        textDecoration: 'none',
        marginBottom: 56
      }}>
        <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logo) || 'assets/argus-logo.png'} alt="ARGUS Framework" style={{height: 44, width: 'auto'}} />
      </a>

      <div style={{display: 'grid', gridTemplateColumns: '280px 1fr', gap: 80, alignItems: 'start'}}>
        <div>
          <div className="eyebrow-num">{kicker}</div>
          <div className="gold-rule" />
          <a href="index.html" style={{
            fontFamily: 'var(--mono)',
            fontSize: 11,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: 'var(--ink-60)',
            textDecoration: 'none',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            marginTop: 12
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M8 2L4 6l4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
            </svg>
            Back to framework
          </a>
        </div>
        <div>
          <h1 className="display" style={{fontSize: 'clamp(38px, 5vw, 64px)', margin: '0 0 28px', maxWidth: 880}}>
            {title}
          </h1>
          {lede && <p className="hero-lede" style={{maxWidth: 720}}>{lede}</p>}
        </div>
      </div>
    </div>
  </header>
);

const SubFooter = () => (
  <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>
      <div>
        <h4>The Framework</h4>
        <ul>
          <li><a href="index.html#overview">The Challenge</a></li>
          <li><a href="index.html#pillars">Four Pillars</a></li>
          <li><a href="index.html#maturity">Maturity Pyramid</a></li>
          <li><a href="index.html#ecosystem">Ecosystem</a></li>
          <li><a href="index.html#domains">Six Domains</a></li>
        </ul>
      </div>
      <div>
        <h4>Resources</h4>
        <ul>
          <li><a href="index.html#compliance">Compliance Alignment</a></li>
          <li><a href="index.html#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>
);

window.SubPageHeader = SubPageHeader;
window.SubFooter = SubFooter;