// app.jsx — Instituto Jurídico Juiz Odilon

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "contemporaneo",
  "density": "regular",
  "serifWeight": 500,
  "monogramaPresence": "destaque",
  "accentTone": "navyGold"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState(() => {
    const h = (window.location.hash || "").replace("#", "");
    return ["home", "cursos", "publicacoes", "sobre", "contato"].includes(h) ? h : "home";
  });

  // Apply tweaks to CSS variables
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--serif-weight-display", t.serifWeight);
    root.style.setProperty("--section-y", t.density === "compact" ? "80px" : t.density === "espaçoso" ? "160px" : "120px");

    // Tone palette
    if (t.accentTone === "noite") {
      root.style.setProperty("--navy-900", "#0a0a14");
      root.style.setProperty("--navy-800", "#13131e");
      root.style.setProperty("--navy-700", "#1f1f2e");
    } else if (t.accentTone === "navyVerde") {
      root.style.setProperty("--navy-900", "#0c2018");
      root.style.setProperty("--navy-800", "#102a20");
      root.style.setProperty("--navy-700", "#173a2e");
    } else {
      root.style.setProperty("--navy-900", "#0a1a33");
      root.style.setProperty("--navy-800", "#0f2444");
      root.style.setProperty("--navy-700", "#173258");
    }
  }, [t.serifWeight, t.density, t.accentTone]);

  // Sync hash + scroll
  const handleNavigate = (id) => {
    setPage(id);
    window.history.replaceState(null, "", `#${id}`);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || "").replace("#", "");
      if (["home", "cursos", "publicacoes", "sobre", "contato"].includes(h)) setPage(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // dark nav on hero/dark page heads
  const darkNav = page === "home"
    ? false
    : true; // page-head is dark on all interior pages, but nav should be light overlay... let's keep light on top.

  return (
    <div data-screen-label={page}>
      <Nav current={page} onNavigate={handleNavigate} dark={false} />

      {page === "home" && <HomePage tweaks={t} onNavigate={handleNavigate} />}
      {page === "cursos" && <CursosPage onNavigate={handleNavigate} />}
      {page === "publicacoes" && <PublicacoesPage onNavigate={handleNavigate} />}
      {page === "sobre" && <SobrePage onNavigate={handleNavigate} />}
      {page === "contato" && <ContatoPage />}

      <Footer onNavigate={handleNavigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Direção do Hero (Home)" />
        <TweakRadio
          label="Variante"
          value={t.heroVariant}
          options={[
            { value: "contemporaneo", label: "Contemporâneo" },
            { value: "solene", label: "Solene" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />

        <TweakSection label="Tipografia" />
        <TweakRadio
          label="Peso serif (display)"
          value={t.serifWeight}
          options={[
            { value: 400, label: "Light" },
            { value: 500, label: "Regular" },
            { value: 600, label: "Bold" },
          ]}
          onChange={(v) => setTweak("serifWeight", Number(v))}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Densidade"
          value={t.density}
          options={[
            { value: "compact", label: "Compacto" },
            { value: "regular", label: "Regular" },
            { value: "espaçoso", label: "Espaçoso" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />

        <TweakSection label="Monograma" />
        <TweakRadio
          label="Presença do IJO de fundo"
          value={t.monogramaPresence}
          options={[
            { value: "minimo", label: "Mínimo" },
            { value: "sutil", label: "Sutil" },
            { value: "destaque", label: "Destaque" },
          ]}
          onChange={(v) => setTweak("monogramaPresence", v)}
        />

        <TweakSection label="Tom da paleta" />
        <TweakRadio
          label="Acento"
          value={t.accentTone}
          options={[
            { value: "navyGold", label: "Navy + Dourado" },
            { value: "navyVerde", label: "Verde Tribunal" },
            { value: "noite", label: "Noite Profunda" },
          ]}
          onChange={(v) => setTweak("accentTone", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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