// App entry — composes everything and wires Tweaks
const { useState: tdAppState, useEffect: tdAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": navigator.language?.startsWith('pt') ? 'pt' : 'en',
  "accentHue": 32,
  "density": "default",
  "heroVariant": "B",
  "motion": "cinematic"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang || "en";
  const t = window.I18N[lang];

  // Apply accent hue + density to root, and keep html[lang] in sync
  tdAppEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--td-accent", `oklch(0.68 0.22 ${tweaks.accentHue})`);
    r.style.setProperty("--td-accent-dim", `oklch(0.58 0.20 ${tweaks.accentHue})`);
    r.style.setProperty("--td-accent-glow", `oklch(0.68 0.22 ${tweaks.accentHue} / 0.45)`);
    r.dataset.density = tweaks.density === "default" ? "" : tweaks.density;
  }, [tweaks.accentHue, tweaks.density]);

  tdAppEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  return (
    <div className="td-page">
      <Nav t={t} lang={lang} setLang={(l) => setTweak("lang", l)} />
      <Hero t={t} heroVariant={tweaks.heroVariant} />
      <StatsStrip t={t} />
      <Vendors t={t} />
      <Solutions t={t} />
      <Services t={t} />
      <Proof t={t} />
      <Presence t={t} />
      <Insights t={t} />
      <CTA t={t} />
      <Contact t={t} />
      <Footer t={t} />
      <ChatWidget lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Language">
          <TweakRadio
            value={tweaks.lang}
            onChange={(v) => setTweak("lang", v)}
            options={[{ value: "en", label: "EN" }, { value: "pt", label: "PT" }]}
          />
        </TweakSection>
        <TweakSection title="Accent hue">
          <TweakSlider
            value={tweaks.accentHue}
            onChange={(v) => setTweak("accentHue", v)}
            min={0} max={360} step={1}
            label="Hue"
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "default", label: "Default" },
              { value: "airy", label: "Airy" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero variant">
          <TweakRadio
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[{ value: "A", label: "Split panel" }, { value: "B", label: "Cinematic" }]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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