// App.jsx — root composition + tweaks
const { useState: useStateA } = React;

function App() {
  const [t, setTweak] = useTweaks(window.__TWEAKS);
  useReveal();

  return (
    <div id="top">
      <Nav />
      <Hero />
      <Ticker />
      <Projects layout={t.projectsLayout} />
      <Content />
      <About />
      <Now />
      <Work />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Projects" />
        <TweakRadio
          label="Layout"
          value={t.projectsLayout}
          options={['bento','list','marquee']}
          onChange={(v) => setTweak('projectsLayout', v)}
        />

        <TweakSection label="Cursor" />
        <TweakToggle
          label="Custom cursor"
          value={t.showCursor}
          onChange={(v) => setTweak('showCursor', v)}
        />
      </TweaksPanel>

      {t.showCursor && <CustomCursor />}
    </div>
  );
}

// ─── Custom cursor — small ring that grows on links ─────────────────
function CustomCursor() {
  const dotRef = React.useRef(null);
  const ringRef = React.useRef(null);
  React.useEffect(() => {
    const dot = dotRef.current, ring = ringRef.current;
    if (!dot || !ring) return;
    let mx = window.innerWidth/2, my = window.innerHeight/2;
    let rx = mx, ry = my;
    let raf;
    const onMove = (e) => { mx = e.clientX; my = e.clientY; };
    const onDown = () => ring.classList.add('cur-down');
    const onUp   = () => ring.classList.remove('cur-down');
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mousedown', onDown);
    window.addEventListener('mouseup', onUp);

    function tick() {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      dot.style.transform = `translate(${mx - 3}px, ${my - 3}px)`;
      ring.style.transform = `translate(${rx - 14}px, ${ry - 14}px)`;
      raf = requestAnimationFrame(tick);
    }
    tick();

    // hover detection
    const onOver = (e) => {
      const t = e.target;
      const isLink = t.closest && t.closest('a, button, [role="button"]');
      ring.classList.toggle('cur-link', !!isLink);
    };
    document.addEventListener('mouseover', onOver);

    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mousedown', onDown);
      window.removeEventListener('mouseup', onUp);
      document.removeEventListener('mouseover', onOver);
      cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <>
      <div ref={dotRef} className="cur-dot" />
      <div ref={ringRef} className="cur-ring" />
    </>
  );
}

if (!document.getElementById('cur-css')) {
  const s = document.createElement('style'); s.id='cur-css';
  s.textContent = `
    @media (hover:hover) and (pointer:fine) {
      html { cursor: none; }
      a, button, [role="button"] { cursor: none; }
      .cur-dot{position:fixed;left:0;top:0;width:6px;height:6px;background:var(--ink);
        border-radius:50%;pointer-events:none;z-index:99999;mix-blend-mode:difference}
      .cur-ring{position:fixed;left:0;top:0;width:28px;height:28px;border:1px solid var(--ink);
        border-radius:50%;pointer-events:none;z-index:99998;mix-blend-mode:difference;
        transition:width .25s ease,height .25s ease,margin .25s ease,border-color .25s}
      .cur-ring.cur-link{width:48px;height:48px;margin:-10px 0 0 -10px;border-color:var(--ink)}
      .cur-ring.cur-down{width:18px;height:18px;margin:5px 0 0 5px}
    }
    @media (hover:none) {
      .cur-dot,.cur-ring{display:none}
    }
  `;
  document.head.appendChild(s);
}

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