// App shell — wires everything, custom cursor, scroll-reveal observer, Tweaks.

const TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "typo": "kaku",
  "tint": "warm"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAKS);

  // Apply tweaks via body data-attrs / CSS variables
  React.useEffect(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.typo = t.typo;
    const root = document.documentElement;
    if (t.tint === 'warm')      { root.style.setProperty('--tint', '#F9F8F6'); root.style.setProperty('--tint-2', '#F4F2EE'); }
    else if (t.tint === 'cool') { root.style.setProperty('--tint', '#F5F6F7'); root.style.setProperty('--tint-2', '#EAEDEF'); }
    else                        { root.style.setProperty('--tint', '#F6F6F6'); root.style.setProperty('--tint-2', '#EFEFEF'); }
  }, [t]);

  // Custom cursor — track mouse, expand on hover.
  React.useEffect(() => {
    const cur = document.getElementById('cursor');
    if (!cur) return;
    let x = window.innerWidth / 2, y = window.innerHeight / 2;
    let tx = x, ty = y;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const tick = () => {
      x += (tx - x) * 0.22;
      y += (ty - y) * 0.22;
      cur.style.transform = `translate(${x}px, ${y}px) translate(-50%,-50%)`;
      raf = requestAnimationFrame(tick);
    };
    let raf = requestAnimationFrame(tick);
    window.addEventListener('mousemove', onMove);

    const onOver = (e) => {
      const target = e.target.closest('.cta, .hot, a, button, input, textarea');
      if (!target) { cur.classList.remove('hover', 'cta'); return; }
      cur.classList.toggle('cta', target.classList.contains('cta'));
      cur.classList.toggle('hover', !target.classList.contains('cta'));
    };
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', () => cur.classList.remove('hover', 'cta'));

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

  // Scroll-reveal observer
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  return (
    <>
      <SiteHeader />
      <main>
        <Hero />
        <About />
        <DC />
        <Research />
        <Profile />
        <Works />
        <Contact />
      </main>
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="カラー" />
        <TweakRadio
          label="パレット"
          value={t.palette}
          options={[
            { value: 'forest', label: 'Forest' },
            { value: 'indigo', label: 'Indigo' },
            { value: 'sumi',   label: '墨' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakRadio
          label="差し色トーン"
          value={t.tint}
          options={[
            { value: 'warm', label: '暖' },
            { value: 'neutral', label: '中' },
            { value: 'cool', label: '寒' },
          ]}
          onChange={(v) => setTweak('tint', v)}
        />

        <TweakSection label="タイポ" />
        <TweakRadio
          label="見出し"
          value={t.typo}
          options={[
            { value: 'kaku',   label: 'ゴシック' },
            { value: 'mincho', label: '明朝' },
            { value: 'mixed',  label: 'ミックス' },
          ]}
          onChange={(v) => setTweak('typo', v)}
        />
      </TweaksPanel>
    </>
  );
}

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