// app.jsx - root
const { useState: useStateA, useEffect: useEffectA } = React;

// Hash-based routes recognized by the SPA. Each "route" is a hash that, when
// detected, swaps the main content for a dedicated page (header/footer stay).
const PARTNERS_ROUTES = ['#socios', '#partners'];
// Solutions routes: any hash starting with #solucoes (or #solutions) keeps
// the SolutionsPage mounted. The remainder of the hash is used as an anchor
// id by the page itself for in-page scrolling (#solucoes-estrategia-competitiva).
const isSolutionsRoute = (h) => /^#sol(u[çc]?[oõ]es|utions)/i.test(h);
// Method routes: #metodo, #metodo-etapa-{slug}, #metodo-principio-{slug}.
const isMethodRoute = (h) => /^#m[eé]todo|^#method/i.test(h);
// Blog routes: #blog (index) and #blog-{slug} (single article).
const isBlogRoute = (h) => /^#blog(-|$)/i.test(h);
// Sectors routes: #setores (index) and #setores-{slug} (single sector deep dive).
const isSectorsRoute = (h) => /^#set(ores|tors)(-|$)/i.test(h);
// Associates program route: #associados (PT) or #associates (EN).
const ASSOCIATES_ROUTES = ['#associados', '#associates'];

const App = () => {
  const [lang, setLang] = useStateA('pt');
  const [tweaks, setTweaks] = useStateA(window.__TWEAK_DEFAULTS);
  const [tweaksActive, setTweaksActive] = useStateA(false);
  // Hash route. Updates on hashchange. Empty string = home.
  const [route, setRoute] = useStateA(window.location.hash || '');

  const t = window.TRANSLATIONS[lang];

  // Apply tweaks to body data-attrs
  useEffectA(() => {
    document.body.dataset.accent = tweaks.accentIntensity || 'bold';
    document.body.dataset.hero = tweaks.heroMode || 'editorial';
    document.body.dataset.cases = tweaks.casesMode || 'feature';
  }, [tweaks]);

  // Tweaks protocol: listen first, then announce
  useEffectA(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksActive(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksActive(false);
    };
    window.addEventListener('message', onMsg);
    try {
      window.parent.postMessage({type:'__edit_mode_available'}, '*');
    } catch(e){}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Track hash route changes (e.g. user clicks Fundadores in header)
  useEffectA(() => {
    const onHash = () => setRoute(window.location.hash || '');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Reflect current route on body for CSS hooks (e.g. dark header on partners page)
  useEffectA(() => {
    const r = PARTNERS_ROUTES.includes(route)
      ? 'partners'
      : isSolutionsRoute(route)
        ? 'solutions'
        : isMethodRoute(route)
          ? 'method'
          : isBlogRoute(route)
            ? 'blog'
            : isSectorsRoute(route)
              ? 'sectors'
              : ASSOCIATES_ROUTES.includes(route)
                ? 'associates'
                : 'home';
    document.body.dataset.route = r;
  }, [route]);

  const isPartnersPage = PARTNERS_ROUTES.includes(route);
  const isSolutionsPage = isSolutionsRoute(route);
  const isMethodPage = isMethodRoute(route);
  const isBlogPage = isBlogRoute(route);
  const isSectorsPage = isSectorsRoute(route);
  const isAssociatesPage = ASSOCIATES_ROUTES.includes(route);

  return (
    <LangContext.Provider value={{ lang, setLang, t }}>
      <a href="#main" className="skip-link">
        {lang === 'pt' ? 'Pular para o conteúdo' : 'Skip to main content'}
      </a>
      <VisualFXLayer/>
      <Header/>
      <main id="main" tabIndex="-1">
        {isPartnersPage ? (
          <PartnersPage/>
        ) : isSolutionsPage ? (
          <SolutionsPage/>
        ) : isMethodPage ? (
          <MethodPage/>
        ) : isBlogPage ? (
          <BlogPage/>
        ) : isSectorsPage ? (
          <SectorsPage/>
        ) : isAssociatesPage ? (
          <AssociatesPage/>
        ) : (
          <>
            <Hero/>
            <Manifesto/>
            <Services/>
            <Approach/>
            <Sectors/>
            <ClientsStrip/>
            <Contact/>
          </>
        )}
      </main>
      <Footer/>
      <CookieBanner/>
      <LegalModals/>
      <TweaksPanel active={tweaksActive} tweaks={tweaks} setTweaks={setTweaks}/>
    </LangContext.Provider>
  );
};

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