// App entrypoint — composes the full page + wires Tweaks + custom cursor + reveal-on-scroll
const { useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakSelect } = window;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "violet",
  "density": "default",
  "heroTerminal": true,
  "marquee": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweaks] = useTweaks(DEFAULTS);

  // Apply tweaks as body data-attributes
  React.useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.body.dataset.accent = tweaks.accent;
    document.body.dataset.density = tweaks.density;
  }, [tweaks]);

  // Custom cursor
  React.useEffect(() => {
    const cursor = document.getElementById('cursor');
    if (!cursor) return;

    let raf;
    let tx = 0, ty = 0, cx = 0, cy = 0;

    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const tick = () => {
      cx += (tx - cx) * 0.22;
      cy += (ty - cy) * 0.22;
      cursor.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };

    const addHover = () => cursor.classList.add('hover');
    const removeHover = () => cursor.classList.remove('hover');
    const interactive = 'a, button, [role="button"], input, textarea, .case, .svc-card, .testim__dot';

    const onEnter = (e) => { if (e.target.matches?.(interactive) || e.target.closest?.(interactive)) addHover(); };
    const onLeave = (e) => { if (e.target.matches?.(interactive) || e.target.closest?.(interactive)) removeHover(); };

    window.addEventListener('mousemove', onMove);
    document.addEventListener('mouseover', onEnter);
    document.addEventListener('mouseout', onLeave);
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onEnter);
      document.removeEventListener('mouseout', onLeave);
    };
  }, []);

  // Reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal, section .section-head, .svc-card, .proc-step, .case, .stack-group');
    els.forEach(el => el.classList.add('reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <window.Nav />
      <main>
        <window.Hero />
        <window.Services />
        <window.Process />
        <window.Portfolio />
        <window.Stack />
        <window.Testimonials />
        <window.CTA />
      </main>
      <window.Footer />

      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} title="Tweaks">
        <TweakSection title="Tema">
          <TweakRadio
            k="theme"
            tweaks={tweaks}
            setTweaks={setTweaks}
            options={[
              { value: 'dark', label: 'Oscuro' },
              { value: 'light', label: 'Claro' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Acento">
          <TweakRadio
            k="accent"
            tweaks={tweaks}
            setTweaks={setTweaks}
            options={[
              { value: 'violet', label: 'Violeta' },
              { value: 'green', label: 'Verde' },
              { value: 'orange', label: 'Naranja' },
              { value: 'cyan', label: 'Cian' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Densidad">
          <TweakRadio
            k="density"
            tweaks={tweaks}
            setTweaks={setTweaks}
            options={[
              { value: 'compact', label: 'Compacta' },
              { value: 'default', label: 'Normal' },
              { value: 'roomy', label: 'Amplia' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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