// App router + theme + locale state
const { useState, useEffect } = React;

function useHashRoute() {
  const [route, setRoute] = useState(() => window.location.hash.slice(1) || '/');
  useEffect(() => {
    const onHash = () => {
      const r = window.location.hash.slice(1) || '/';
      setRoute(r);
      // scroll to anchor if present
      const [path, hash] = r.split('#');
      if (hash) {
        setTimeout(() => {
          const el = document.getElementById(hash);
          if (el) el.scrollIntoView({ behavior: 'smooth' });
        }, 80);
      } else {
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const navigate = (to) => {
    window.location.hash = to;
  };
  return [route, navigate];
}

function App() {
  const [route, navigate] = useHashRoute();
  const [locale, setLocale] = useState(() => localStorage.getItem('fluicash-locale') || 'pt');
  const [theme, setTheme] = useState(() => localStorage.getItem('fluicash-theme') || 'light');

  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
    localStorage.setItem('fluicash-theme', theme);
  }, [theme]);
  useEffect(() => {
    document.documentElement.lang = locale === 'pt' ? 'pt-BR' : 'en';
    localStorage.setItem('fluicash-locale', locale);
  }, [locale]);

  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  // Pages — most fully translated; for EN fallback on a few deeper pages we still render PT (the system supports it; these specific deep pages stayed PT for the prototype)
  const path = route.split('#')[0];

  const ENonly = locale === 'en';
  // Pages with full EN: /, /pme, /agents (and home + hub heroes per spec).
  // Other pages render PT-shaped content but with whatever EN strings we did include — for ones we didn't translate we show placeholder in EN.
  const enFullySupported = (p) => ['/', '/pme', '/agents', '/partners', '/contact', '/about', '/blog', '/careers', '/how']
    .some(x => p === x || p.startsWith(x + '/'));

  let body;
  if (path === '/') body = <HomePage locale={locale} navigate={navigate} />;
  else if (path === '/pme') body = <PmeHub locale={locale} navigate={navigate} />;
  else if (path.startsWith('/pme/')) {
    let slug = path.split('/')[2];
    // Aliases das rotas antigas (pré-pivot saúde) -> novas
    const ALIAS = { antecipacao: 'convenios', adquirencia: 'cartao' };
    if (ALIAS[slug]) slug = ALIAS[slug];
    // /pme/gestao virou seção dentro de /pme
    if (slug === 'gestao') { navigate('/pme'); body = <PmeHub locale={locale} navigate={navigate} />; }
    else body = <PmeProductPage slug={slug} locale={locale} navigate={navigate} />;
  }
  // /agents and /agents/* removed in v2 — redirect any incoming traffic to home
  else if (path === '/agents' || path.startsWith('/agents/')) {
    if (typeof window !== 'undefined' && window.location.hash !== '#/') {
      window.location.replace(window.location.pathname + '#/');
    }
    body = <HomePage locale={locale} navigate={navigate} />;
  }
  else if (path === '/partners') body = <PartnersHub locale={locale} navigate={navigate} />;
  else if (path === '/how') body = <HowPage locale={locale} navigate={navigate} />;
  else if (path === '/about') body = <AboutPage locale={locale} navigate={navigate} />;
  else if (path === '/careers') body = <CareersPage locale={locale} navigate={navigate} />;
  else if (path === '/blog') body = <BlogPage locale={locale} navigate={navigate} />;
  else if (path === '/contact') body = <ContactPage locale={locale} navigate={navigate} />;
  else if (path.startsWith('/legal/')) {
    const slug = path.split('/')[2];
    body = <LegalPage slug={slug} locale={locale} navigate={navigate} />;
  }
  else body = <HomePage locale={locale} navigate={navigate} />;

  return (
    <>
      <Header route={path} navigate={navigate} locale={locale} setLocale={setLocale} theme={theme} toggleTheme={toggleTheme} />
      {body}
      <Footer locale={locale} setLocale={setLocale} theme={theme} toggleTheme={toggleTheme} navigate={navigate} />
    </>
  );
}

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