/* Crax Media — main app */

const { useEffect: useEffectApp } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffectApp(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.density = t.density;
    if (t.accent) document.documentElement.style.setProperty("--orange", t.accent);
  }, [t.theme, t.density, t.accent]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <Nav onContact={() => scrollTo("contacto")} />
      <Hero photoStyle={t.photoStyle} />
      <Servicios photoStyle={t.photoStyle} />
      <Portafolio />
      <Nosotros />
      <Contacto />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tema">
          <TweakRadio label="Modo" value={t.theme}
            options={[{ value: "light", label: "Claro" }, { value: "dark", label: "Oscuro" }]}
            onChange={v => setTweak("theme", v)} />
        </TweakSection>
        <TweakSection label="Foto del arco">
          <TweakRadio label="Estilo" value={t.photoStyle}
            options={[
              { value: "arch-sunset", label: "Sunset" },
              { value: "studio", label: "Studio" },
              { value: "stripes", label: "Líneas" },
            ]}
            onChange={v => setTweak("photoStyle", v)} />
        </TweakSection>
        <TweakSection label="Densidad">
          <TweakRadio label="Espaciado" value={t.density}
            options={[
              { value: "compact", label: "Apretado" },
              { value: "default", label: "Normal" },
              { value: "cozy", label: "Amplio" },
            ]}
            onChange={v => setTweak("density", v)} />
        </TweakSection>
        <TweakSection label="Acento">
          <TweakColor label="Color" value={t.accent}
            options={["#ee8021", "#d96a0e", "#ec5c2c", "#f5a738"]}
            onChange={v => setTweak("accent", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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