/* global React, Container, Button, useLang, t, LangSwitcher */

function Nav({ active = 'services' }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  useLang();

  React.useEffect(() => {
    document.body.classList.toggle('ea-no-scroll', menuOpen);
    return () => document.body.classList.remove('ea-no-scroll');
  }, [menuOpen]);

  const links = ['services', 'cases', 'certs', 'pricing', 'faq', 'contact'];
  const closeAndGo = () => setMenuOpen(false);

  return (
    <div className="ea-nav-wrap">
      <Container>
        <nav className="ea-nav" aria-label="EA-SOFT">
          <a href="#" aria-label="EA-SOFT">
            <img className="ea-nav-logo" src="assets/logo-black.png" alt="EA-SOFT" width="100" height="18" />
          </a>
          <div className="ea-nav-links">
            {links.map(id => (
              <a key={id} className={active === id ? 'active' : ''} href={`#${id}`}>{t('nav.' + id)}</a>
            ))}
          </div>
          <div className="ea-nav-right">
            <LangSwitcher />
            <a className="ea-nav-phone" href="tel:+77762071122">+7 (776) 207-11-22</a>
            <a href="#contact"><Button variant="primary" size="sm" arrow>{t('nav.cta')}</Button></a>
          </div>
          <button
            type="button"
            className={`ea-nav-burger${menuOpen ? ' open' : ''}`}
            aria-label={t('nav.menuTitle')}
            aria-expanded={menuOpen}
            aria-controls="ea-mobile-menu"
            onClick={() => setMenuOpen(v => !v)}
          >
            <span className="bars"><span></span></span>
          </button>
        </nav>
      </Container>

      <div id="ea-mobile-menu" className={`ea-mobile-menu${menuOpen ? ' open' : ''}`} role="dialog" aria-modal={menuOpen}>
        <nav aria-label={t('nav.menuTitle')}>
          {links.map((id, i) => (
            <a key={id} href={`#${id}`} onClick={closeAndGo}>
              <span>{t('nav.' + id)}</span>
              <span className="num">{String(i + 1).padStart(2, '0')}</span>
            </a>
          ))}
        </nav>
        <div className="ea-mobile-menu-contacts">
          <div style={{ marginBottom: '4px' }}><LangSwitcher compact /></div>
          <div>
            <div className="lab">{t('contact.rowPhone')}</div>
            <a href="tel:+77762071122">+7 (776) 207-11-22</a>
          </div>
          <div>
            <div className="lab">{t('contact.rowEmail')}</div>
            <a href="mailto:info@easoft.kz">info@easoft.kz</a>
          </div>
          <a className="ea-mobile-menu-cta" href="#contact" onClick={closeAndGo}>
            <Button variant="primary" size="lg" arrow>{t('hero.ctaPrimary')}</Button>
          </a>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  useLang();
  const h1 = t('hero.h1');
  const ledger = t('hero.ledger');
  return (
    <section className="ea-hero" aria-labelledby="ea-hero-title">
      <Container>
        <div className="ea-hero-grid">
          <div className="ea-hero-text">
            <div className="ea-hero-overline">
              <span>EA-SOFT</span>
              <span className="sep" aria-hidden="true"></span>
              <span>{t('hero.over1')}</span>
              <span className="sep" aria-hidden="true"></span>
              <span>{t('hero.over2')}</span>
            </div>

            <h1 id="ea-hero-title">
              {h1.map((line, i) => <span className="br" key={i}>{line}</span>)}
            </h1>

            <div className="ea-hero-foot">
              <p className="ea-hero-sub">{t('hero.sub')}</p>
              <div className="ea-hero-ctas">
                <a href="#contact"><Button variant="primary" size="lg" arrow>{t('hero.ctaPrimary')}</Button></a>
                <a href="#pricing"><Button variant="secondary" size="lg">{t('hero.ctaSecondary')}</Button></a>
              </div>
            </div>
          </div>

          <aside className="ea-hero-ledger" aria-label="SLA">
            <div className="ea-ledger-head">
              <span className="doc">{t('hero.ledgerDoc')}</span>
              <span className="num">{t('hero.ledgerNum')}</span>
            </div>

            <div className="ea-ledger-rows">
              {ledger.map(([k, v], i) => (
                <div className="ea-ledger-row" key={i}>
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
              ))}
            </div>

            <div className="ea-ledger-foot">
              <span>{t('hero.ledgerFoot1')}</span>
              <span>{t('hero.ledgerFoot2')}</span>
            </div>
          </aside>
        </div>
      </Container>
    </section>
  );
}

function TrustStrip() {
  useLang();
  const meta = t('trust.meta');
  return (
    <div className="ea-trust" aria-label="EA-SOFT">
      <Container>
        <div className="ea-trust-row">
          <div className="ea-trust-num"><span>{t('trust.num')}</span><span className="unit">{t('trust.unit')}</span></div>
          <div className="ea-trust-copy">{t('trust.copy')}</div>
          <div className="ea-trust-meta">
            {meta.map((m, i) => <span key={i}>{m}</span>)}
          </div>
        </div>
      </Container>
    </div>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.TrustStrip = TrustStrip;