// Main app
const { useState: useStateA, useEffect: useEffectA } = React;

function Nav() {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <div className="brand">
          <div className="brand-mark">T</div>
          <div className="brand-name">Tellustek 證券<small>2026 交易王大賽</small></div>
        </div>
        <div className="nav-links">
          <a href="#rules">活動辦法</a>
          <a href="#prizes">獎項</a>
          <a href="#leaderboard">排行榜</a>
          <a href="#faq">常見問題</a>
        </div>
        <div className="nav-cta">
          <button className="btn btn-ghost">登入</button>
          <button className="btn btn-gold">立即報名</button>
        </div>
      </div>
    </nav>
  );
}

function App() {
  const [state, setState] = useStateA(window.TWEAK_DEFAULTS || { heroBg: 'grid' });
  const [tweaksVisible, setTweaksVisible] = useStateA(false);

  useEffectA(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksVisible(true);
      else if (e.data.type === '__deactivate_edit_mode') setTweaksVisible(false);
      else if (e.data.type === '__edit_mode_set_keys' && e.data.edits) {
        setState(s => ({ ...s, ...e.data.edits }));
      }
    };
    window.addEventListener('message', handler);
    // announce availability
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e){}
    return () => window.removeEventListener('message', handler);
  }, []);

  // reveal-on-scroll
  useEffectA(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [state]);

  return (
    <>
      <Nav />
      <Hero heroBg={state.heroBg} />
      <Rules />
      <Prizes />
      <Leaderboard />
      <FAQ />
      <Footer />
      <TweaksPanel state={state} setState={setState} visible={tweaksVisible} onClose={() => setTweaksVisible(false)} />
    </>
  );
}

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