// App root — handles routing between home and style pages, injects global styles.
const { useState: useS_a, useEffect: useE_a } = React;

const CASA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroBg": "ondas-cor"
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useS_a({ type: "home" });
  const [t, setTweak] = useTweaks(CASA_TWEAK_DEFAULTS);
  const scrollTo = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });

  useE_a(() => {
    const style = document.createElement("style");
    style.innerHTML = `
      @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; background: #000; }
      body {
        background: #000; color: #fff;
        -webkit-font-smoothing: antialiased;
        font-family: 'Barlow', sans-serif;
      }
      ::-webkit-scrollbar { width: 4px; }
      ::-webkit-scrollbar-track { background: #000; }
      ::-webkit-scrollbar-thumb { background: #2a2a2a; }
      button, select, input, textarea { font-family: 'Barlow', sans-serif; }
      select option, select optgroup { background: #111; color: #fff; }
      a { color: inherit; }
      @keyframes nudge {
        0%,100%{ transform: translateX(-50%) translateY(0) }
        50%   { transform: translateX(-50%) translateY(7px) }
      }
      @keyframes heroRise {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes heroFade {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      ${MOTION_CSS}
    `;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  return (
    <div style={{ background: C.bg, minHeight: "100vh" }}>
      <Nav page={page} setPage={setPage} scrollTo={scrollTo} />
      {page.type === "style"
        ? <StylePage artistId={page.artistId} styleId={page.styleId} setPage={setPage} />
        : <HomePage setPage={setPage} scrollTo={scrollTo} heroBg={t.heroBg} />
      }
      <WAFloating />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Fundo do hero" />
        <TweakSelect
          label="Estilo"
          value={t.heroBg}
          options={[
            { value: "pontos", label: "Pontos (malha animada)" },
            { value: "ondas", label: "Ondas (P&B)" },
            { value: "ondas-cor", label: "Ondas (colorido)" },
            { value: "imagem", label: "Imagem (placeholder)" },
            { value: "nenhum", label: "Nenhum (preto)" },
          ]}
          onChange={(v) => setTweak("heroBg", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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