// App shell: sidebar + content

const NAV = [
  { id: 'contexto',         num: '01', label: 'Contexto y Ficha Técnica',           icon: 'BookOpenText', dot: 'bg-coral-500' },
  { id: 'marco',            num: '02', label: 'Marco Conceptual y Diagnóstico',     icon: 'Brain',        dot: 'bg-teal-500'  },
  { id: 'herramientas',     num: '03', label: 'Caja de Herramientas',               icon: 'ToolCase',     dot: 'bg-amber-500' },
  { id: 'implementacion',   num: '04', label: 'Implementación, Evaluación y Cierre',icon: 'Compass',      dot: 'bg-sage-500'  },
  { id: 'referencias',      num: '05', label: 'Referencias Bibliográficas',         icon: 'Library',      dot: 'bg-lilac-500' },
];

function App() {
  const initial = (typeof location !== 'undefined' && location.hash) ? location.hash.replace('#','') : 'contexto';
  const [view, setView] = React.useState(NAV.find(n => n.id === initial) ? initial : 'contexto');
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    history.replaceState(null, '', '#' + view);
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
    setMobileOpen(false);
  }, [view]);

  const Section = {
    contexto: SectionContexto,
    marco: SectionMarco,
    herramientas: SectionHerramientas,
    implementacion: SectionImplementacion,
    referencias: SectionReferencias,
  }[view] || SectionContexto;

  return (
    <div className="min-h-screen paper-grain">
      <div className="lg:flex lg:min-h-screen">
        {/* SIDEBAR */}
        <aside className={`
          fixed lg:sticky top-0 left-0 z-40 h-screen w-[300px] shrink-0
          bg-paper-card border-r hairline
          transform lg:transform-none transition-transform duration-200
          ${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
          flex flex-col
        `}>
          {/* Brand */}
          <div className="p-6 border-b hairline">
            <div className="flex items-center gap-3">
              <div className="relative w-11 h-11 rounded-xl bg-ink flex items-center justify-center overflow-hidden">
                <div className="absolute inset-0 bg-gradient-to-br from-coral-500/30 via-transparent to-teal-500/30"></div>
                <Icon name="HeartHandshake" size={20} className="text-paper relative" />
              </div>
              <div className="min-w-0">
                <div className="font-display text-[19px] leading-tight tracking-tightish text-ink">Julio Verne</div>
                <div className="text-[11px] text-ink-muted uppercase tracking-[0.14em] font-medium">Dosier socioemocional</div>
              </div>
            </div>
          </div>

          {/* Nav */}
          <nav className="p-4 flex-1 overflow-y-auto scroll-area">
            <div className="text-[10px] uppercase tracking-[0.18em] text-ink-muted font-semibold px-3 mb-2">Secciones</div>
            <ul className="space-y-1">
              {NAV.map(n => (
                <li key={n.id}>
                  <button
                    onClick={() => setView(n.id)}
                    className={`nav-item w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left ${view === n.id ? 'active' : 'text-ink-soft'}`}>
                    <span className="font-mono text-[10px] opacity-60">{n.num}</span>
                    <span className={`nav-dot w-1.5 h-1.5 rounded-full ${view === n.id ? '' : n.dot}`}></span>
                    <span className="text-[13.5px] font-medium leading-snug flex-1">{n.label}</span>
                    <Icon name={n.icon} size={15} className="opacity-70" />
                  </button>
                </li>
              ))}
            </ul>

            <div className="mt-8 px-3">
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-muted font-semibold mb-2">Referencias rápidas</div>
              <div className="space-y-2">
                <a className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg hover:bg-paper-warm text-ink-soft text-[13px] cursor-pointer"><Icon name="ExternalLink" size={13} /> Marco CASEL</a>
                <a className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg hover:bg-paper-warm text-ink-soft text-[13px] cursor-pointer"><Icon name="ExternalLink" size={13} /> Yale RULER</a>
                <a className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg hover:bg-paper-warm text-ink-soft text-[13px] cursor-pointer"><Icon name="ExternalLink" size={13} /> Neurociencia educativa</a>
              </div>
            </div>
          </nav>

          {/* Footer card */}
          <div className="p-4 border-t hairline">
            <div className="rounded-xl bg-paper-warm p-4 border hairline">
              <div className="flex items-center gap-2 mb-2">
                <Icon name="ShieldCheck" size={14} className="text-teal-600" />
                <span className="text-[11px] uppercase tracking-[0.14em] text-ink-soft font-semibold">Equipo DECE</span>
              </div>
              <p className="text-xs text-ink-muted leading-relaxed">
                Kevin A. Silva M. · Coordinación académica · Comité de mediación escolar.
              </p>
            </div>
          </div>
        </aside>

        {/* Mobile overlay */}
        {mobileOpen && (
          <div onClick={() => setMobileOpen(false)} className="fixed inset-0 z-30 bg-ink/30 lg:hidden"></div>
        )}

        {/* MAIN */}
        <main ref={scrollRef} className="flex-1 min-w-0 lg:max-h-screen lg:overflow-y-auto scroll-area">
          {/* Topbar */}
          <div className="sticky top-0 z-20 backdrop-blur bg-paper/85 border-b hairline">
            <div className="px-5 lg:px-10 py-3.5 flex items-center justify-between gap-3">
              <div className="flex items-center gap-3 min-w-0">
                <button
                  onClick={() => setMobileOpen(true)}
                  className="lg:hidden w-9 h-9 rounded-lg border hairline flex items-center justify-center text-ink-soft">
                  <Icon name="Menu" size={16} />
                </button>
                <div className="text-[11px] uppercase tracking-[0.16em] text-ink-muted font-medium flex items-center gap-2 min-w-0">
                  <Icon name="HeartHandshake" size={14} className="text-coral-600 shrink-0" />
                  <span className="truncate">Dosier · Buenas prácticas socioemocionales</span>
                  <span className="hidden md:inline text-ink-muted/60">/</span>
                  <span className="hidden md:inline truncate">{NAV.find(n => n.id === view)?.label}</span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-ink-soft border hairline hover:bg-paper-warm">
                  <Icon name="Printer" size={13} /> Imprimir
                </button>
                <button className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-ink text-paper hover:bg-ink-soft">
                  <Icon name="Download" size={13} /> Descargar PDF
                </button>
              </div>
            </div>
          </div>

          {/* Content */}
          <div className="px-5 lg:px-10 xl:px-14 py-10 lg:py-14 max-w-[1280px] mx-auto">
            <Section key={view} />
          </div>

          {/* Footer */}
          <footer className="border-t hairline mt-8">
            <div className="px-5 lg:px-10 py-6 max-w-[1280px] mx-auto flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between text-xs text-ink-muted">
              <div>© 2026 · U.E. Intercultural Julio Verne — Dosier de buenas prácticas socioemocionales.</div>
              <div className="flex items-center gap-3">
                <span>Versión 1.0</span>
                <span className="w-1 h-1 rounded-full bg-ink-muted/40"></span>
                <span>CASEL · RULER · Neurociencia</span>
              </div>
            </div>
          </footer>
        </main>
      </div>
    </div>
  );
}

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