// APP SHELL — nav + mounts all sections, syncs active link on scroll,
// wires Tweaks panel to shared window state.

const { useState, useEffect, useRef } = React;

function Nav({ active }) {
  const items = [
    ['manifiesto', 'Manifiesto'],
    ['sistema',    'Sistema'],
    ['joaquina',   'Detrás'],
    ['proyectos',  'Proyectos'],
    ['moodboard',  'Moodboard'],
    ['tarjeta',    'Tarjeta'],
    ['contacto',   'Contacto'],
  ];
  return (
    <header className="nav">
      <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}>
        <FiveBars width={34} color="var(--red)" />
        <span className="nav-mark">NOMEN</span>
      </a>
      <nav className="nav-links">
        {items.map(([id, label]) => (
          <a key={id} href={'#'+id} className={active === id ? 'active' : ''}>{label}</a>
        ))}
      </nav>
      <span className="nav-meta">EST. 2026 · BS AS</span>
    </header>
  );
}

function App() {
  const useTweaksHook = window.useTweaks || ((d) => [d, () => {}]);
  const [tweaks, setTweak] = useTweaksHook(window.__NOMEN_TWEAKS__);
  const [active, setActive] = useState('hero');

  useEffect(() => {
    window.__NOMEN_STATE__ = tweaks;
    if (window.__setCursor) window.__setCursor(tweaks.cursorMode);
    if (tweaks.paletteMode === 'dark') {
      document.documentElement.style.setProperty('--bg', '#0A0A0A');
      document.documentElement.style.setProperty('--fg', '#E7E5E2');
    } else {
      document.documentElement.style.setProperty('--bg', '#D9D9DA');
      document.documentElement.style.setProperty('--fg', '#0A0A0A');
    }
  }, [tweaks]);

  useEffect(() => {
    const ids = ['hero','manifiesto','sistema','joaquina','proyectos','moodboard','tarjeta','contacto'];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-45% 0px -45% 0px' });
    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  const Tp = window.TweaksPanel;
  const Ts = window.TweakSection;
  const Tr = window.TweakRadio;
  const Tt = window.TweakToggle;

  return (
    <>
      <Nav active={active} />
      <Hero tweaks={tweaks} />

      <Marquee items={[
        'Traducir lo invisible en forma',
        'Intensa · profunda · calma · inquieta',
        'Nombrar es un acto visual',
        'Diseño funcional',
        'Japón lover',
        'Expresar fuerte y claro',
        'Agua'
      ]} />

      <Manifesto />
      <Sistema />
      <Joaquina />
      <Proyectos />
      <Moodboard />

      <Marquee items={[
        '5 ventanas', 'Seleccionar', 'Nombrar', 'Representar',
        'Cada ser · cada cosa · cada concepto', 'NOMEN'
      ]} />

      <Tarjeta />
      <Contacto />

      {Tp && (
        <Tp title="Tweaks">
          <Ts label="Hero" />
          <Tr label="Tratamiento" value={tweaks.heroTreatment}
             options={['wordmark','plate']}
             onChange={(v) => setTweak('heroTreatment', v)} />
          <Ts label="Cursor" />
          <Tr label="Modo" value={tweaks.cursorMode}
             options={['selector','off']}
             onChange={(v) => setTweak('cursorMode', v)} />
          <Ts label="Paleta" />
          <Tr label="Fondo" value={tweaks.paletteMode}
             options={['paper','dark']}
             onChange={(v) => setTweak('paletteMode', v)} />
          <Ts label="Detalles" />
          <Tt label="Foliado de página" value={tweaks.showPageNumbers}
             onChange={(v) => setTweak('showPageNumbers', v)} />
        </Tp>
      )}
    </>
  );
}

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