// Shared shell: header (logo + nav + lang) and footer.
// Loaded via <script type="text/babel" src="shell.jsx"> on every page.
// Exposes: window.Shell, window.Header, window.Footer, window.useLang, window.useT

const { useState, useEffect, useRef } = React;

// ---- language hook ----
function getInitialLang() {
  try {
    const url = new URL(window.location.href);
    const q = url.searchParams.get('lang');
    if (q && window.LANGS.find(l => l.code === q)) return q;
  } catch (e) {}
  try {
    const stored = localStorage.getItem('km_lang');
    if (stored && window.LANGS.find(l => l.code === stored)) return stored;
  } catch (e) {}
  return 'en';
}

function useLang() {
  const [lang, setLangState] = useState(getInitialLang);
  const setLang = (code) => {
    setLangState(code);
    try { localStorage.setItem('km_lang', code); } catch (e) {}
    try {
      const url = new URL(window.location.href);
      url.searchParams.set('lang', code);
      window.history.replaceState({}, '', url);
    } catch (e) {}
  };
  useEffect(() => {
    const seo = window.SEO[lang] || window.SEO.en;
    document.title = seo.title;
    let m = document.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement('meta'); m.name = 'description'; document.head.appendChild(m); }
    m.content = seo.desc;
    document.documentElement.lang = lang;
  }, [lang]);
  return [lang, setLang];
}

function useT(lang) {
  return window.T[lang] || window.T.en;
}

// ---- Logo ----
function Logo({ height = 28 }) {
  return <img src="assets/logo.svg" alt="Kalbomatas" style={{ height, width: 'auto', display: 'block' }} />;
}

// ---- Lang Switcher (circular SVG flags + full language label) ----
// Flags from HatScripts/circle-flags via jsDelivr CDN — pre-rendered circular SVGs
const LANG_FLAGS = { en: 'gb', ru: 'ru', uk: 'ua', be: 'by', lt: 'lt' };
const FLAG_BASE = 'https://cdn.jsdelivr.net/gh/HatScripts/circle-flags@latest/flags/';

function Flag({ code, size = 22 }) {
  return (
    <img
      src={FLAG_BASE + LANG_FLAGS[code] + '.svg'}
      alt=""
      width={size}
      height={size}
      style={{ display: 'block', borderRadius: '50%', flexShrink: 0 }}
    />
  );
}

function LangSwitcher({ lang, setLang }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);
  const current = window.LANGS.find(l => l.code === lang) || window.LANGS[0];
  return (
    <div className="lang" data-open={open} ref={ref}>
      <button onClick={() => setOpen(o => !o)} aria-label="Language">
        <Flag code={current.code} size={22} />
        <span className="label">{current.label}</span>
        <span className="caret"></span>
      </button>
      <ul role="listbox">
        {window.LANGS.map(l => (
          <li key={l.code} className={l.code === lang ? 'active' : ''} onClick={() => { setLang(l.code); setOpen(false); }}>
            <Flag code={l.code} size={22} />
            <span>{l.label}</span>
            {l.code === lang && (
              <svg className="check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ---- Header ----
function Header({ lang, setLang, active }) {
  const t = useT(lang);
  const [menuOpen, setMenuOpen] = useState(false);
  const [hidden, setHidden] = useState(false);
  const navLabel = lang === 'en' ? 'Features' : t.nav.tools;
  // Lock body scroll when mobile menu is open
  useEffect(() => {
    if (menuOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  // Hide on scroll down, show on scroll up
  useEffect(() => {
    let lastY = window.scrollY;
    let ticking = false;
    const THRESHOLD = 6;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        const dy = y - lastY;
        if (Math.abs(dy) > THRESHOLD) {
          if (dy > 0 && y > 80) setHidden(true);
          else if (dy < 0) setHidden(false);
          lastY = y;
        }
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <>
    <header className={'site-header' + (hidden && !menuOpen ? ' is-hidden' : '')}>
      <div className="row">
        <a href={'index.html?lang=' + lang} className="logo" aria-label="Kalbomatas">
          <Logo />
        </a>
        <nav>
          <a href={'index.html?lang=' + lang + '#tools'} className={active === 'tools' ? 'active' : ''}>{navLabel}</a>
          <a href={'pricing.html?lang=' + lang} className={active === 'pricing' ? 'active' : ''}>{t.nav.pricing}</a>
          <a href={'about.html?lang=' + lang} className={active === 'about' ? 'active' : ''}>{t.nav.about}</a>
        </nav>
        <div className="right">
          <LangSwitcher lang={lang} setLang={setLang} />
          <a href={'pricing.html?lang=' + lang} className="btn primary sm" style={{ display: 'inline-flex' }}>{t.nav.cta}</a>
          <button className="menu-btn" aria-label="Menu" onClick={() => setMenuOpen(true)}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
          </button>
        </div>
      </div>
    </header>
    <div className={'mobile-menu' + (menuOpen ? ' open' : '')} role="dialog" aria-modal="true">
      <div className="top">
        <a href={'index.html?lang=' + lang} className="logo" aria-label="Kalbomatas" onClick={() => setMenuOpen(false)}>
          <Logo />
        </a>
        <button className="menu-btn" aria-label="Close" onClick={() => setMenuOpen(false)}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
        </button>
      </div>
      <div className="links">
        <a href={'index.html?lang=' + lang + '#tools'} onClick={() => setMenuOpen(false)}>{navLabel}</a>
        <a href={'pricing.html?lang=' + lang} onClick={() => setMenuOpen(false)}>{t.nav.pricing}</a>
        <a href={'about.html?lang=' + lang} onClick={() => setMenuOpen(false)}>{t.nav.about}</a>
      </div>
      <div className="footer-cta">
        <a href={'pricing.html?lang=' + lang} className="btn green lg" style={{ justifyContent: 'center' }}>{t.nav.cta} →</a>
      </div>
    </div>
    </>
  );
}

// ---- Footer ----
function Footer({ lang }) {
  const t = useT(lang);
  const f = t.footer;
  const link = (h) => h.startsWith('mailto:') || h.startsWith('#') ? h : (h.includes('?') ? h : h + '?lang=' + lang);
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <p className="footer-tagline">{f.tagline}</p>
          <div className="footer-cols">
            <div className="footer-col footer-info">
              <address>
                <div className="company">Uncascade, MB</div>
                V. Nagevičiaus g. 3<br />
                Vilnius, LT-08237<br />
                Lithuania
              </address>
              <div className="footer-meta">
                <div>VAT LT100018716618</div>
                <div>Company code 307057505</div>
                <div><a href="mailto:hello@kalbomatas.lt">hello@kalbomatas.lt</a></div>
              </div>
            </div>
            <div className="footer-col">
              <h5>{f.product}</h5>
              <ul>{f.links.product.map((x, i) => <li key={i}><a href={link(x.h)}>{x.l}</a></li>)}</ul>
            </div>
            <div className="footer-col">
              <h5>{f.company}</h5>
              <ul>{f.links.company.map((x, i) => <li key={i}><a href={link(x.h)}>{x.l}</a></li>)}</ul>
            </div>
            <div className="footer-col">
              <h5>{f.resources}</h5>
              <ul>{f.links.resources.map((x, i) => <li key={i}><a href={link(x.h)}>{x.l}</a></li>)}</ul>
            </div>
          </div>
        </div>

        <div className="footer-wordmark" aria-hidden="true">
          <img src="assets/logo.svg" alt="" />
        </div>

        <div className="footer-legal">
          <span>{f.legal}</span>
          <span>EN · LT · RU · UK · BE</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useLang, useT, Logo, LangSwitcher, Header, Footer });