// Hadid Group — footer
const { Logo, Icon } = window.HadidGroupDesignSystem_9f7d08;

function Footer() {
  const S = window.SITE;
  const social = ['facebook', 'instagram', 'linkedin'];
  return (
    <footer style={{ background: 'var(--navy-950)', borderTop: '1px solid var(--border-dark)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'clamp(56px, 7vw, 88px) var(--gutter) 0' }}>
        <div className="hg-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.3fr', gap: 'clamp(32px, 4vw, 56px)' }}>
          {/* brand */}
          <div>
            <Logo variant="light" size="md" />
            <p style={{ margin: '22px 0 0', maxWidth: 320, fontFamily: 'var(--font-sans)', fontSize: '0.94rem', lineHeight: 1.7, color: 'var(--on-dark-body)' }}>
              A leading international contracting and construction company delivering exceptional projects across Europe, Jordan, and Lebanon.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 26 }}>
              {social.map((s) => (
                <a key={s} href="#" onClick={(e) => e.preventDefault()} aria-label={s} style={{
                  display: 'inline-flex', width: 42, height: 42, alignItems: 'center', justifyContent: 'center',
                  borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-dark)', color: 'var(--on-dark-body)',
                  transition: 'all var(--dur-fast)',
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--gold-500)'; e.currentTarget.style.color = 'var(--navy-950)'; e.currentTarget.style.borderColor = 'transparent'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--on-dark-body)'; e.currentTarget.style.borderColor = 'var(--border-dark)'; }}
                ><Icon name={s} size={19} strokeWidth={1.8} /></a>
              ))}
            </div>
          </div>

          {/* quick links */}
          <FooterCol title="Quick Links">
            {S.nav.map((l) => (
              <a key={l} href={`#${l.toLowerCase()}`} onClick={(e) => { e.preventDefault(); window.scrollToId(l.toLowerCase()); }} style={footerLink}
                onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--gold-400)')} onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--on-dark-body)')}>{l}</a>
            ))}
          </FooterCol>

          {/* locations */}
          <FooterCol title="Our Locations">
            {S.locations.map((l) => (
              <span key={l.city} style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--on-dark-body)', fontFamily: 'var(--font-sans)', fontSize: '0.92rem', padding: '5px 0' }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--gold-500)' }} />{l.city}, {l.country}
              </span>
            ))}
          </FooterCol>

          {/* contact */}
          <FooterCol title="Contact Info">
            <FooterContact icon="phone" value={S.phone} href={`tel:${S.phoneRaw}`} />
            <FooterContact icon="mail" value={S.email} href={`mailto:${S.email}`} />
            <FooterContact icon="map-pin" value={S.addressPrague} />
          </FooterCol>
        </div>

        {/* bottom bar */}
        <div className="hg-footer-bottom" style={{ marginTop: 'clamp(44px, 5vw, 64px)', borderTop: '1px solid var(--border-dark)', padding: '24px 0 30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: '0.84rem', color: 'var(--on-dark-muted)' }}>© 2026 Hadid Group. All Rights Reserved.</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ ...footerLink, padding: 0, fontSize: '0.84rem' }}>Privacy Policy</a>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ ...footerLink, padding: 0, fontSize: '0.84rem' }}>Terms of Use</a>
            <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} aria-label="Back to top" style={{
              display: 'inline-flex', width: 40, height: 40, alignItems: 'center', justifyContent: 'center',
              borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-dark)', background: 'transparent', color: 'var(--gold-400)', cursor: 'pointer',
            }}><Icon name="chevron-up" size={20} strokeWidth={2} /></button>
          </div>
        </div>
      </div>
    </footer>
  );
}

const footerLink = {
  display: 'block', padding: '5px 0', fontFamily: 'var(--font-sans)', fontSize: '0.92rem',
  color: 'var(--on-dark-body)', textDecoration: 'none', transition: 'color var(--dur-fast)',
};

function FooterCol({ title, children }) {
  return (
    <div>
      <h4 style={{ margin: '0 0 18px', fontFamily: 'var(--font-brand)', fontWeight: 600, fontSize: '0.78rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-500)' }}>{title}</h4>
      <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
    </div>
  );
}

function FooterContact({ icon, value, href }) {
  const inner = (
    <span style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0', color: 'var(--on-dark-body)', fontFamily: 'var(--font-sans)', fontSize: '0.92rem', lineHeight: 1.5 }}>
      <Icon name={icon} size={17} strokeWidth={1.8} color="var(--gold-500)" style={{ marginTop: 2 }} />{value}
    </span>
  );
  return href ? <a href={href} style={{ textDecoration: 'none' }}>{inner}</a> : inner;
}
window.Footer = Footer;