function Document() {
  const data = window.HandbookData;
  const S = window.HandbookSections;

  return (
    <div className="document-shell">
      <aside className="sidebar">
        <div className="brand-lockup">
          <div className="brand-name">OsteosOnline</div>
          <div className="brand-subtitle">Marketing Handboek</div>
        </div>
        <nav aria-label="Document navigatie">
          <ul>
            {data.nav.map(([id, number, label]) => (
              <li key={id}>
                <a href={`#${id}`}>
                  <span>{number}</span>
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <div className="sidebar-note">
          <strong>{data.meta.tagline}</strong>
          <small>Source: data + JSX + AGENTS.md</small>
        </div>
      </aside>

      <main className="document-main">
        <S.CoverSection />
        <S.BrandSection />
        <S.PropositionSection />
        <S.AudiencesSection />
        <S.ChannelsSection />
        <S.TemplatesSection />
        <S.AgentsSection />
        <S.DesignPrinciplesSection />
        <S.ComponentSystemSection />
        <S.PromptBuilderSection />
        <S.QualityGatesSection />
      </main>
    </div>
  );
}

window.HandbookDocument = Document;