// $HOPE landing — root composition
const { useEffect } = React;

function App() {
  useEffect(() => {
    // smooth-scroll offset for sticky header on hash links
    const onHash = (e) => {
      const target = e.target.closest('a[href^="#"]');
      if (!target) return;
      const id = target.getAttribute('href').slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
    };
    document.addEventListener('click', onHash);
    return () => document.removeEventListener('click', onHash);
  }, []);

  return (
    <div className="relative">
      <window.Navbar />
      <main>
        <window.Hero />
        <window.Divider label="◇ ABOUT ◇" />
        <window.About />
        <window.Divider label="◇ MISSION ◇" />
        <window.Mission />
        <window.Divider label="◇ MEMES ◇" />
        <window.Memes />
        <window.Divider label="◇ SHORTAGE ◇" />
        <window.Shortage />
        <window.Divider label="◇ SOCIAL ◇" />
        <window.Social />
      </main>
      <footer className="border-t border-hope-slime/15 py-8 text-center font-mono text-[10px] tracking-[0.3em] text-hope-cream/40">
        $HOPE — NOT FINANCIAL ADVICE — TRENCHES NEVER DIE
      </footer>
    </div>
  );
}

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