/* Hayes Global Mobility — UI kit: shared Footer */
(function () {
  const { IconButton } = window.HayesGlobalMobilityDesignSystem_489ece;

  function FooterCol({ title, items }) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase', color: '#fff', marginBottom: 4 }}>{title}</div>
        {items.map(i => (
          <a key={i} href="#" onClick={e => e.preventDefault()} style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(255,255,255,0.72)' }}>{i}</a>
        ))}
      </div>
    );
  }

  function Footer() {
    return (
      <footer style={{ background: 'var(--color-navy-900)', color: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '56px 40px 28px', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40 }}>
          <div>
            <img src="assets/logo-hayes-white.png" alt="Hayes Global Mobility" style={{ height: 46, marginBottom: 16 }} />
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: 300, margin: 0 }}>
              Trusted expertise that makes relocation and expansion seamless. Visas · Careers · Investments — your future without borders.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {['share-2', 'at-sign', 'globe', 'mail'].map(n => (
                <IconButton key={n} label={n} variant="onNavy" size="sm">
                  <i data-lucide={n} style={{ width: 16, height: 16 }}></i>
                </IconButton>
              ))}
            </div>
          </div>
          <FooterCol title="Services" items={['Visa Services', 'Job Placement', 'Investment', 'Procurement']} />
          <FooterCol title="Company" items={['About Us', 'Resources', 'Client Portal', 'Contact']} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase', color: '#fff' }}>Get in Touch</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(255,255,255,0.72)' }}>
              <i data-lucide="map-pin" style={{ width: 15, height: 15, color: 'var(--color-gold-400)' }}></i> Hayes, West London Stockley Park, Hayes UB11 1ET
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(255,255,255,0.72)' }}>
              <i data-lucide="mail" style={{ width: 15, height: 15, color: 'var(--color-gold-400)' }}></i> info@hayesglobalmobility.com
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(255,255,255,0.72)' }}>
              <i data-lucide="message-circle" style={{ width: 15, height: 15, color: 'var(--color-gold-400)' }}></i> WhatsApp: +44 7882761771
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', padding: '18px 40px', maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-ui)', fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
          <span>© 2026 Hayes Global Mobility. All rights reserved.</span>
          <span>Privacy Policy · Terms of Service</span>
        </div>
      </footer>
    );
  }

  window.HayesFooter = Footer;
})();