/* ============================================================
   APP — Portfolio Yan Trotta 2026
   ============================================================ */

const ACCENTS = {
  'Ámbar':     { accent: '#e98637', hover: '#d9742e', tint: '#f9e3d2', deep: '#b85f22' },
  'Verde':     { accent: '#3f7d5c', hover: '#336a4c', tint: '#dde9e2', deep: '#2b5a41' },
  'Terracota': { accent: '#c0573a', hover: '#a8472d', tint: '#f3ddd2', deep: '#8f3d27' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "acento": "Ámbar",
  "heroOverlay": "Medio",
  "mostrarStats": true
}/*EDITMODE-END*/;

function useScrollSpy(ids) {
  const [active, setActive] = React.useState(ids[0]);
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 });
    ids.forEach((id) => { const el = document.getElementById(id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, []);
  return active;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const refMap = React.useRef({});
  const [project, setProject] = React.useState(null);
  const active = useScrollSpy(['disciplinas', 'sobre', 'proyectos', 'trayectoria', 'contacto']);

  const scrollTo = (id) => {
    if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = refMap.current[id] || document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: 'smooth' });
  };

  const downloadCV = () => {
    const a = document.createElement('a');
    a.href = 'assets/cv/CV-Yan-Trotta-2026.pdf';
    a.download = 'CV-Yan-Trotta-2026.pdf';
    document.body.appendChild(a); a.click(); a.remove();
  };

  const ac = ACCENTS[t.acento] || ACCENTS['Ámbar'];
  const accentVars = {
    '--color-accent': ac.accent,
    '--color-accent-hover': ac.hover,
    '--amber-100': ac.tint,
    '--amber-500': ac.accent,
    '--amber-700': ac.deep,
    '--color-focus-ring': ac.accent,
    '--shadow-focus': `0 0 0 3px ${ac.accent}55`,
  };

  return (
    <div style={{ background: 'var(--color-bg)', ...accentVars }}>
      <Nav onNav={scrollTo} active={active} />
      <Hero onNav={scrollTo} tweaks={t} />
      <Disciplinas refMap={refMap} onNav={scrollTo} />
      <About refMap={refMap} />
      <Projects refMap={refMap} onOpen={setProject} />
      <Trayectoria refMap={refMap} onDownloadCV={downloadCV} />
      <Contact refMap={refMap} onDownloadCV={downloadCV} />
      <Lightbox project={project} onClose={() => setProject(null)} />

      <TweaksPanel>
        <TweakSection label="Identidad" />
        <TweakRadio label="Color de acento" value={t.acento} options={['Ámbar', 'Verde', 'Terracota']} onChange={(v) => setTweak('acento', v)} />
        <TweakSection label="Portada" />
        <TweakRadio label="Velo sobre la foto" value={t.heroOverlay} options={['Sutil', 'Medio', 'Intenso']} onChange={(v) => setTweak('heroOverlay', v)} />
        <TweakToggle label="Mostrar cifras" value={t.mostrarStats} onChange={(v) => setTweak('mostrarStats', v)} />
      </TweaksPanel>
    </div>
  );
}

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