/* global React, ReactDOM */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A8853A"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [quizOpen, setQuizOpen] = useStateA(false);
  const [legalKind, setLegalKind] = useStateA(null); // 'privacy' | 'terms' | null

  // accent CSS var
  useEffectA(() => {
    if (t.accent) {
      document.documentElement.style.setProperty("--gold", t.accent);
    } else {
      document.documentElement.style.removeProperty("--gold");
    }
  }, [t.accent]);

  // lock body scroll while quiz / legal open
  useEffectA(() => {
    const lock = quizOpen || legalKind;
    document.body.style.overflow = lock ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [quizOpen, legalKind]);

  // form-card → "open privacy" custom event bridge
  useEffectA(() => {
    function onOpen() { setLegalKind("privacy"); }
    window.addEventListener("openPrivacy", onOpen);
    return () => window.removeEventListener("openPrivacy", onOpen);
  }, []);

  const openQuiz = () => setQuizOpen(true);
  const closeQuiz = () => setQuizOpen(false);

  return (
    <>
      <Topbar onCTA={openQuiz}/>
      <main>
        <Hero onStart={openQuiz}/>
        <BlockInfo/>
        <BlockWhy/>
        <BlockQuizInvite onStart={openQuiz}/>
        <BlockCTA onSubmit={() => setQuizOpen(true)}/>
      </main>
      <DisclaimerStrip/>
      <Footer onPrivacy={() => setLegalKind("privacy")}
              onTerms={() => setLegalKind("terms")}/>

      {/* mobile sticky CTA */}
      <div className="sticky-cta" style={{ display: quizOpen ? "none" : "flex" }}>
        <button className="btn btn-primary" onClick={openQuiz}>
          Пройти короткий опрос
          <ArrowR className="btn-arrow"/>
        </button>
      </div>

      {quizOpen && (
        <QuizOverlay
          onClose={closeQuiz}
          onOpenPrivacy={() => setLegalKind("privacy")}
        />
      )}
      {legalKind && (
        <LegalModal kind={legalKind} onClose={() => setLegalKind(null)}/>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Акцент">
          <TweakColor label="Цвет"
                      value={t.accent}
                      options={["#A8853A", "#876924", "#B89348", "#6F5919", "#C9A14E"]}
                      onChange={v => setTweak("accent", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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