/* global React, ReactDOM */
const { useEffect } = React;

const {
  useReveal,
  Nav, Hero, Symptoms, Services, Programs, About, VideoBlock, Doctors,
  Drips, Professions, Equipment, HomeRehab, Lab, Testimonials, Faq,
  MapSection, Cta, Footer,
} = window;

/* ========== Tweaks ========== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#3F87B5"
}/*EDITMODE-END*/;

function App() {
  useReveal();
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.style.setProperty("--accent", tweaks.accent);
  }, [tweaks.theme, tweaks.accent]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakColor = window.TweakColor;

  const accentPresets = tweaks.theme === "warm"
    ? ["#8B6F47", "#A87B4F", "#6E5A3F", "#B89968", "#5A4A36"]
    : tweaks.theme === "medical"
    ? ["#2E5E7A", "#0EBA8A", "#3A7A6B", "#4A5A6E", "#1F4256"]
    : ["#3F87B5", "#4FA0CF", "#5599D1", "#2E6E96", "#73B0D4"];

  const onThemeChange = v => {
    setTweak("theme", v);
    setTweak(
      "accent",
      v === "warm" ? "#8B6F47"
        : v === "medical" ? "#2E5E7A"
        : "#3F87B5"
    );
  };

  return (
    <>
      <Nav />
      <Hero />
      <Symptoms />
      <Services />
      <Programs />
      <About />
      <VideoBlock />
      <Doctors />
      <Drips />
      <Professions />
      <Equipment />
      <HomeRehab />
      <Lab />
      <Testimonials />
      <Faq />
      <MapSection />
      <Cta />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Тема">
          <TweakRadio
            label="Палитра"
            value={tweaks.theme}
            onChange={onThemeChange}
            options={[
              { value: "light", label: "Светлая мед." },
              { value: "medical", label: "Глубокая мед." },
              { value: "warm", label: "Тёплая" }
            ]}
          />
        </TweakSection>
        <TweakSection title="Акцент">
          <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
            {accentPresets.map(c => (
              <button
                key={c}
                onClick={() => setTweak("accent", c)}
                style={{
                  width: 32, height: 32, borderRadius: "50%",
                  background: c, cursor: "pointer",
                  border: tweaks.accent === c ? "2px solid #1F2937" : "2px solid transparent",
                  outline: "1px solid rgba(0,0,0,.08)"
                }}
                aria-label={c}
              />
            ))}
          </div>
          <div style={{marginTop: 12}}>
            <TweakColor label="Свой цвет" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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