/* global React, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSlider, NavBar, Hero, Marquee, About, Services, Portfolio, InstagramFeed, Contact, Footer */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#BEFF00",
  "showCursorBlob": true,
  "showGrain": true,
  "showSeal": true,
  "mode": "editorial"
}/*EDITMODE-END*/;

function useReveal() {
  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, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function CursorBlob({ enabled }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!enabled) return;
    const el = ref.current;
    let x = 0, y = 0, tx = 0, ty = 0;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    window.addEventListener('mousemove', move);
    let raf;
    const tick = () => {
      x += (tx - x) * 0.12;
      y += (ty - y) * 0.12;
      if (el) el.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => { window.removeEventListener('mousemove', move); cancelAnimationFrame(raf); };
  }, [enabled]);
  if (!enabled) return null;
  return <div ref={ref} className="cursor-blob"/>;
}

function MobilePanel({ open, onClose }) {
  return (
    <div className={`mobile-panel ${open ? 'open' : ''}`}>
      <a href="#top" onClick={onClose}>Ana Sayfa</a>
      <a href="#hizmetler" onClick={onClose}>Hizmetler</a>
      <a href="#hakkimda" onClick={onClose}>Hakkımda</a>
      <a href="#iletisim" onClick={onClose}>İletişim</a>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = useState(false);
  useReveal();

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // Recompute soft accent
    const hex = t.accent.replace('#','');
    if (hex.length === 6) {
      const r = parseInt(hex.slice(0,2),16);
      const g = parseInt(hex.slice(2,4),16);
      const b = parseInt(hex.slice(4,6),16);
      document.documentElement.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.12)`);
    }
  }, [t.accent]);

  useEffect(() => {
    document.body.classList.toggle('no-seal', !t.showSeal);
  }, [t.showSeal]);

  return (
    <>
      {t.showGrain && <div className="grain"/>}
      <CursorBlob enabled={t.showCursorBlob}/>

      <NavBar onMenu={() => setMenuOpen(o => !o)} mobileOpen={menuOpen}/>
      <MobilePanel open={menuOpen} onClose={() => setMenuOpen(false)}/>

      <main>
        <Hero/>
        <Marquee/>
        <About/>
        <Services/>
        <InstagramFeed/>
        <Contact/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Marka"/>
        <TweakColor label="Vurgu rengi" value={t.accent}
                    options={['#BEFF00', '#FF4500', '#00E0FF', '#FFD700', '#E94BFF']}
                    onChange={(v) => setTweak('accent', v)}/>
        <TweakSection label="Atmosfer"/>
        <TweakToggle label="İmleç parıltısı" value={t.showCursorBlob}
                     onChange={(v) => setTweak('showCursorBlob', v)}/>
        <TweakToggle label="Film grain" value={t.showGrain}
                     onChange={(v) => setTweak('showGrain', v)}/>
        <TweakToggle label="Dönen mühür (hero)" value={t.showSeal}
                     onChange={(v) => setTweak('showSeal', v)}/>
      </TweaksPanel>
    </>
  );
}

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