const Header = () => {
  const track = (cta) => window.trackEvent && window.trackEvent('cta_click', { location: 'header', cta });
  return (
    <React.Fragment>
      <div className="topbar">
        <div className="container topbar-inner">
          <div className="topbar-socials" aria-label="Social">
            <a href="https://www.facebook.com/wiseops" target="_blank" rel="noopener" aria-label="Facebook"><Icon name="social-fb" size={12} stroke={0}/></a>
            <a href="https://t.me/wiseops" target="_blank" rel="noopener" aria-label="Telegram"><Icon name="social-tg" size={12} stroke={0}/></a>
            <a href="https://wa.me/35796770828" target="_blank" rel="noopener" aria-label="WhatsApp"><Icon name="social-wa" size={12} stroke={0}/></a>
            <a href="https://www.linkedin.com/company/wiseops" target="_blank" rel="noopener" aria-label="LinkedIn"><Icon name="social-in" size={12} stroke={0}/></a>
          </div>
          <div className="topbar-contacts">
            <a href="mailto:info@wiseops.team" onClick={()=>track('email_top')}>
              <Icon name="mail" size={14} stroke={2}/> info@wiseops.team
            </a>
            <a href="tel:+35796770828" onClick={()=>track('phone_top')}>
              <Icon name="phone" size={14} stroke={2}/> +357 9677 0828
            </a>
          </div>
        </div>
      </div>
      <header className="header">
        <div className="container header-inner">
          <a href="https://wiseops.team/" className="logo" aria-label="WiseOps">
            <img src="assets/wiseops-logo.svg" alt="WiseOps" height="34" style={{height:"34px",width:"auto",display:"block"}} />
          </a>
          <nav className="nav" aria-label="Primary">
            <a href="https://wiseops.team/">Main</a>
            <a href="https://wiseops.team/services" aria-haspopup="true">Services <Icon name="chev" size={14} className="chev"/></a>
            <a href="https://wiseops.team/cases">Cases</a>
            <a href="https://wiseops.team/about_us_en">About</a>
            <a href="https://wiseops.team/contacts_en">Contacts</a>
            <a href="https://wiseops.team/blog">Blog</a>
          </nav>
          <a href="#contact" className="btn btn-primary" onClick={(e)=>{e.preventDefault(); track('callback_header'); window.openContactModal && window.openContactModal('header', 'callback');}}>
            Callback
            <span className="btn-icon"><Icon name="chev-right" size={14} stroke={2.6}/></span>
          </a>
        </div>
      </header>
    </React.Fragment>
  );
};

window.Header = Header;