// app.jsx — Router + Page assembly + Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"accentHex":"#06B6D4","heroDark":false,"fontPair":"newsreader-geist"}/*EDITMODE-END*/;

const ACCENT_MAP = {"#06B6D4":"cyan","#14B88A":"green","#6D5BE3":"purple"};

const FONT_PAIRS = {
  "newsreader-geist":{label:"Newsreader + Geist",display:'"Newsreader","Source Serif 4",Georgia,serif',sans:'"Geist","Manrope",ui-sans-serif,system-ui,sans-serif'},
  "instrument-manrope":{label:"Instrument Serif + Manrope",display:'"Instrument Serif","Newsreader",Georgia,serif',sans:'"Manrope","Geist",ui-sans-serif,system-ui,sans-serif'},
  "newsreader-dmsans":{label:"Newsreader + DM Sans",display:'"Newsreader",Georgia,serif',sans:'"DM Sans","Geist",ui-sans-serif,system-ui,sans-serif'},
};

const PAGE_TITLES = {
  "/":"Advogado AI — IA aplicada à advocacia",
  "/sobre":"Sobre — Advogado AI",
  "/cursos":"Cursos — Advogado AI",
  "/conteudos":"Conteúdos — Advogado AI",
  "/materiais":"Materiais Gratuitos — Advogado AI",
  "/ferramentas":"Ferramentas — Advogado AI",
  "/contato":"Contato — Advogado AI",
  "/privacidade":"Política de Privacidade — Advogado AI",
  "/termos":"Termos de Uso — Advogado AI",
};

function useHashRoute() {
  const [route, setRoute] = React.useState(() => {
    const h = window.location.hash.replace('#','') || '/';
    return h;
  });
  React.useEffect(() => {
    const onChange = () => {
      const h = window.location.hash.replace('#','') || '/';
      setRoute(h);
      window.scrollTo({ top: 0, behavior: 'instant' });
      document.title = PAGE_TITLES[h] || PAGE_TITLES["/"];
    };
    window.addEventListener('hashchange', onChange);
    document.title = PAGE_TITLES[route] || PAGE_TITLES["/"];
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return route;
}

function HomePage({ heroDark }) {
  return (
    <>
      <Hero dark={heroDark}/>
      <Audience/>
      <Benefits/>
      <Authority/>
      <Videos/>
      <Trails/>
      <Materials/>
      <Courses/>
      <Articles/>
      <Differentiators/>
      <Newsletter/>
    </>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useHashRoute();

  React.useEffect(() => {
    const key = ACCENT_MAP[String(t.accentHex).toUpperCase()] || "cyan";
    document.body.setAttribute("data-accent", key);
  }, [t.accentHex]);

  React.useEffect(() => {
    const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS["newsreader-geist"];
    document.documentElement.style.setProperty("--font-display", pair.display);
    document.documentElement.style.setProperty("--font-sans", pair.sans);
  }, [t.fontPair]);

  let page;
  switch(route) {
    case "/sobre": page = <SobrePage/>; break;
    case "/cursos": page = <CursosPage/>; break;
    case "/conteudos": page = <ConteudosPage/>; break;
    case "/materiais": page = <MateriaisPage/>; break;
    case "/ferramentas": page = <FerramentasPage/>; break;
    case "/contato": page = <ContatoPage/>; break;
    case "/privacidade": page = <PrivacidadePage/>; break;
    case "/termos": page = <TermosPage/>; break;
    default: page = <HomePage heroDark={t.heroDark}/>; break;
  }

  return (
    <>
      <Header/>
      {page}
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tema do Hero"/>
        <TweakRadio label="Modo" value={t.heroDark?"Escuro":"Claro"} options={["Claro","Escuro"]} onChange={(v)=>setTweak("heroDark",v==="Escuro")}/>
        <TweakSection label="Cor de destaque"/>
        <TweakColor label="Accent" value={t.accentHex} options={["#06B6D4","#14B88A","#6D5BE3"]} onChange={(v)=>setTweak("accentHex",v)}/>
        <TweakSection label="Tipografia"/>
        <TweakSelect label="Par de fontes" value={t.fontPair} options={Object.entries(FONT_PAIRS).map(([value,p])=>({value,label:p.label}))} onChange={(v)=>setTweak("fontPair",v)}/>
      </TweaksPanel>
    </>
  );
}

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