// hero.jsx — sticky nav + hero with 3 switchable variants and an interactive lantern
const { useRef: hUseRef, useEffect: hUseEffect, useState: hUseState } = React;

function SteamIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2a10 10 0 0 0-9.96 9.2l5.37 2.22a2.8 2.8 0 0 1 1.6-.5l2.39-3.46v-.05a3.73 3.73 0 1 1 3.73 3.73h-.09l-3.4 2.43a2.8 2.8 0 0 1-5.58.2L2.2 14.2A10 10 0 1 0 12 2zM8.3 17.6l-1.23-.5a2.1 2.1 0 0 0 3.86-1.62 2.1 2.1 0 0 0-2.78-1.12l1.27.53a1.55 1.55 0 1 1-1.19 2.86zm6.13-5.36a2.49 2.49 0 1 1 2.49-2.49 2.49 2.49 0 0 1-2.49 2.49zm0-3.73a1.25 1.25 0 1 0 1.25 1.24A1.25 1.25 0 0 0 14.43 8.5z"/>
    </svg>
  );
}

function Nav() {
  const [scrolled, setScrolled] = hUseState(false);
  hUseEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="nav-inner">
        <a className="brand" href="#top">
          <img className="brand-mark" src="assets/lantern.png" alt="Quantum Lantern Studios"/>
          <span className="brand-name"><b>QUANTUM</b> LANTERN</span>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#botanitech">Botanitech</a>
          <a className="nav-link" href="#castle-defender">Castle Defender</a>
          <a className="nav-link" href="#studio">The Studio</a>
          <a className="nav-link" href="#devlog">Devlog</a>
        </div>
        <a className="btn btn-gold" href="#botanitech"
           onMouseMove={(e) => { const r = e.currentTarget.getBoundingClientRect();
             e.currentTarget.style.setProperty('--mx', (e.clientX - r.left) + 'px');
             e.currentTarget.style.setProperty('--my', (e.clientY - r.top) + 'px'); }}>
          <SteamIcon/> Wishlist Botanitech
        </a>
      </div>
    </nav>
  );
}

function Lantern({ showRings }) {
  const [sparks, setSparks] = hUseState([]);
  const [lit, setLit] = hUseState(false);
  function burst() {
    setLit(true);
    const next = Array.from({ length: 14 }, (_, i) => ({
      id: Date.now() + i,
      a: Math.random() * Math.PI * 2,
      d: 40 + Math.random() * 120,
      s: 3 + Math.random() * 4,
      delay: Math.random() * 120,
    }));
    setSparks(next);
    setTimeout(() => setLit(false), 600);
    setTimeout(() => setSparks([]), 1300);
  }
  return (
    <div className="hero-stage">
      {showRings && (
        <div className="orbit-rings" aria-hidden="true">
          <div className="ring r1"><span className="dot"></span></div>
          <div className="ring r2"><span className="dot"></span></div>
          <div className="ring r3"></div>
        </div>
      )}
      <div className="lantern-aura" style={lit ? { opacity: 1, transform: 'translate(-50%,-50%) scale(1.18)' } : null}></div>
      <button className="lantern-btn" onClick={burst} aria-label="Light the lantern" title="Light the lantern">
        <div className="hero-lantern">
          <img src="assets/lantern.png" alt="The Quantum Lantern" draggable="false"/>
        </div>
      </button>
      {sparks.map(s => (
        <span key={s.id} className="ember-spark" style={{
          '--a': s.a + 'rad', '--d': s.d + 'px', width: s.s + 'px', height: s.s + 'px',
          animationDelay: s.delay + 'ms',
        }}></span>
      ))}
    </div>
  );
}

function HeroCopy() {
  return (
    <div className="hero-copy">
      <div className="hero-eyebrow eyebrow">Quantum Lantern Studios <span className="idx">· EST. 2021</span></div>
      <h1 className="hero-title">Worlds worth<br/><span className="glow">staying&nbsp;up</span> for.</h1>
      <p className="hero-sub">A tiny independent studio crafting cosy, curious games where technology and nature glow side by side — small worlds, warmly lit.</p>
      <div className="hero-cta">
        <a className="btn btn-gold" href="#botanitech"
           onMouseMove={(e) => { const r = e.currentTarget.getBoundingClientRect();
             e.currentTarget.style.setProperty('--mx', (e.clientX - r.left) + 'px');
             e.currentTarget.style.setProperty('--my', (e.clientY - r.top) + 'px'); }}>
          <SteamIcon/> Wishlist Botanitech
        </a>
        <a className="btn btn-ghost" href="#studio">Meet the studio</a>
      </div>
    </div>
  );
}

function Hero({ variant = 'orbit' }) {
  const stageRef = hUseRef(null);
  // mouse parallax for the lantern
  hUseEffect(() => {
    let raf = 0; const cur = { x: 0, y: 0 }; const tgt = { x: 0, y: 0 };
    const lantern = stageRef.current ? stageRef.current.querySelector('.hero-lantern') : null;
    if (!lantern) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    function move(e) {
      tgt.x = (e.clientX / window.innerWidth - 0.5);
      tgt.y = (e.clientY / window.innerHeight - 0.5);
    }
    function loop() {
      cur.x += (tgt.x - cur.x) * 0.06;
      cur.y += (tgt.y - cur.y) * 0.06;
      lantern.style.setProperty('--px', (cur.x * 22) + 'px');
      lantern.style.setProperty('--py', (cur.y * 18) + 'px');
      lantern.style.transform = `translate(${cur.x * 22}px, ${cur.y * 18}px)`;
      raf = requestAnimationFrame(loop);
    }
    window.addEventListener('mousemove', move, { passive: true });
    raf = requestAnimationFrame(loop);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('mousemove', move); };
  }, [variant]);

  return (
    <header className={'hero hero--' + variant} id="top">
      <div className="hero-inner" ref={stageRef}>
        {variant === 'orbit' ? (
          <React.Fragment>
            <Lantern showRings={true}/>
            <HeroCopy/>
          </React.Fragment>
        ) : variant === 'editorial' ? (
          <React.Fragment>
            <HeroCopy/>
            <Lantern showRings={false}/>
            <span className="hero-coords" style={{ top: '12%', right: '2%' }}>52.204° N / 0.118° E</span>
            <span className="hero-coords" style={{ bottom: '8%', left: '1%' }}>SYS ▸ LANTERN.v4 ▸ STABLE</span>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <Lantern showRings={false}/>
            <HeroCopy/>
            <span className="hero-coords" style={{ top: '14%', left: '1%' }}>◦ ORBIT 0x1F · DRIFTING</span>
          </React.Fragment>
        )}
      </div>
      <a className="scroll-cue" href="#botanitech" aria-label="Scroll">
        <span>Scroll</span><span className="bar"></span>
      </a>
    </header>
  );
}

window.Hero = Hero;
window.Nav = Nav;
window.SteamIcon = SteamIcon;