const TWEAK_DEFAULTS = {
  showGrain: true,
  accentIntensity: 35,
  tileStyle: "imageBehind",
  ctaLabel: "Termin buchen",
  accentHue: 28,
};

function App() {
  const [tw, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");
  const [concern, setConcern] = React.useState(null);

  React.useEffect(() => {
    const root = document.documentElement;
    const intensity = tw.accentIntensity / 100;
    const chroma = 0.02 + intensity * 0.06;
    const light = 0.75 - intensity * 0.08;
    const lightDeep = 0.65 - intensity * 0.08;
    root.style.setProperty("--rose", `oklch(${light} ${chroma} ${tw.accentHue})`);
    root.style.setProperty("--rose-deep", `oklch(${lightDeep} ${chroma + 0.02} ${tw.accentHue})`);
  }, [tw.accentIntensity, tw.accentHue]);

  React.useEffect(() => {
    let style = document.getElementById("grain-toggle");
    if (!style) {
      style = document.createElement("style"); style.id = "grain-toggle"; document.head.appendChild(style);
    }
    style.textContent = tw.showGrain ? "" : "body::before { display: none !important; }";
  }, [tw.showGrain]);

  const openConcern = (id) => { setConcern(id); setRoute("concern"); };
  const goHome = () => { setRoute("home"); setConcern(null); };
  const scrollToConcerns = () => {
    document.getElementById("hautthemen")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  const book = () => { window.open("https://wa.me/493055550184", "_blank"); };

  return (
    <React.Fragment>
      <window.PreHeader />
      <window.Nav onNavigate={goHome} route={route} />

      {route === "home" ? (
        <main>
          <window.Hero ctaLabel={tw.ctaLabel} onScrollToConcerns={scrollToConcerns} onBook={book} />
          <window.Concerns style={tw.tileStyle} onOpen={openConcern} />
          <window.QuoteSection />
          <window.AboutSection />
          <window.AblaufSection />
          <window.BookingCTA label={tw.ctaLabel} />
        </main>
      ) : (
        <main>
          <window.ConcernDetail concernId={concern} onBack={goHome} ctaLabel={tw.ctaLabel} />
          <window.BookingCTA label={tw.ctaLabel} />
        </main>
      )}

      <window.ScrollTop />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="CTA" />
        <window.TweakText label="CTA-Label" value={tw.ctaLabel} onChange={v => setTweak("ctaLabel", v)} />

        <window.TweakSection label="Behandlungs-Kacheln" />
        <window.TweakRadio label="Stil" value={tw.tileStyle}
          options={[
            { value: "imageBehind", label: "Mit Bild" },
            { value: "plain", label: "Nur Creme" },
          ]}
          onChange={v => setTweak("tileStyle", v)} />

        <window.TweakSection label="Farben" />
        <window.TweakSlider label="Roségold-Intensität" min={0} max={100} step={5}
          value={tw.accentIntensity} onChange={v => setTweak("accentIntensity", v)} />
        <window.TweakSlider label="Akzent-Farbton" min={0} max={60} step={2}
          value={tw.accentHue} onChange={v => setTweak("accentHue", v)} />

        <window.TweakSection label="Textur" />
        <window.TweakToggle label="Papier-Grain" value={tw.showGrain}
          onChange={v => setTweak("showGrain", v)} />
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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