/* ═══════════════════════════════════════════
   App principal — Manual completo
   ═══════════════════════════════════════════ */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const SECTIONS = [
  { id: "portada", num: "00", label: "Portada" },
  { id: "introduccion", num: "0.0", label: "Introducción" },
  { id: "div-1", num: "01", label: "El emblema", divider: true,
    desc: "Construcción geométrica, área de respeto, versiones cromáticas y reglas de uso." },
  { id: "construccion", num: "1.1", label: "Construcción geométrica" },
  { id: "seguridad", num: "1.2", label: "Área de respeto" },
  { id: "versiones", num: "1.3", label: "Versiones cromáticas" },
  { id: "usos", num: "1.4", label: "Usos correctos / incorrectos" },
  { id: "div-2", num: "02", label: "Color y tipografía", divider: true,
    desc: "Paleta cromática institucional con valores Pantone, CMYK, RGB y HEX. Familias tipográficas y jerarquías." },
  { id: "color", num: "2.1", label: "Paleta cromática" },
  { id: "tipografia", num: "2.2", label: "Tipografía" },
  { id: "div-3", num: "03", label: "Papelería", divider: true,
    desc: "Aplicación del sistema en tarjetas de visita, papel de carta, sobres y firma de correo electrónico." },
  { id: "papeleria", num: "3.1", label: "Tarjeta de visita" },
  { id: "carta", num: "3.2", label: "Carta y sobre" },
  { id: "div-4", num: "04", label: "Plantillas", divider: true,
    desc: "Plantillas operativas para informes, partes diarios y presentaciones." },
  { id: "plantillas", num: "4.1", label: "Plantillas operativas" },
  { id: "cierre", num: "—", label: "Cierre" },
];

const NAV = SECTIONS.filter(s => !s.id.startsWith("div-"));

function Sidebar({ active }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <img src="assets/Emblema_XL.png" alt=""/>
        <div className="sidebar-brand-text">
          XL CONTINGENTE<br/>ANTÁRTICO
          <small>EJÉRCITO DE TIERRA</small>
        </div>
      </div>
      <div className="sidebar-tag">Contenidos</div>
      <ul className="nav-list">
        {NAV.map(s => (
          <li key={s.id}>
            <a href={`#${s.id}`} className={active === s.id ? "active" : ""}>
              <span className="nav-num">{s.num}</span>
              <span>{s.label}</span>
            </a>
          </li>
        ))}
      </ul>
      <div className="sidebar-foot">
        EDICIÓN 01 · V1.0<br/>
        CAMPAÑA 2026<br/>
        62°58′ S — 60°40′ W
      </div>
    </aside>
  );
}

function App() {
  const [active, setActive] = useStateApp("portada");
  const total = NAV.length;

  useEffectApp(() => {
    const observer = new IntersectionObserver(
      entries => {
        const visible = entries.filter(e => e.isIntersecting);
        if (visible.length > 0) {
          // pick the topmost visible
          visible.sort((a,b) => a.boundingClientRect.top - b.boundingClientRect.top);
          setActive(visible[0].target.id);
        }
      },
      { rootMargin: "-30% 0px -60% 0px", threshold: 0 }
    );
    NAV.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  // Get the page number for a given section id
  const idx = (id) => NAV.findIndex(s => s.id === id) + 1;

  return (
    <div className="app">
      <Sidebar active={active}/>
      <main className="main">
        <Cover/>
        <Intro num={String(idx("introduccion")).padStart(2, "0")} total={total}/>

        <Divider num="01" title="El" lightTitle="emblema"
                 desc="Construcción geométrica, área de respeto, versiones cromáticas y reglas de uso."/>
        <EmblemConstruction num={String(idx("construccion")).padStart(2, "0")} total={total}/>
        <EmblemSafeZone num={String(idx("seguridad")).padStart(2, "0")} total={total}/>
        <EmblemVersions num={String(idx("versiones")).padStart(2, "0")} total={total}/>
        <EmblemUsage num={String(idx("usos")).padStart(2, "0")} total={total}/>

        <Divider num="02" title="Color" lightTitle="y tipografía"
                 desc="Paleta cromática con valores Pantone, CMYK, RGB y HEX. Familias tipográficas y jerarquías."/>
        <ColorPalette num={String(idx("color")).padStart(2, "0")} total={total}/>
        <Typography num={String(idx("tipografia")).padStart(2, "0")} total={total}/>

        <Divider num="03" title="Papelería" lightTitle="institucional"
                 desc="Tarjetas de visita, papel de carta, sobres y firma de correo electrónico."/>
        <PaperBusinessCard num={String(idx("papeleria")).padStart(2, "0")} total={total}/>
        <PaperLetter num={String(idx("carta")).padStart(2, "0")} total={total}/>

        <Divider num="04" title="Plantillas" lightTitle="operativas"
                 desc="Plantillas para informes, partes diarios y presentaciones."/>
        <Templates num={String(idx("plantillas")).padStart(2, "0")} total={total}/>

        <Closing num={total} total={total}/>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);