// Chrome: classification bar, nav, footer — shared across all pages
// currentPage: 'home' | 'method' | 'dossier' | 'industries' | 'about' | 'request'

function ClassificationBar({ caseNo = 'FILE-2026-Q2', status = 'AUTHORIZED ACCESS', label = 'UNDERCOVERBOSS.AI // FIELD INTELLIGENCE' }) {
  return (
    <div className="uo-classification">
      <div className="left">
        <span className="dot" />
        <span>{label}</span>
      </div>
      <div>{caseNo} · {status}</div>
    </div>
  );
}

function Nav({ currentPage = 'home' }) {
  const links = [
    { id: 'method',     label: 'Methodology', href: 'method.html' },
    { id: 'dossier',    label: 'The Platform', href: 'dossier.html' },
    { id: 'industries', label: 'Industries', href: 'industries.html' },
    { id: 'about',      label: 'About',      href: 'about.html' },
  ];
  return (
    <nav className="uo-nav">
      <div className="uo-logo">
        <a href="index.html" aria-label="undercoverboss.ai — home">
          <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="uo-logo-mark" />
            <span>undercover<em>boss</em></span>
          </span>
        </a>
      </div>
      <ul className="uo-nav-links">
        {links.map(l => (
          <li key={l.id}>
            <a href={l.href} className={currentPage === l.id ? 'active' : ''}>{l.label}</a>
          </li>
        ))}
      </ul>
      <a href="request.html" className="uo-btn">Request Briefing</a>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="uo-footer">
      <div className="inner">
        <div>© 2026 undercoverboss.ai · AI-powered field intelligence</div>
        <div>TRUST · VERIFY · RECEIPTS</div>
      </div>
    </footer>
  );
}

function PageHero({ kicker, title, lede, caseFile }) {
  return (
    <section className="uo-page-hero">
      <div className="kicker">{kicker}{caseFile && <>&nbsp;·&nbsp;<span style={{ color: 'var(--bone-a48)' }}>{caseFile}</span></>}</div>
      <h1 dangerouslySetInnerHTML={{ __html: title }} />
      {lede && <p className="lede">{lede}</p>}
    </section>
  );
}

Object.assign(window, { ClassificationBar, Nav, Footer, PageHero });