/* global React, ReactDOM */
const { useEffect: useEffectApp } = React;
const { Nav, Hero, Intro, Position, Logos, Stats, Solutions, Themen, About, References, Goodies, Eindruecke, ExternalTools, DiversityData } = window.Sections;
const { DiversityCheck, Contact, Footer, RentenluckeRechner, LeadMagnet } = window.Interactive;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "a11y": false,
  "heroVariant": "gradient",
  "accent": "warm"
} /*EDITMODE-END*/;

function App() {
  const [tweaks, setTweakRaw] = window.useTweaks ?
  window.useTweaks(TWEAK_DEFAULTS) :
  [TWEAK_DEFAULTS, () => {}];
  const setTweak = setTweakRaw;

  // Deep-link: nach dem Render zum #anchor scrollen (sonst landet man oben, weil die
  // React-Inhalte beim nativen Hash-Sprung noch nicht existieren). Mehrfach versuchen,
  // bis Layout (Bilder/Fonts) stabil ist.
  useEffectApp(() => {
    const id = window.location.hash ? window.location.hash.slice(1) : "";
    if (!id) return;
    const jump = () => {
      const el = document.getElementById(id);
      if (!el) return;
      const top = el.getBoundingClientRect().top + window.scrollY - 76;
      window.scrollTo({ top, behavior: "auto" });
    };
    const timers = [0, 90, 220, 450, 800, 1300].map((t) => setTimeout(jump, t));
    return () => timers.forEach(clearTimeout);
  }, []);

  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme || "light");
    document.documentElement.setAttribute("data-a11y", String(!!tweaks.a11y));
    document.documentElement.setAttribute("data-accent", tweaks.accent || "warm");
    document.documentElement.setAttribute("data-hero", tweaks.heroVariant || "gradient");
  }, [tweaks.theme, tweaks.a11y, tweaks.accent, tweaks.heroVariant]);

  // Apply accent variation
  useEffectApp(() => {
    const root = document.documentElement;
    if (tweaks.accent === "cool") {
      root.style.setProperty("--hero-bg",
      "radial-gradient(80% 65% at 18% 25%, oklch(0.62 0.20 260 / 1) 0%, transparent 60%), radial-gradient(70% 55% at 85% 18%, oklch(0.70 0.18 220 / 1) 0%, transparent 55%), radial-gradient(75% 60% at 75% 88%, oklch(0.55 0.21 295 / 0.95) 0%, transparent 60%), radial-gradient(60% 50% at 15% 95%, oklch(0.45 0.20 280 / 1) 0%, transparent 60%), linear-gradient(140deg, oklch(0.45 0.20 280) 0%, oklch(0.62 0.18 245) 100%)"
      );
    } else if (tweaks.accent === "neutral") {
      root.style.setProperty("--hero-bg",
      "radial-gradient(80% 65% at 18% 25%, oklch(0.45 0.04 280 / 1) 0%, transparent 60%), radial-gradient(70% 55% at 85% 18%, oklch(0.78 0.05 60 / 0.9) 0%, transparent 55%), linear-gradient(140deg, oklch(0.35 0.02 280) 0%, oklch(0.55 0.04 40) 100%)"
      );
    } else {
      root.style.removeProperty("--hero-bg");
    }
  }, [tweaks.accent]);

  const Act = ({ no, label }) =>
  <div className="act" aria-hidden="true">
      <div className="wrap">
        <span className="act-no">{no}</span>
        <span className="act-label">{label}</span>
        <span className="act-rule"></span>
      </div>
    </div>;

  const TP = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakToggle = window.TweakToggle;

  return (
    <>
      <Nav />
      <Hero />

      <Intro />

      <Act no="01" label="Warum es zählt" />
      <DiversityData />

      <Act no="02" label="Wer dahintersteht" />
      <Position />
      <Logos />
      <Stats />

      <Act no="03" label="Was wir bewegen" />
      <Themen />

      <Act no="04" label="Wie es wirkt" />
      <Eindruecke />
      <References />

      <Act no="05" label="Selbst loslegen" />
      <DiversityCheck />
      <LeadMagnet />

      <Contact />
      <Footer />

      {TP &&
      <TP title="Tweaks">
          <TweakSection label="Erscheinung">
            <TweakRadio
            label="Modus"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
            { value: "light", label: "Light" },
            { value: "dark", label: "Dark" }]
            } />
          
            <TweakToggle
            label="A11y-Modus"
            value={!!tweaks.a11y}
            onChange={(v) => setTweak("a11y", v)} />
          
          </TweakSection>

          <TweakSection label="Hero-Stimmung">
            <TweakRadio
            label="Klima"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
            { value: "warm", label: "Warm" },
            { value: "cool", label: "Kühl" },
            { value: "neutral", label: "Ruhig" }]
            } />
          
          </TweakSection>
        </TP>
      }
    </>);

}

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