const { useState: useSt, useEffect: useEf } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "de",
  "accent": "electricBlue",
  "density": "comfortable",
  "motion": true,
  "gridOverlay": false,
  "serifHeadlines": true,
  "demoSpeed": "normal"
}/*EDITMODE-END*/;

const ACCENTS = {
  electricBlue: { v: "oklch(0.82 0.14 230)", label: "Electric Blue" },
  ember: { v: "oklch(0.78 0.16 55)", label: "Ember" },
  acidLime: { v: "oklch(0.88 0.18 130)", label: "Acid Lime" },
  violet: { v: "oklch(0.78 0.18 300)", label: "Violet" }
};

function Nav({ copy, onToggleLang, lang }) {
  const [scrolled, setScrolled] = useSt(false);
  useEf(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const n = copy.nav;
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="logo">
          <span className="logo-mark"></span>
          <span>Business AI</span>
        </a>
        <div className="nav-links">
          <a href="#problem">{n.problem}</a>
          <a href="#solution">{n.solution}</a>
          <a href="#security">{n.security}</a>
          <a href="#how">{n.how}</a>
          <a href="#projects">{n.projects}</a>
        </div>
        <div style={{display:'flex', gap:10, alignItems:'center'}}>
          <button className="lang-toggle mono" onClick={onToggleLang} title="Toggle language">
            <span className={lang === 'de' ? 'active' : ''}>DE</span>
            <span className="sep">/</span>
            <span className={lang === 'en' ? 'active' : ''}>EN</span>
          </button>
          <a href="#cta" className="btn btn-primary" style={{padding:'10px 16px', fontSize:13}}>{n.cta} <span className="arrow">↗</span></a>
        </div>
      </div>
      <style>{`
        .lang-toggle {
          appearance: none;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          color: var(--text-3);
          padding: 8px 12px;
          border-radius: 999px;
          font-size: 11px;
          cursor: pointer;
          display: flex; align-items: center; gap: 6px;
          letter-spacing: 0.06em;
          transition: border-color 0.2s;
        }
        .lang-toggle:hover { border-color: var(--line-2); }
        .lang-toggle .active { color: var(--text); }
        .lang-toggle .sep { color: var(--text-3); }
      `}</style>
    </nav>
  );
}

function Footer({ copy }) {
  return (
    <footer>
      <div className="container footer-row">
        <div className="logo" style={{fontSize: 13}}>
          <span className="logo-mark" style={{width:18, height:18}}></span>
          Business AI
        </div>
        <div>{copy.footer.copy}</div>
        <div className="footer-links">
          {copy.footer.links.map(l => <a key={l} href="#">{l}</a>)}
        </div>
      </div>
    </footer>
  );
}

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

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

  // Apply tweak side-effects
  useEf(() => {
    const accent = ACCENTS[tw.accent] || ACCENTS.electricBlue;
    const root = document.documentElement;
    root.style.setProperty('--accent', accent.v);
    // recompute soft/line from accent (manually since CSS oklch with alpha needs literal)
    root.style.setProperty('--accent-soft', accent.v.replace(')', ' / 0.12)'));
    root.style.setProperty('--accent-line', accent.v.replace(')', ' / 0.35)'));
  }, [tw.accent]);

  useEf(() => {
    const density = tw.density === 'compact' ? 0.7 : tw.density === 'spacious' ? 1.35 : 1;
    document.documentElement.style.setProperty('--density', String(density));
  }, [tw.density]);

  useEf(() => {
    document.body.classList.toggle('no-motion', !tw.motion);
  }, [tw.motion]);

  useEf(() => {
    document.body.classList.toggle('grid-overlay', !!tw.gridOverlay);
  }, [tw.gridOverlay]);

  useEf(() => {
    document.documentElement.style.setProperty('--serif', tw.serifHeadlines ? "'Instrument Serif', 'Times New Roman', serif" : "'Geist', system-ui, sans-serif");
  }, [tw.serifHeadlines]);

  const toggleLang = () => setTweak('lang', tw.lang === 'de' ? 'en' : 'de');

  return (
    <>
      <Nav copy={copy} onToggleLang={toggleLang} lang={tw.lang}/>
      <Hero copy={copy}/>
      <Problem copy={copy}/>
      <Solution copy={copy}/>
      <How copy={copy}/>
      <Security copy={copy}/>
      <Results copy={copy}/>
      <Projects copy={copy}/>
      <CTA copy={copy}/>
      <Footer copy={copy}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            value={tw.lang}
            onChange={v => setTweak('lang', v)}
            options={[
              { value: 'de', label: 'Deutsch' },
              { value: 'en', label: 'English' }
            ]}
          />
        </TweakSection>

        <TweakSection label="Accent">
          <TweakColor
            value={ACCENTS[tw.accent]?.v}
            onChange={v => {
              const key = Object.keys(ACCENTS).find(k => ACCENTS[k].v === v);
              if (key) setTweak('accent', key);
            }}
            options={Object.values(ACCENTS).map(a => a.v)}
          />
        </TweakSection>

        <TweakSection label="Density">
          <TweakRadio
            value={tw.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'comfortable', label: 'Comfy' },
              { value: 'spacious', label: 'Loose' }
            ]}
          />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakToggle
            label="Serif headlines"
            value={tw.serifHeadlines}
            onChange={v => setTweak('serifHeadlines', v)}
          />
        </TweakSection>

        <TweakSection label="Motion">
          <TweakToggle
            label="Animations on"
            value={tw.motion}
            onChange={v => setTweak('motion', v)}
          />
        </TweakSection>

        <TweakSection label="Debug">
          <TweakToggle
            label="Grid overlay"
            value={tw.gridOverlay}
            onChange={v => setTweak('gridOverlay', v)}
          />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        body.grid-overlay::after {
          content: "";
          position: fixed; inset: 0;
          pointer-events: none;
          z-index: 99;
          background-image:
            linear-gradient(rgba(125,211,252,0.12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(125,211,252,0.12) 1px, transparent 1px);
          background-size: 64px 64px;
        }
      `}</style>
    </>
  );
}

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