/* ========================================================================
   CRISALAB · APP — main entry, header, cursor, timecode, Tweaks
   ======================================================================== */

const { useEffect: useE, useRef: useR, useState: useS } = React;

const TWEAK_DEFAULTS = JSON.parse(document.getElementById('tweak-defaults').textContent.replace(/\/\*EDITMODE-(BEGIN|END)\*\//g, ''));

// ============== CURSOR ==============
function Cursor({ enabled }) {
  const dotRef = useR(null);
  const ringRef = useR(null);
  useE(() => {
    if (!enabled) {
      document.body.classList.remove('cursor-on');
      return;
    }
    document.body.classList.add('cursor-on');
    let cx = 0,cy = 0,dx = 0,dy = 0,rx = 0,ry = 0,raf;
    const onMove = (e) => {cx = e.clientX;cy = e.clientY;};
    const tick = () => {
      dx += (cx - dx) * 0.25;dy += (cy - dy) * 0.25;
      rx += (cx - rx) * 0.12;ry += (cy - ry) * 0.12;
      if (dotRef.current) {dotRef.current.style.left = dx + 'px';dotRef.current.style.top = dy + 'px';}
      if (ringRef.current) {ringRef.current.style.left = rx + 'px';ringRef.current.style.top = ry + 'px';}
      raf = requestAnimationFrame(tick);
    };
    document.addEventListener('mousemove', onMove);
    raf = requestAnimationFrame(tick);

    const enter = () => {dotRef.current?.classList.add('hovering');ringRef.current?.classList.add('hovering');};
    const leave = () => {dotRef.current?.classList.remove('hovering');ringRef.current?.classList.remove('hovering');};
    const targets = document.querySelectorAll('a, button, input, textarea, .service-card, .service-row, .principle');
    targets.forEach((el) => {el.addEventListener('mouseenter', enter);el.addEventListener('mouseleave', leave);});

    return () => {
      document.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(raf);
      targets.forEach((el) => {el.removeEventListener('mouseenter', enter);el.removeEventListener('mouseleave', leave);});
      document.body.classList.remove('cursor-on');
    };
  }, [enabled]);

  if (!enabled) return null;
  return (
    <>
      <div className="cursor-dot" ref={dotRef}></div>
      <div className="cursor-ring" ref={ringRef}></div>
    </>);

}

// ============== HEADER ==============
function Header({ darkContext }) {
  const [scrolled, setScrolled] = useS(false);
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"header" + (scrolled ? " scrolled" : "") + (darkContext ? " dark-context" : "")}>
      <a href="#" className="header-logo">
        <svg viewBox="-50 -70 100 140"><use href="#capsule" /></svg>
        <span>Crisalab</span>
      </a>
      <div className="header-meta">
        <div className="header-status">
          <span className="dot"></span>
          <span>
</span>
        </div>

      </div>
    </header>);
}

// ============== TIMECODE ==============
function Timecode({ visible, darkContext, actKey, progress, show }) {
  if (!show) return null;
  const ACTS = { I: "01 · Reposo", II: "02 · Tensión", III: "03 · Fisura", IV: "04 · Despliegue", V: "05 · Vuelo" };
  const num = { I: "01", II: "02", III: "03", IV: "04", V: "05" }[actKey] || "01";
  const name = (ACTS[actKey] || "01 · Reposo").split("·")[1].trim();
  const totalSec = Math.floor(progress * 90);
  const m = String(Math.floor(totalSec / 60)).padStart(2, '0');
  const s = String(totalSec % 60).padStart(2, '0');
  return (
    <div className={"timecode" + (visible ? " visible" : "") + (darkContext ? " dark-context" : "")}>
      <div className="timecode-row"><span>ACT</span><span className="accent">{num}</span><span>·</span><span>{name}</span></div>
      <div className="timecode-bar"><div className="timecode-bar-fill" style={{ width: progress * 100 + "%" }} /></div>
      <div className="timecode-ticks"><span>I</span><span>II</span><span>III</span><span>IV</span><span>V</span></div>
      <div className="timecode-row"><span>{m}:{s}</span></div>
    </div>);

}

// ============== SCROLL HINT ==============
function ScrollHint({ darkContext }) {
  const [hidden, setHidden] = useS(false);
  useE(() => {
    const onScroll = () => {if (window.scrollY > 50) setHidden(true);};
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={"scroll-hint" + (hidden ? " hidden" : "") + (darkContext ? " dark-context" : "")}>
      <span>Desplázate</span>
      <div className="arrow"></div>
    </div>);

}

// ============== APP ==============
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [actKey, setActKey] = useS("I");
  const [progress, setProgress] = useS(0);
  const [inHero, setInHero] = useS(true);

  // Track scroll position relative to hero for timecode + dark-context
  useE(() => {
    const onScroll = () => {
      const heroEl = document.querySelector('.hero');
      if (!heroEl) return;
      const heroTop = heroEl.offsetTop;
      const heroHeight = heroEl.offsetHeight - window.innerHeight;
      const scrollInHero = Math.max(0, Math.min(window.scrollY - heroTop, heroHeight));
      const tt = Math.max(0, Math.min(scrollInHero / heroHeight, 1));
      setProgress(tt);
      const heroBottom = heroEl.offsetTop + heroEl.offsetHeight;
      setInHero(window.scrollY + window.innerHeight * 0.5 < heroBottom && window.scrollY > 50);
      let key;
      if (tt < 0.18) key = "I";else
      if (tt < 0.38) key = "II";else
      if (tt < 0.58) key = "III";else
      if (tt < 0.82) key = "IV";else
      key = "V";
      setActKey(key);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Detect if user is over a dark section (principles or dark-hero)
  const [darkContext, setDarkContext] = useS(false);
  useE(() => {
    const onScroll = () => {
      const principles = document.querySelector('.principles');
      const hero = document.querySelector('.hero');
      const y = window.scrollY + 60; // header height bias
      let dark = false;
      if (t.darkHero && hero) {
        const hb = hero.offsetTop + hero.offsetHeight;
        if (y < hb) dark = true;
      }
      if (principles) {
        const pt = principles.offsetTop;
        const pb = pt + principles.offsetHeight;
        if (y >= pt && y < pb) dark = true;
      }
      setDarkContext(dark);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [t.darkHero]);

  return (
    <>
      <Cursor enabled={t.showCursor} />
      <Header darkContext={darkContext} />

      <ScrollHint darkContext={darkContext && inHero} />
      <Timecode visible={inHero} darkContext={darkContext} actKey={actKey} progress={progress} show={t.showTimecode} />

      <Hero tweaks={t} />

      <div className="content">
        <What />
        <Services tweaks={t} />
        <Explained />
        <Principles />
        <Waitlist />
        <Footer />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Animación de la crisálida" />
        <TweakRadio label="Densidad de palabras" value={t.wordsDensity}
        options={[
        { value: "minimal", label: "Mínima" },
        { value: "balanced", label: "Equilibrada" },
        { value: "abundant", label: "Abundante" }]
        }
        onChange={(v) => setTweak('wordsDensity', v)} />
        <TweakRadio label="Intensidad" value={t.animationIntensity}
        options={[
        { value: "subtle", label: "Sutil" },
        { value: "balanced", label: "Equilibrada" },
        { value: "vivid", label: "Vívida" }]
        }
        onChange={(v) => setTweak('animationIntensity', v)} />
        <TweakToggle label="Hero en modo oscuro (jade)" value={t.darkHero}
        onChange={(v) => setTweak('darkHero', v)} />

        <TweakSection label="Servicios" />
        <TweakRadio label="Layout" value={t.servicesLayout}
        options={[
        { value: "cards", label: "Cards" },
        { value: "table", label: "Tabla editorial" }]
        }
        onChange={(v) => setTweak('servicesLayout', v)} />

        <TweakSection label="Interfaz" />
        <TweakToggle label="Cursor personalizado" value={t.showCursor}
        onChange={(v) => setTweak('showCursor', v)} />
        <TweakToggle label="Timecode lateral" value={t.showTimecode}
        onChange={(v) => setTweak('showTimecode', v)} />
      </TweaksPanel>
    </>);

}

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