// RDG — App entry: state, theme/lang/cursor, observers, mount
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useStateA(() => {
    const saved = localStorage.getItem('rdg-lang');
    if (saved === 'es' || saved === 'en') return saved;
    return (navigator.language || 'es').toLowerCase().startsWith('en') ? 'en' : 'es';
  });
  const [theme, setTheme] = useStateA(() => {
    const saved = localStorage.getItem('rdg-theme');
    if (saved === 'dark' || saved === 'light') return saved;
    return TWEAK_DEFAULTS.theme || 'light';
  });

  useEffectA(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('lang', lang);
    localStorage.setItem('rdg-theme', theme);
    localStorage.setItem('rdg-lang', lang);
  }, [theme, lang]);

  // Reveal observer
  useEffectA(() => {
    const els = document.querySelectorAll('.reveal, .reveal-stagger');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          requestAnimationFrame(() => e.target.classList.add('in'));
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05, rootMargin: '0px 0px 0px 0px' });
    // double-rAF so the initial opacity:0 frame paints before .in toggles
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        els.forEach(el => {
          const r = el.getBoundingClientRect();
          if (r.top < window.innerHeight && r.bottom > 0) {
            el.classList.add('in');
          } else {
            io.observe(el);
          }
        });
      });
    });
    // Safety net: if for any reason transitions don't fire, reveal everything after 1.5s
    const safety = setTimeout(() => {
      els.forEach(el => el.classList.add('in'));
    }, 1500);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, [lang]);

  // Custom cursor
  useEffectA(() => {
    const ring = document.createElement('div');
    ring.className = 'rdg-cursor';
    const dot = document.createElement('div');
    dot.className = 'rdg-cursor-dot';
    document.body.appendChild(ring);
    document.body.appendChild(dot);
    document.body.classList.add('rdg-hide-cursor');

    let rx = -100, ry = -100, dx = -100, dy = -100, tx = -100, ty = -100;
    const onMove = (e) => {
      tx = e.clientX; ty = e.clientY;
      dx = tx; dy = ty;
      dot.style.transform = `translate(${dx}px, ${dy}px) translate(-50%, -50%)`;
    };
    const animate = () => {
      rx += (tx - rx) * 0.18;
      ry += (ty - ry) * 0.18;
      ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(animate);
    };

    const hoverables = 'a, button, [data-cursor="hover"], input, textarea, select, label';
    const onOver = (e) => {
      if (e.target.closest && e.target.closest(hoverables)) ring.classList.add('hover');
    };
    const onOut = (e) => {
      if (e.target.closest && e.target.closest(hoverables)) ring.classList.remove('hover');
    };

    document.addEventListener('mousemove', onMove, { passive: true });
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', onOut);
    let raf = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(raf);
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mouseout', onOut);
      ring.remove(); dot.remove();
      document.body.classList.remove('rdg-hide-cursor');
    };
  }, []);

  const t = window.I18N[lang];
  const toggleTheme = () => setTheme(th => th === 'dark' ? 'light' : 'dark');

  return (
    <>
      <Nav t={t} lang={lang} setLang={setLang} theme={theme} toggleTheme={toggleTheme} />
      <main>
        <Hero t={t} />
        <Services t={t} />
        <About t={t} />
        <Cases t={t} />
        <Testimonials t={t} />
        <Stack t={t} />
        <Pricing t={t} />
        <FAQ t={t} />
        <Legal t={t} />
        <Contact t={t} />
      </main>
      <Footer t={t} />
      <RdgTweaks theme={theme} setTheme={setTheme} />
    </>
  );
}

// ---------- TWEAKS ----------
function RdgTweaks({ theme, setTheme }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Appearance">
        <TweakRadio
          label="Theme"
          value={theme}
          options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]}
          onChange={setTheme}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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