// Top-level App, nav, RSVP state machine, tweaks panel
const { useEffect: aUseEffect, useState: aUseState } = React;

function Nav({ onRsvp, confirmed }) {
  const [mobileOpen, setMobileOpen] = aUseState(false);
  const close = () => setMobileOpen(false);
  return (
    <nav className="nav" data-mobile-open={mobileOpen}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-brand" style={{ textDecoration: 'none' }} onClick={close}>
          <img src="assets/wealthbridge-logo.png" alt="Wealth Bridge" />
          <span className="nav-brand-name">Wealth Bridge</span>
          <span className="mono" style={{ color: 'var(--forest-500)', marginLeft: 6, opacity: 0.6 }}>· Summit '26</span>
        </a>
        <div className="nav-links">
          <a href="#agenda">Agenda</a>
          <a href="#topics">Topics</a>
          <a href="#sponsors">Sponsorship</a>
          <a href="#venue">Venue</a>
          <a href="#" className="nav-cta" onClick={(e) => { e.preventDefault(); close(); onRsvp(); }}>
            {confirmed ? "✓ You're registered" : 'Reserve your seat'}
          </a>
        </div>
        <button
          type="button"
          className="nav-toggle"
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((v) => !v)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className="nav-drawer" aria-hidden={!mobileOpen}>
        <a href="#agenda" onClick={close}>Agenda</a>
        <a href="#topics" onClick={close}>Topics</a>
        <a href="#sponsors" onClick={close}>Sponsorship</a>
        <a href="#venue" onClick={close}>Venue</a>
        <a href="#" className="nav-drawer-cta" onClick={(e) => { e.preventDefault(); close(); onRsvp(); }}>
          {confirmed ? "✓ You're registered" : 'Reserve your seat'}
        </a>
      </div>
    </nav>
  );
}

function App() {
  const [rsvp, setRsvp] = aUseState(null); // null = not confirmed, object = confirmed
  const [sponsorView, setSponsorView] = aUseState({ mode: 'tiers', tier: '' });

  // Pin the visual variant to the production defaults that drive CSS variables.
  aUseEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-theme', TWEAK_DEFAULTS.theme);
    r.setAttribute('data-palette', TWEAK_DEFAULTS.palette);
    r.setAttribute('data-type', TWEAK_DEFAULTS.typePair);
    r.setAttribute('data-density', TWEAK_DEFAULTS.density);
    r.setAttribute('data-rsvp-state', rsvp ? 'confirmed' : 'default');
  }, [rsvp]);

  // Hash-scroll handler: React renders after the browser's initial scroll,
  // so direct hits to /#sponsors etc. need a manual scroll once the DOM exists.
  aUseEffect(() => {
    const scrollToHash = () => {
      const hash = window.location.hash.slice(1);
      if (!hash) return;
      const el = document.getElementById(hash);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    const onHashChange = () => scrollToHash();
    window.addEventListener('hashchange', onHashChange);
    const t1 = setTimeout(scrollToHash, 150);
    const t2 = setTimeout(scrollToHash, 600);
    return () => {
      window.removeEventListener('hashchange', onHashChange);
      clearTimeout(t1); clearTimeout(t2);
    };
  }, []);

  const scrollToRsvp = () => {
    document.getElementById('rsvp-anchor')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  const openSponsorForm = (tierName = '') => {
    setSponsorView({ mode: 'form', tier: tierName });
    requestAnimationFrame(() => {
      document.getElementById('sponsors')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  };
  const resetSponsorView = () => setSponsorView({ mode: 'tiers', tier: '' });

  return (
    <>
      <Nav onRsvp={scrollToRsvp} confirmed={!!rsvp} />

      <div id="rsvp-anchor"></div>

      {rsvp ? (
        <ConfirmHero data={rsvp} onUndo={() => setRsvp(null)} />
      ) : (
        <Hero
          onRsvpScroll={scrollToRsvp}
          rsvpCard={<RsvpCard onConfirm={(d) => { setRsvp(d); window.scrollTo({ top: 0, behavior: 'smooth' }); }} />}
        />
      )}

      <HostedBy />
      <Vision />
      <Agenda />
      <Topics />
      <Venue />
      <WhyAttend />
      <Sponsors view={sponsorView} onTierSelect={openSponsorForm} onBack={resetSponsorView} />
      <AboutWealthBridge />
      <FAQ />
      <Reserve onAttendeeClick={scrollToRsvp} onSponsorClick={() => openSponsorForm('')} />
      <Footer />

      {!rsvp && <StickyRsvp confirmed={!!rsvp} onClick={scrollToRsvp} />}
    </>
  );
}

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