// Marketing app — state management, hash routing (SGX-002), section router
const { useState: useAppState, useEffect: useAppEffect, useCallback: useAppCallback } = React;

const VALID_FILTERS = ['all','geo','aeo','ready','read','tech'];

function MarketingApp() {
  const [active, setActiveState] = useAppState('overview');
  const [faqFilter, setFaqFilter] = useAppState('all');
  const [faqOpenId, setFaqOpenId] = useAppState(null);
  const [paletteOpen, setPaletteOpen] = useAppState(false);

  // Stable setActive that resets FAQ state on section change
  const setActive = useAppCallback((id) => {
    if (id !== 'faq') {
      setFaqFilter('all');
      setFaqOpenId(null);
    }
    setActiveState(id);
  }, []);

  // SGX-002: parse hash → initial state on mount
  useAppEffect(() => {
    const parse = () => {
      const hash = window.location.hash;
      if (!hash || hash === '#' || !hash.startsWith('#/')) return;
      const path = hash.slice(2);
      const parts = path.split('/');
      const section = parts[0];
      if (section === 'faq') {
        setActiveState('faq');
        if (parts[1] && VALID_FILTERS.includes(parts[1])) setFaqFilter(parts[1]);
        if (parts[2]) setFaqOpenId(parts[2]);
      } else if (PAGE_FLOW.includes(section) || section.startsWith('docs:')) {
        setActiveState(section);
      }
    };
    parse();
    window.addEventListener('hashchange', parse);
    return () => window.removeEventListener('hashchange', parse);
  }, []);

  // SGX-002: update hash when state changes
  useAppEffect(() => {
    let hash;
    if (active === 'faq') {
      if (faqOpenId) {
        hash = `#/faq/${faqFilter}/${faqOpenId}`;
      } else {
        hash = `#/faq/${faqFilter}`;
      }
    } else {
      hash = `#/${active}`;
    }
    if (window.location.hash !== hash) {
      history.replaceState(null, '', hash);
    }
  }, [active, faqFilter, faqOpenId]);

  // Scroll to top when section changes
  useAppEffect(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [active]);

  // SGX-003: global ⌘K / Ctrl-K shortcut
  useAppEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        setPaletteOpen(p => !p);
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  let body = null;
  if      (active === 'overview')       body = <SectionOverview setActive={setActive} />;
  else if (active === 'modules')        body = <SectionModules setActive={setActive} />;
  else if (active === 'outputs')        body = <SectionOutputs setActive={setActive} />;
  else if (active === 'storyline')      body = <SectionStoryline setActive={setActive} />;
  else if (active === 'why')            body = <SectionWhy setActive={setActive} />;
  else if (active === 'teams')          body = <SectionTeams setActive={setActive} />;
  else if (active === 'services')       body = <SectionServices setActive={setActive} />;
  else if (active === 'start')          body = <SectionStart setActive={setActive} />;
  else if (active === 'about')          body = <SectionAbout setActive={setActive} />;
  else if (active === 'concepts')       body = <SectionConcepts setActive={setActive} />;
  else if (active === 'faq')            body = <SectionFAQ setActive={setActive} filter={faqFilter} setFilter={setFaqFilter} openId={faqOpenId} setOpenId={setFaqOpenId} />;
  else if (active.startsWith('docs:'))  body = <SectionConcepts setActive={setActive} />;
  else                                  body = <SectionOverview setActive={setActive} />;

  return (
    <>
      <TopNav setActive={setActive} setPaletteOpen={setPaletteOpen} />
      {paletteOpen && (
        <SearchPalette
          onClose={() => setPaletteOpen(false)}
          setActive={setActive}
          setFaqOpenId={setFaqOpenId}
          setFaqFilter={setFaqFilter}
        />
      )}
      <div className="layout">
        <Sidebar active={active} setActive={setActive} />
        <main className="main">{body}</main>
      </div>
    </>
  );
}

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