/* App root — wires tweaks, language, claim cycle */
const { Nav, Hero, Shift, HowItWorks, UseCases, Proof, Integrations, CTA, FAQ, Footer } = window.CWSections;
const { TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakRadio } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "de",
  "claimIdx": 0,
  "goldIntensity": 100
}/*EDITMODE-END*/;

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

  // Apply gold intensity as CSS var
  React.useEffect(() => {
    document.documentElement.style.setProperty("--gold-intensity", (state.goldIntensity / 100).toString());
  }, [state.goldIntensity]);

  const lang = state.lang || "de";
  const t = window.CW_I18N[lang];

  return (
    <>
      <Nav t={t} lang={lang} setLang={(l) => setTweak("lang", l)} />
      <Hero t={t} claimIdx={state.claimIdx} lang={lang} />
      <Shift t={t} />
      <HowItWorks t={t} />
      <UseCases t={t} />
      <Proof t={t} />
      <Integrations t={t} />
      <CTA t={t} lang={lang} />
      <FAQ t={t} />
      <Footer t={t} />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title={lang === "de" ? "Sprache" : "Language"}>
            <TweakRadio
              value={lang}
              onChange={(v) => setTweak("lang", v)}
              options={[
                { value: "de", label: "Deutsch" },
                { value: "en", label: "English" },
              ]}
            />
          </TweakSection>

          <TweakSection title={lang === "de" ? "Hero-Claim" : "Hero claim"}>
            <TweakRadio
              value={String(state.claimIdx)}
              onChange={(v) => setTweak("claimIdx", parseInt(v, 10))}
              options={t.hero.claims.map((c, i) => ({
                value: String(i),
                label: c.join(" "),
              }))}
            />
          </TweakSection>

          <TweakSection title={lang === "de" ? "Gold-Intensität" : "Gold intensity"} subtitle={`${state.goldIntensity}%`}>
            <TweakSlider
              min={0} max={160} step={10}
              value={state.goldIntensity}
              onChange={(v) => setTweak("goldIntensity", v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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