const Footer = () => {
  const track = (cta) => window.trackEvent && window.trackEvent('cta_click', { location: 'footer', cta });
  const toTop = (e) => { e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'}); };

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          {/* Pages */}
          <nav className="footer-pages" aria-label="Pages">
            <h4>Pages</h4>
            <ul>
              <li><a href="https://wiseops.team/">Main</a></li>
              <li><a href="https://wiseops.team/services">Services <span className="chev-mini">▾</span></a></li>
              <li><a href="https://wiseops.team/cases">Cases</a></li>
              <li><a href="https://wiseops.team/about_us_en">About</a></li>
              <li><a href="https://wiseops.team/contacts_en">Contacts</a></li>
              <li><a href="https://wiseops.team/blog">Blog</a></li>
            </ul>
          </nav>

          {/* Services card */}
          <div className="footer-services-card">
            <h4>Services</h4>
            <div className="fsc-grid">
              <ul className="fsc-col">
                <li><a href="https://wiseops.team/devops_audit_en">DevOps audit</a></li>
                <li><a href="https://wiseops.team/devops_support_en">24/7 DevOps support</a></li>
                <li><a href="https://wiseops.team/cicd_implementation_en">CI/CD implementation</a></li>
                <li><a href="https://wiseops.team/infrastructure_monitoring_en">Infrastructure monitoring</a></li>
                <li><a href="https://wiseops.team/infrastructure_as_a_code_en">Infrastructure as a code (IaC)</a></li>
                <li><a href="https://wiseops.team/containerization_orchestration_en">Containerization & orchestration</a></li>
                <li><a href="https://wiseops.team/devops_security_services_en">DevOps security services</a></li>
                <li><a href="https://wiseops.team/it_infrastructure_services_en">IT infrastructure services</a></li>
                <li><a href="https://wiseops.team/devops_it_consulting_en">DevOps IT consulting</a></li>
                <li><a href="https://wiseops.team/devops_staff_augmentation_en">DevOps staff augmentation services</a></li>
              </ul>
              <ul className="fsc-col">
                <li className="fsc-head">— Cloud-Based Solutions</li>
                <li><a href="https://wiseops.team/services/disaster-recovery">Disaster Recovery Cloud</a></li>
                <li><a href="https://wiseops.team/services/cloud-computing">Cloud Computing Consulting</a></li>
                <li><a href="https://wiseops.team/services/cloud-integration">Cloud Integration Services</a></li>
                <li><a href="https://wiseops.team/services/cloud-architecture">Cloud Architecture Services</a></li>
                <li><a href="https://wiseops.team/services/cloud-enablement">Cloud Enablement Services</a></li>
                <li><a href="https://wiseops.team/services/managed-cloud">Managing Cloud Infrastructure</a></li>
                <li className="fsc-head">— Optimization and Assessment</li>
                <li><a href="https://wiseops.team/services/cloud-assessment">Cloud Assessment Services</a></li>
                <li><a href="https://wiseops.team/services/cost-optimization">Cost Optimization Services</a></li>
              </ul>
              <ul className="fsc-col">
                <li className="fsc-head">— Migration and Advisory</li>
                <li><a href="https://wiseops.team/services/application-migration">Application Migration Service</a></li>
                <li><a href="https://wiseops.team/services/cloud-adoption">Cloud Adoption Solutions</a></li>
                <li><a href="https://wiseops.team/services/cloud-advisory">Cloud Advisory Services</a></li>
                <li><a href="https://wiseops.team/services/cloud-migration">Cloud Migration Consulting</a></li>
                <li className="fsc-head">— Specialized IT Services</li>
                <li><a href="https://wiseops.team/services/digital-transformation">Digital Transformation Solutions</a></li>
                <li><a href="https://wiseops.team/services/managed-devops">DevOps Managed Services</a></li>
                <li><a href="https://wiseops.team/services/startups">IT Services for Startups</a></li>
              </ul>
            </div>
          </div>

          {/* Contacts + back-to-top */}
          <div className="footer-contact">
            <button className="back-to-top" onClick={toTop} aria-label="Back to top">
              <Icon name="chev-up" size={18} stroke={2.6} className="bt-arrow"/>
            </button>
            <a href="https://wiseops.team/" className="logo" aria-label="WiseOps" style={{display:"flex",alignItems:"center",gap:10,marginBottom:22}}>
              <span className="logo-mark" style={{background:"transparent",boxShadow:"none",width:34,height:34,padding:0}}>
                <img src="assets/wiseops-mark.png" alt="" width="34" height="34" style={{display:"block"}}/>
              </span>
              <span className="logo-text" style={{color:"var(--navy-900)"}}>wiseops<span style={{color:"var(--navy-900)"}}>.team</span></span>
            </a>
            <ul className="fc-list">
              <li>
                <span className="fc-ic"><Icon name="pin" size={14} stroke={2}/></span>
                Chanion 11 / 101, Limassol, Cyprus, 3100
              </li>
              <li>
                <span className="fc-ic"><Icon name="mail" size={14} stroke={2}/></span>
                <a href="mailto:info@wiseops.team" onClick={()=>track('email_footer')}>info@wiseops.team</a>
              </li>
              <li>
                <span className="fc-ic"><Icon name="phone" size={14} stroke={2}/></span>
                <a href="tel:+35796770828" onClick={()=>track('phone_footer')}>+35796770828</a>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="fb-left">
            <span>IMHIO Ltd</span>
            <a href="https://wiseops.team/privacy">Privacy policy</a>
          </div>
          <div className="fb-socials">
            <a href="https://t.me/wiseops" target="_blank" rel="noopener" onClick={()=>track('tg_footer')}>
              <span className="fbs-ic fbs-tg"><Icon name="social-tg" size={13} stroke={0}/></span> Telegram
            </a>
            <a href="https://www.linkedin.com/company/wiseops" target="_blank" rel="noopener" onClick={()=>track('in_footer')}>
              <span className="fbs-ic fbs-in"><Icon name="social-in" size={13} stroke={0}/></span> LinkedIn
            </a>
            <a href="https://wa.me/35796770828" target="_blank" rel="noopener" onClick={()=>track('wa_footer')}>
              <span className="fbs-ic fbs-wa"><Icon name="social-wa" size={13} stroke={0}/></span> WhatsApp
            </a>
            <a href="https://www.facebook.com/wiseops" target="_blank" rel="noopener" onClick={()=>track('fb_footer')}>
              <span className="fbs-ic fbs-fb"><Icon name="social-fb" size={13} stroke={0}/></span> Facebook
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;