// ============================================================
// AgenticX Landing v3 — App Root (Ascone style)
// build: refresh
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "emphasisColor": "forest",
  "showAICloud": true
}/*EDITMODE-END*/;

const nav = [
  { label: 'Recursos', href: '#features' },
  { label: 'Produtos', href: '#products' },
  { label: 'Preços',   href: '#precos' },
  { label: 'Sobre',    href: '#about' },
  { label: 'FAQ',      href: '#faq' },
  { label: 'Contato',  href: '#contact' },
];

// Hash router: '#precos' (e sub-âncoras '#precos-*') -> página comercial.
function useHashRoute() {
  const [hash, setHash] = React.useState(() => window.location.hash);
  React.useEffect(() => {
    const onHash = () => setHash(window.location.hash);
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return hash;
}

function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  const hash = useHashRoute();
  const isPricing = hash.indexOf('#precos') === 0;
  const legalHashes = window.LEGAL_HASHES || [];
  const isLegal = legalHashes.indexOf(hash.replace('#', '')) >= 0;
  const isCliente = hash.indexOf('#cliente') === 0;
  const auth = useAuth();

  // Scroll ao trocar de rota / âncora (offset do header sticky ~80px).
  React.useEffect(() => {
    const id = (hash || '').replace('#', '');
    if (!id) { window.scrollTo(0, 0); return; }
    // Rotas legais e da área do cliente sempre renderizam no topo.
    if (legalHashes.indexOf(id) >= 0 || id.indexOf('cliente') === 0) { window.scrollTo(0, 0); return; }
    // Espera um tick para a página alvo renderizar antes de rolar até a âncora.
    const t = setTimeout(() => {
      const el = document.getElementById(id);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top: y < 0 ? 0 : y, behavior: 'smooth' });
      } else if (id === 'precos') {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    }, 60);
    return () => clearTimeout(t);
  }, [hash, isPricing, isLegal, isCliente]);

  // Emphasis (serif italic) color override
  React.useEffect(() => {
    const map = { forest: '#1C3F3A', teal: '#2F6A62', black: '#000000' };
    document.querySelectorAll('.font-em').forEach(el => {
      // skip ones meant to stay cream (on dark)
      if (el.classList.contains('text-cream')) return;
      el.style.color = map[tweaks.emphasisColor] || '#1C3F3A';
    });
  }, [tweaks.emphasisColor, isPricing, isLegal, isCliente, hash]);

  const TP = window.TweaksPanel;
  const TSection = window.TweakSection;
  const TRadio = window.TweakRadio;
  const TToggle = window.TweakToggle;

  return (
    <div className="min-h-screen bg-white">
      <Header nav={nav} auth={auth}/>
      {isCliente ? (
        <ClienteRouter hash={hash} auth={auth}/>
      ) : isPricing ? (
        <PricingPage/>
      ) : isLegal ? (
        <LegalPage activeHash={hash}/>
      ) : (
        <main>
          <Hero/>
          {tweaks.showAICloud && <AICloud/>}
          <About/>
          <Values/>
          <Products/>
          <Stats/>
          <FAQ/>
          <CTA/>
          <Contact/>
        </main>
      )}
      <Footer/>

      {TP && (
        <TP title="Tweaks">
          <TSection label="Tipografia">
            <TRadio label="Cor das ênfases" value={tweaks.emphasisColor} options={[
              {value:'forest', label:'Verde'},
              {value:'teal', label:'Teal'},
              {value:'black', label:'Preto'},
            ]} onChange={(v) => setTweak('emphasisColor', v)}/>
          </TSection>
          <TSection label="Seções">
            <TToggle label="Mostrar faixa de IAs" value={tweaks.showAICloud} onChange={(v) => setTweak('showAICloud', v)}/>
          </TSection>
        </TP>
      )}
    </div>
  );
}

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