/* app.jsx — composition, tweaks, scroll-reveal */
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "heroVariant": "queue"
}/*EDITMODE-END*/;

function useReveal() {
  useEffectA(() => {
    const els = Array.from(document.querySelectorAll(".reveal:not(.in)"));
    if (!("IntersectionObserver" in window) || els.length === 0) {
      els.forEach((e) => e.classList.add("in")); return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

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

  useEffectA(() => {
    document.documentElement.setAttribute("data-accent", t.accent);
  }, [t.accent]);

  useReveal();

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero variant={t.heroVariant} />
        <Problem />
        <Solution />
        <Execute />
        <Credits />
        <Switch />
        <Compare />
        <Faq />
        <FinalCta />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent" value={accentHex(t.accent)}
          options={["#5cc6f5", "#a8e05a", "#b69cf0", "#f1f1f3"]}
          onChange={(v) => setTweak("accent", hexToAccent(v))} />
        <TweakSection label="Hero" />
        <TweakRadio label="Hero visual" value={t.heroVariant}
          options={["queue", "type"]}
          onChange={(v) => setTweak("heroVariant", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

const ACCENT_MAP = { blue:"#5cc6f5", lime:"#a8e05a", violet:"#b69cf0", mono:"#f1f1f3" };
function accentHex(a){ return ACCENT_MAP[a] || ACCENT_MAP.blue; }
function hexToAccent(h){ return Object.keys(ACCENT_MAP).find((k) => ACCENT_MAP[k] === h) || "blue"; }

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