/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1ED760",
  "purple": "#6D28D9"
}/*EDITMODE-END*/;

function LangToggle() {
  const { lang, setLang } = window.useLang();
  return (
    <div style={{
      display: 'inline-flex',
      background: 'rgba(255,255,255,0.05)',
      border: '1px solid var(--line)',
      borderRadius: 999,
      padding: 2,
      gap: 2,
    }}>
      {['EN', 'TH'].map(l => (
        <button
          key={l}
          onClick={() => setLang(l.toLowerCase())}
          style={{
            padding: '5px 11px',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            letterSpacing: '0.1em',
            fontWeight: 600,
            background: lang === l.toLowerCase() ? 'var(--green)' : 'transparent',
            color: lang === l.toLowerCase() ? '#04150a' : 'var(--ink-3)',
            transition: 'all .2s',
          }}
        >
          {l}
        </button>
      ))}
    </div>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const t = window.useT().nav;

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className="nav">
      <div className="nav-inner" style={{
        background: scrolled ? 'rgba(8,8,12,0.85)' : 'rgba(10,10,13,0.55)',
      }}>
        <a href="#top" className="nav-brand">
          <span className="nav-brand-mark" />
          PIMPRI PROMOTION
        </a>
        <div className="nav-links">
          <a href="#how">{t.how}</a>
          <a href="#playlists">{t.network}</a>
          <a href="#pricing">{t.pricing}</a>
          <a href="#faq">{t.faq}</a>
        </div>
        <LangToggle />
        <a href="#pricing" className="nav-cta">{t.cta}</a>
      </div>
    </nav>
  );
}

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

  useEffect(() => {
    document.documentElement.style.setProperty('--green', tweaks.accent);
    document.documentElement.style.setProperty('--purple', tweaks.purple);
  }, [tweaks.accent, tweaks.purple]);

  return (
    <window.LangProvider>
      <Nav />
      <main>
        <window.Hero />
        <window.HowItWorks />
        <window.Playlists />
        <window.Pricing />
        <window.FAQ />
        <window.FinalCTA />
      </main>
      <window.Footer />

      {window.LiveChat && <window.LiveChat />}
      {window.Messenger && <window.Messenger />}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Brand Color">
            <window.TweakColor
              label="Primary Accent"
              value={tweaks.accent}
              onChange={(v) => setTweak('accent', v)}
              options={['#1ED760', '#22d3ee', '#fb923c', '#f43f5e', '#facc15']}
            />
            <window.TweakColor
              label="Secondary"
              value={tweaks.purple}
              onChange={(v) => setTweak('purple', v)}
              options={['#6D28D9', '#3b82f6', '#ec4899', '#10b981', '#0ea5e9']}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </window.LangProvider>
  );
}

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