// app.jsx — composition + tweaks for Ultra 3D Brasil
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "impressao",
  "accent": "#c9a86a",
  "displayFont": "Playfair Display",
  "headline": ""
}/*EDITMODE-END*/;

function useScrollReveal() {
  useEffectA(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    window.__revealScan = () => document.querySelectorAll(".r:not(.in)").forEach((el) => io.observe(el));
    window.__revealScan();
    return () => io.disconnect();
  }, []);
}

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

  const rootStyle = {
    "--accent": t.accent,
    "--display": `'${t.displayFont}'`,
  };

  return (
    <div style={rootStyle}>
      <Header />
      <Hero variant={t.hero} headline={t.headline} />
      <Marquee />
      <Catalog />
      <HowItWorks />
      <Customization />
      <About />
      <Reviews />
      <Footer />
      <WAFloat />

      <TweaksPanel>
        <TweakSection label="Abertura (Hero)" />
        <TweakRadio
          label="Estilo do hero"
          value={t.hero}
          options={["impressao", "pedestal"]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakText
          label="Título — use / pra parte dourada"
          value={t.headline}
          placeholder="Personagens que saem da tela / e ganham forma."
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakSection label="Estilo visual" />
        <TweakColor
          label="Cor de destaque"
          value={t.accent}
          options={["#c9a86a", "#b08d57", "#4d4dab", "#6f8f6a"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Fonte dos títulos"
          value={t.displayFont}
          options={["Playfair Display", "Cormorant Garamond"]}
          onChange={(v) => setTweak("displayFont", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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