// Canda Landing — root app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Technology for the world's toughest problems",
  "heroVariant": "asymmetric",
  "accent": "default",
  "density": "airy",
  "theme": "light"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [contactOpen, setContactOpen] = React.useState(false);

  React.useEffect(() => {
    const loader = document.getElementById('canda-loader');
    if (loader) {
      loader.classList.add('hide');
      setTimeout(() => loader.remove(), 450);
    }
  }, []);

  React.useEffect(() => {
    document.body.dataset.density = tweaks.density;
    document.body.dataset.accent = tweaks.accent;
    document.body.dataset.theme = tweaks.theme;
  }, [tweaks]);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, []);

  const openContact = () => setContactOpen(true);
  const closeContact = () => setContactOpen(false);

  return (
    <>
      <window.LandingNav onContact={openContact} />
      <main>
        <window.LandingHero variant={tweaks.heroVariant} headline={tweaks.headline} onContact={openContact} />
        <window.PintoneSection onContact={openContact} />
        <window.WhySection />
        <window.ImpactSection />
        <window.CtaBand onContact={openContact} />
        <window.Footer onContact={openContact} />
      </main>
      <window.ContactModal open={contactOpen} onClose={closeContact} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Headline">
            <window.TweakText label="Hero headline" value={tweaks.headline} onChange={(v) => setTweak("headline", v)} />
          </window.TweakSection>
          <window.TweakSection title="Layout">
            <window.TweakRadio label="Hero variant" value={tweaks.heroVariant}
              options={[{value: "asymmetric", label: "Asymmetric"}, {value: "centered", label: "Centered"}]}
              onChange={(v) => setTweak("heroVariant", v)} />
            <window.TweakRadio label="Density" value={tweaks.density}
              options={[{value: "airy", label: "Airy"}, {value: "compact", label: "Compact"}]}
              onChange={(v) => setTweak("density", v)} />
          </window.TweakSection>
          <window.TweakSection title="Style">
            <window.TweakRadio label="Accent intensity" value={tweaks.accent}
              options={[{value: "subtle", label: "Subtle"}, {value: "default", label: "Default"}, {value: "bold", label: "Bold teal"}]}
              onChange={(v) => setTweak("accent", v)} />
            <window.TweakToggle label="Dark mode" value={tweaks.theme === "dark"}
              onChange={(v) => setTweak("theme", v ? "dark" : "light")} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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