// Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#009775",
  "accentColor": "#40C1AC",
  "yellowColor": "#F1C400",
  "showPattern": true,
  "rounded": true
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--green-primary", tweaks.primaryColor);
    r.setProperty("--green-mint", tweaks.accentColor);
    r.setProperty("--yellow", tweaks.yellowColor);
    r.setProperty("--radius-lg", tweaks.rounded ? "28px" : "8px");
    r.setProperty("--radius-md", tweaks.rounded ? "16px" : "4px");
  }, [tweaks]);

  // reveal-on-scroll observer
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Header />
      <main>
        <Hero />
        <Quiz />
        <Servicios />
        <Proceso />
        <Logos />
        <Rubros />
        <Reviews />
        <Contacto />
      </main>
      <Footer />
      <WhatsAppFloat />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Colores">
          <TweakColor label="Verde principal" value={tweaks.primaryColor} onChange={v => setTweak("primaryColor", v)}/>
          <TweakColor label="Verde menta" value={tweaks.accentColor} onChange={v => setTweak("accentColor", v)}/>
          <TweakColor label="Amarillo" value={tweaks.yellowColor} onChange={v => setTweak("yellowColor", v)}/>
        </TweakSection>
        <TweakSection title="Estilo">
          <TweakToggle label="Bordes redondeados" value={tweaks.rounded} onChange={v => setTweak("rounded", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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