// Footer
function Footer() {
  // Resolve relative paths whether the footer is rendered from the project root
  // (Homepage.html) or from inside services/*.html.
  const isSubpage = /\/services\//.test(window.location.pathname);
  const prefix = isSubpage ? '../' : '';
  const svc = (slug) => `${prefix}services/${slug}.html`;

  const serviceLinks = [
    { label: 'Air freight',         href: svc('air-freight') },
    { label: 'Ocean FCL',           href: svc('ocean-freight') },
    { label: 'Ocean LCL',           href: svc('less-than-container') },
    { label: 'Ground',              href: svc('trucking') },
    { label: 'Courier',             href: svc('parcel') },
    { label: 'Bonded warehousing',  href: svc('warehousing') },
    { label: 'Import/Export',       href: svc('index') },
  ];

  const cols = [
    { h: 'Services', links: serviceLinks },
    { h: 'Platform', links: ['Dashboard', 'Rate Explorer', 'Tracking', 'Documents', 'Customs Assistant', 'API', 'Integrations'].map(l => ({ label: l, href: '#' })) },
    { h: 'Resources', links: [
      { label: 'Compliance & Licenses', href: `${prefix}services/compliance-certification.html` },
      { label: 'Company history',      href: `${prefix}services/company-history.html` },
      { label: 'Trade alerts',         href: '#' },
      { label: 'Calculators',          href: '#' },
      { label: 'Country guides',       href: '#' },
      { label: 'Glossary',             href: 'services/glossary.html' },
    ] },
    { h: 'Company', links: [
      { label: 'About',     href: 'services/about.html' },
      { label: 'Customers', href: '#' },
      { label: 'Careers',   href: 'services/careers.html' },
      { label: 'Press',     href: '#' },
      { label: 'Security',  href: 'services/compliance-certification.html' },
      { label: 'Contact',   href: '#' },
    ] },
  ];
  return (
    <footer style={{ background: '#fcfcfd', borderTop: '1px solid #eaecf0' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '72px 64px 40px',
        display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <BrandLogo size={32}/>
          <p style={{ margin: '20px 0 0', fontSize: 14, color: '#475467', lineHeight: 1.6, maxWidth: 300 }}>
            Enterprise global logistics platform for shippers who need to move freight faster.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 20, flexWrap: 'wrap' }}>
            {['NVOCC','C-TPAT','IATA','AEO','SOC 2'].map(b=>(
              <a key={b} href={`${prefix}services/compliance-certification.html`}
                title="View licenses & certifications"
                style={{ padding: '3px 10px', background: '#f2f4f7', color: '#344054',
                  borderRadius: 9999, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em',
                  textDecoration: 'none' }}>{b}</a>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
            {[
              { label: 'Facebook',  href: 'https://www.facebook.com/abgroupshipping',
                path: 'M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.91h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z' },
              { label: 'X',         href: 'https://x.com/abgroupshipping',
                path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z' },
              { label: 'Instagram', href: 'https://www.instagram.com/abgroupshipping',
                path: 'M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.13 1.39C1.34 2.69.93 3.36.62 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.39 2.13.67.67 1.34 1.08 2.13 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.31 1.46-.72 2.13-1.39.67-.67 1.08-1.34 1.39-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.39-2.13C21.31 1.34 20.64.93 19.86.62 19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.41-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z' },
              { label: 'LinkedIn',  href: 'https://www.linkedin.com/company/abgroupshipping',
                path: 'M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.23 0z' },
            ].map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
                aria-label={s.label} title={s.label}
                style={{ width: 32, height: 32, borderRadius: 9999, background: '#f2f4f7',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#475467', textDecoration: 'none' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d={s.path}/>
                </svg>
              </a>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
              textTransform: 'uppercase', color: '#98a2b3', marginBottom: 16 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.links.map((l) => (
                <a key={l.label} href={l.href} style={{ fontSize: 14, color: '#475467', textDecoration: 'none' }}>{l.label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '24px 64px 40px',
        borderTop: '1px solid #eaecf0', display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', fontSize: 12, color: '#98a2b3' }}>
        <div>© 2026 AB Group Shipping Corp. All rights reserved.</div>
        <div style={{ display: 'flex', gap: 20 }}>
          <a href="#" style={{ color: '#98a2b3', textDecoration: 'none' }}>Privacy</a>
          <a href="#" style={{ color: '#98a2b3', textDecoration: 'none' }}>Terms</a>
          <a href="#" style={{ color: '#98a2b3', textDecoration: 'none' }}>Cookies</a>
          <a href="#" style={{ color: '#98a2b3', textDecoration: 'none' }}>Status</a>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;