// Main app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "dark",
  "density": "comfortable",
  "lang": "en",
  "mode": "creative",
  "cursor": true
}/*EDITMODE-END*/;

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

  // Pull mode/lang from tweaks so they stay in sync
  const mode = tweaks.mode === 'automation' ? 'automation' : 'creative';
  const lang = tweaks.lang;
  const theme = ['light', 'paper', 'cream', 'lavender'].includes(tweaks.palette) ? 'light' : 'dark';
  const setMode = (v) => setTweak('mode', v);
  const setLang = (v) => setTweak('lang', v);
  const setTheme = (v) => setTweak('palette', v === 'light' ? 'light' : 'dark');

  // Reflect onto root for CSS
  useEffect(() => {
    document.documentElement.setAttribute('data-mode', mode);
    document.documentElement.setAttribute('data-palette', tweaks.palette);
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.setAttribute('data-lang', lang);
    document.body.style.cursor = tweaks.cursor ? 'none' : 'auto';
  }, [mode, tweaks.palette, tweaks.density, lang, tweaks.cursor, theme]);

  // Apply palette to vars
  useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.cream;
    const root = document.documentElement;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [tweaks.palette]);

  useEffect(() => {
    const root = document.documentElement;
    const move = (event) => {
      root.style.setProperty('--mx', `${event.clientX}px`);
      root.style.setProperty('--my', `${event.clientY}px`);
    };
    window.addEventListener('pointermove', move);
    return () => window.removeEventListener('pointermove', move);
  }, []);

  return (
    <React.Fragment>
      {tweaks.cursor && <Cursor />}
      <div className="frame"></div>
      <TopBar lang={lang} setLang={setLang} mode={mode} theme={theme} setTheme={setTheme} />
      <Hero mode={mode} lang={lang} />
      <Marquee lang={lang} />
      <Layers lang={lang} />
      <Capabilities mode={mode} lang={lang} />
      <Architecture mode={mode} lang={lang} />
      <Doctrine lang={lang} />
      <Cases mode={mode} lang={lang} />
      <Engagement lang={lang} />
      <About lang={lang} />
      <Contact lang={lang} />
      <Footer lang={lang} />
      <ModeSwitcher mode={mode} setMode={setMode} lang={lang} />
      <Ticker lang={lang} />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Mode">
          <TweakRadio label="Product arm" value={mode} options={[{value:'creative',label:'Design'},{value:'automation',label:'Automation'}]} onChange={(v) => setMode(v)} />
        </TweakSection>
        <TweakSection title="Language">
          <TweakRadio label="Locale" value={lang} options={[{value:'en',label:'EN'},{value:'sk',label:'SK'},{value:'uk',label:'UA'}]} onChange={(v) => setLang(v)} />
        </TweakSection>
        <TweakSection title="Palette">
          <TweakSelect label="Theme" value={tweaks.palette} options={[
            {value:'dark', label:'Dark'},
            {value:'light', label:'Light'},
          ]} onChange={(v) => setTweak('palette', v)} />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio label="Spacing" value={tweaks.density} options={[{value:'comfortable',label:'Comfort'},{value:'dense',label:'Dense'}]} onChange={(v) => setTweak('density', v)} />
        </TweakSection>
        <TweakSection title="Cursor">
          <TweakToggle label="Custom cursor" value={tweaks.cursor} onChange={(v) => setTweak('cursor', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

const PALETTES = {
  light: {
    '--bg': '#f6f3ec', '--bg-2': '#ebe6da', '--bg-3': '#ded7c8', '--surface': '#fffaf0',
    '--fg': '#111111', '--fg-2': '#2b2b2b', '--muted': '#6f675b', '--muted-2': '#978d7c',
    '--line': 'rgba(17, 17, 17, 0.10)', '--line-2': 'rgba(17, 17, 17, 0.18)', '--line-strong': 'rgba(17, 17, 17, 0.35)',
    '--accent': '#ff3d1f', '--accent-2': '#005cff', '--accent-ink': '#ffffff',
    '--chrome': 'rgba(246, 243, 236, 0.82)', '--body-start': '#f9f7f0', '--body-end': '#f1ece2',
    '--noise-a': 'rgba(17,17,17,0.035)', '--noise-b': 'rgba(17,17,17,0.025)',
  },
  dark: {
    '--bg': '#0d0f10', '--bg-2': '#1a1d1f', '--bg-3': '#161A1F', '--surface': '#13161B',
    '--fg': '#f0ede5', '--fg-2': '#d9d4c9', '--muted': '#6B7079', '--muted-2': '#494E57',
    '--line': 'rgba(255, 255, 255, 0.08)', '--line-2': 'rgba(255, 255, 255, 0.16)', '--line-strong': 'rgba(255, 255, 255, 0.32)',
    '--accent': '#c8ff00', '--accent-2': '#ff5a00', '--accent-ink': '#0A0B0D',
    '--chrome': 'rgba(10, 11, 13, 0.76)', '--body-start': '#0B0C0F', '--body-end': '#0A0B0D',
    '--noise-a': 'rgba(255,255,255,0.04)', '--noise-b': 'rgba(255,255,255,0.03)',
  },
  cream: null,
  paper: null,
  noir: null,
  lavender: null,
};

PALETTES.cream = PALETTES.light;
PALETTES.paper = PALETTES.light;
PALETTES.lavender = PALETTES.light;
PALETTES.noir = PALETTES.dark;

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