// App + Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#F97316", "#EC4899", "#A855F7"],
  "density": "regular",
  "animations": true
}/*EDITMODE-END*/;

const PALETTES = [
  ['#4F8CFF', '#A855F7', '#22D3EE'], // neon (default)
  ['#10B981', '#06B6D4', '#84CC16'], // emerald
  ['#F97316', '#EC4899', '#A855F7'], // sunset
  ['#64748B', '#94A3B8', '#CBD5E1'], // mono
];

function applyTweaks(t) {
  const [a1, a2, a3] = t.palette;
  const r = document.documentElement;
  r.style.setProperty('--accent', a1);
  r.style.setProperty('--accent-2', a2);
  r.style.setProperty('--accent-3', a3);
  r.style.setProperty('--grad', `linear-gradient(135deg, ${a1} 0%, ${a2} 100%)`);
  r.style.setProperty('--grad-soft', `linear-gradient(135deg, ${a1}2e 0%, ${a2}2e 100%)`);

  const dens = t.density === 'compact' ? 72 : t.density === 'comfy' ? 152 : 112;
  document.querySelectorAll('main > div > section, main > section, header').forEach(s => {
    s.style.paddingTop = dens + 'px';
    s.style.paddingBottom = dens + 'px';
  });

  document.documentElement.dataset.animations = t.animations ? 'on' : 'off';
}

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.05, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  useReveal();

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <div className="reveal"><Services/></div>
        <div className="reveal"><Process/></div>
        <div className="reveal"><Stack/></div>
        <div className="reveal"><Projects/></div>
        <div className="reveal"><Training/></div>
        <div className="reveal"><Contact/></div>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Apariencia"/>
        <TweakColor
          label="Paleta de acento"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakSection label="Movimiento"/>
        <TweakToggle
          label="Animaciones de scroll"
          value={t.animations}
          onChange={(v) => setTweak('animations', v)}
        />
      </TweaksPanel>
    </>
  );
}

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