/* global React, ReactDOM */

function App() {
  useReveal();

  // Init Lenis smooth scroll
  React.useEffect(() => {
    if (typeof Lenis === 'undefined') return;
    const lenis = new Lenis({
      duration: 1.15,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      smoothWheel: true,
      smoothTouch: false,
    });
    window.__lenis = lenis;
    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
    return () => {
      lenis.destroy();
      delete window.__lenis;
    };
  }, []);

  // Init Three.js hero scene after mount
  React.useEffect(() => {
    if (window.initHeroScene) window.initHeroScene();
  }, []);

  // Konami code easter egg
  React.useEffect(() => {
    const seq = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
    let idx = 0;
    const onKey = (e) => {
      if (e.key.toLowerCase() === seq[idx].toLowerCase()) {
        idx++;
        if (idx === seq.length) {
          idx = 0;
          fireEasterEgg();
        }
      } else {
        idx = e.key === seq[0] ? 1 : 0;
      }
    };
    const fireEasterEgg = () => {
      // confetti-ish: rapid float on shapes + toast
      const t = document.getElementById('konami-toast');
      if (t) {
        t.classList.add('show');
        setTimeout(() => t.classList.remove('show'), 3500);
      }
      // spin every shape briefly
      const scene = window.__heroScene?.scene;
      if (scene) {
        // momentary boost — we just flash the body
        document.body.animate(
          [{ filter: 'hue-rotate(0deg)' }, { filter: 'hue-rotate(180deg)' }, { filter: 'hue-rotate(0deg)' }],
          { duration: 1800, easing: 'ease-in-out' }
        );
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <Loader />
      <Cursor />
      <ScrollProgress />
      <div className="bg-grid"></div>
      <canvas id="hero-canvas" className="scene-canvas"></canvas>
      <div className="scene-dim"></div>
      <Nav />
      <main>
        <Hero />
        <About />
        <Skills />
        <Projects />
        <Experience />
        <Testimonials />
        <Contact />
      </main>
      <Footer />
      <div id="konami-toast" className="konami-toast">↑ ↑ ↓ ↓ ◉ unlocked · welcome, traveler</div>
    </>
  );
}

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