// App shell: language detection, header (with mobile menu), tweaks, mount

function useLang() {
  const detect = () => {
    try {
      const stored = localStorage.getItem('gu_lang');
      if (stored === 'en' || stored === 'ru') return stored;
    } catch (e) {}
    // Check URL param ?lang=
    try {
      const u = new URL(window.location.href);
      const p = u.searchParams.get('lang');
      if (p === 'en' || p === 'ru') return p;
    } catch (e) {}
    const bl = (navigator.language || 'en').toLowerCase();
    return bl.startsWith('ru') ? 'ru' : 'en';
  };
  const [lang, setLang] = React.useState(detect);
  React.useEffect(() => {
    try { localStorage.setItem('gu_lang', lang); } catch (e) {}
    const t = window.GU_I18N[lang];
    document.documentElement.setAttribute('lang', lang);
    document.documentElement.setAttribute('dir', t.dir);
    // Dynamic page title
    document.title = lang === 'ru'
      ? 'GetUpper — Глобальное digital-агентство. Бренд, продукт, AI. С 2014.'
      : 'GetUpper — Global digital agency. Brand, product, AI. Est. 2014.';
  }, [lang]);
  return [lang, setLang];
}

function Header({ t, lang, setLang }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const burgerRef = React.useRef(null);

  // Close menu on Escape, return focus to burger
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape' && menuOpen) {
        setMenuOpen(false);
        burgerRef.current?.focus();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [menuOpen]);

  // Lock body scroll when menu open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const navClick = (id) => {
    setMenuOpen(false);
    setTimeout(() => {
      const el = document.getElementById(id) || document.querySelector(`[data-screen-label*="${id}"]`);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    }, 80);
  };

  return (
    <>
      <header className={`header ${scrolled ? 'is-scrolled' : ''}`}>
        <a href="#" className="header-logo" aria-label="GetUpper" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          <GULogo size={28} animated />
        </a>

        <nav className="header-nav" aria-label="Main navigation">
          <a href="#services" onClick={e => { e.preventDefault(); navClick('services'); }}>{t.nav.services}</a>
          <a href="#presence" onClick={e => { e.preventDefault(); navClick('presence'); }}>{t.nav.presence}</a>
          <a href="#about" onClick={e => { e.preventDefault(); navClick('about'); }}>{t.nav.about}</a>
          <a href="#contact" onClick={e => { e.preventDefault(); navClick('contact'); }}>{t.nav.contact}</a>
        </nav>

        <div className="header-right">
          <div className="lang-switch" role="group" aria-label="Language">
            <button className={lang === 'en' ? 'is-active' : ''} onClick={() => setLang('en')}>EN</button>
            <span className="lang-sep">/</span>
            <button className={lang === 'ru' ? 'is-active' : ''} onClick={() => setLang('ru')}>RU</button>
          </div>
          <a className="header-cta" href={WA_LINK(lang)} target="_blank" rel="noreferrer">
            {t.cta.discuss}<ArrowUpRight />
          </a>
          <button
            ref={burgerRef}
            className={`burger ${menuOpen ? 'is-open' : ''}`}
            onClick={() => setMenuOpen(v => !v)}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            aria-controls="mobile-menu"
          >
            <span /><span /><span />
          </button>
        </div>
      </header>

      {/* Mobile menu overlay */}
      <div
        id="mobile-menu"
        className={`mobile-menu ${menuOpen ? 'is-open' : ''}`}
        aria-hidden={!menuOpen}
        role="dialog"
        aria-label="Navigation menu"
        {...(!menuOpen ? { inert: '' } : {})}
      >
        <nav className="mobile-nav">
          {[['services','services'],['presence','presence'],['about','about'],['contact','contact']].map(([key, id]) => (
            <a key={id} href={`#${id}`} className="mobile-nav-link" onClick={e => { e.preventDefault(); navClick(id); }}>
              {t.nav[key]}
            </a>
          ))}
        </nav>
        <div className="mobile-menu-foot">
          <div className="lang-switch" role="group">
            <button className={lang === 'en' ? 'is-active' : ''} onClick={() => { setLang('en'); setMenuOpen(false); }}>EN</button>
            <span className="lang-sep">/</span>
            <button className={lang === 'ru' ? 'is-active' : ''} onClick={() => { setLang('ru'); setMenuOpen(false); }}>RU</button>
          </div>
          <a className="btn btn-primary" href={WA_LINK(lang)} target="_blank" rel="noreferrer" onClick={() => setMenuOpen(false)}>
            {t.cta.whatsapp}<ArrowUpRight />
          </a>
        </div>
      </div>
    </>
  );
}

// Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8192C",
  "ink": "#0A0A0B",
  "paper": "#F5F3EE",
  "dir": "ltr"
}/*EDITMODE-END*/;

function useTweaks() {
  const [edit, setEdit] = React.useState(false);
  const [vals, setVals] = React.useState(TWEAK_DEFAULTS);
  React.useEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEdit(true);
      if (d.type === '__deactivate_edit_mode') setEdit(false);
    }
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', vals.accent);
    r.style.setProperty('--ink', vals.ink);
    r.style.setProperty('--paper', vals.paper);
    r.setAttribute('dir', vals.dir);
  }, [vals]);
  const update = (k, v) => {
    setVals(s => ({ ...s, [k]: v }));
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch (e) {}
  };
  return { edit, vals, update };
}

function TweaksPanel({ vals, update }) {
  return (
    <div className="tweaks-panel">
      <div className="tweaks-title">Tweaks</div>
      <div className="tweaks-row"><label>Accent</label><input type="color" value={vals.accent} onChange={e => update('accent', e.target.value)} /></div>
      <div className="tweaks-row"><label>Ink</label><input type="color" value={vals.ink} onChange={e => update('ink', e.target.value)} /></div>
      <div className="tweaks-row"><label>Paper</label><input type="color" value={vals.paper} onChange={e => update('paper', e.target.value)} /></div>
      <div className="tweaks-row">
        <label>RTL preview</label>
        <div className="tweaks-seg">
          <button className={vals.dir === 'ltr' ? 'on' : ''} onClick={() => update('dir', 'ltr')}>LTR</button>
          <button className={vals.dir === 'rtl' ? 'on' : ''} onClick={() => update('dir', 'rtl')}>RTL</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [lang, setLang] = useLang();
  const t = window.GU_I18N[lang];
  const { edit, vals, update } = useTweaks();
  return (
    <>
      {/* Skip to main content — keyboard accessibility */}
      <a href="#main-content" className="skip-to-content">Skip to main content</a>
      <Header t={t} lang={lang} setLang={setLang} />
      <main id="main-content" tabIndex={-1}>
        <Hero t={t} lang={lang} />
        <Manifesto t={t} />
        <Services t={t} lang={lang} />
        <AIBlock t={t} />
        <StableGrowth t={t} />
        <Numbers t={t} />
        <Presence t={t} />
        <About t={t} />
        <Contact t={t} lang={lang} />
      </main>
      <Footer t={t} />
      {edit && <TweaksPanel vals={vals} update={update} />}
    </>
  );
}

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