/* =====================================================================
   ACS — App root
   ===================================================================== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "language": "de",
  "accent": "#3d8a4b",
  "videoSrc": "",
  "overlayOpacity": 0.55
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(tweaks.language || "de");

  // sync language when tweak changes
  useEffect(() => { if (tweaks.language && tweaks.language !== lang) setLang(tweaks.language); }, [tweaks.language]);

  // accent color override
  useEffect(() => {
    if (tweaks.accent) {
      document.documentElement.style.setProperty('--acs-green-bright', tweaks.accent);
    }
  }, [tweaks.accent]);

  const copy = COPY[lang] || COPY.de;

  const handleSetLang = (l) => {
    setLang(l);
    setTweak('language', l);
  };

  return (
    <div>
      <Nav lang={lang} setLang={handleSetLang} copy={copy} inverse={true} />
      <Hero copy={copy} lang={lang} videoSrc={tweaks.videoSrc} overlayOpacity={tweaks.overlayOpacity} />
      <Philosophie copy={copy} />
      <Services copy={copy} />
      <Team copy={copy} lang={lang} />
      <Partners copy={copy} />
      <CTA copy={copy} />
      <Footer copy={copy} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Sprache / Language">
          <TweakRadio
            label="Lang"
            value={lang}
            onChange={(v) => handleSetLang(v)}
            options={[{ value: 'de', label: 'DE' }, { value: 'en', label: 'EN' }]}
          />
        </TweakSection>

        <TweakSection title="Header video (Seedance 2.0)">
          <TweakText
            label="Video URL (mp4)"
            value={tweaks.videoSrc}
            onChange={(v) => setTweak('videoSrc', v)}
            placeholder="https://…/showreel.mp4"
          />
          <TweakSlider
            label="Overlay-Stärke"
            min={0} max={0.85} step={0.05}
            value={tweaks.overlayOpacity}
            onChange={(v) => setTweak('overlayOpacity', v)}
          />
        </TweakSection>

        <TweakSection title="Brand">
          <TweakColor
            label="Akzentfarbe"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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