/* Footer */
function SiteFooter() {
  const vw = useVW();
  const isMobile = vw <= 700;
  const cols = [
    ['Product', [['Platform', 'platform.html'], ['Ports', 'index.html#ports']]],
    ['Company', [['About', 'about.html'], ['Contact', 'about.html#contact']]],
    ['Legal', [['Terms', 'legal.html?doc=terms-of-use'], ['Privacy', 'legal.html?doc=privacy-policy']]],
  ];
  return (
    <footer style={{ position: 'relative', background: 'var(--surface-card)' }}>
      {/* wavy band — layered sea waves rising into the footer */}
      <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, top: 0, transform: 'translateY(-100%)', height: 100, overflow: 'hidden', lineHeight: 0, pointerEvents: 'none' }}>
        <svg viewBox="0 0 1440 118" preserveAspectRatio="none" style={{ width: '100%', height: '100%', display: 'block' }}>
          <path d="M0,66 C220,30 420,96 660,64 C900,32 1080,92 1290,62 C1380,49 1410,60 1440,58 L1440,118 L0,118 Z" fill="var(--accent-subtle)" />
          <path d="M0,80 C200,52 400,104 620,78 C840,52 1060,102 1280,76 C1360,66 1410,80 1440,76 L1440,118 L0,118 Z" fill="var(--blue-100)" opacity="0.7" />
          <path d="M0,92 C240,72 440,112 700,90 C940,70 1140,110 1380,90 C1410,87 1430,90 1440,89 L1440,118 L0,118 Z" fill="var(--surface-card)" />
        </svg>
      </div>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '56px 28px 32px', display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1.6fr repeat(3, 1fr)', gap: isMobile ? 32 : 40 }}>
        <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
          <Logo size={28} />
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-tertiary)', marginTop: 14, maxWidth: 240, lineHeight: 'var(--leading-normal)' }}>
            Tech enabled bunker purchasing platform for all type of vessels. Live pricing, instant stems, flexible terms.
          </p>
        </div>
        {cols.map(([h, links]) => (
          <div key={h}>
            <div style={{ fontSize: 'var(--text-xs)', fontWeight: 600, color: 'var(--text-primary)', marginBottom: 14 }}>{h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {links.map(([l, href]) => (
                <li key={l}><a href={href} className="bm-footlink" style={{ fontSize: 'var(--text-sm)', color: 'var(--text-tertiary)' }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '20px 28px', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-tertiary)' }}>© 2026 bunkerme LLC. All rights reserved.</span>
        <div style={{ display: 'flex', gap: 14 }}>
          {[
            ['LinkedIn', 'https://www.linkedin.com/company/bunkerme', 'M4.98 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.75V21h-4v-5.1c0-1.22-.02-2.8-1.9-2.8-1.9 0-2.2 1.35-2.2 2.7V21h-4z'],
            ['X', 'https://x.com/bunkerme', 'M18.9 2H22l-7.5 8.6L23 22h-6.8l-5.3-6.9L4.8 22H1.7l8-9.2L1 2h7l4.8 6.3zM17.7 20h1.7L7.4 4H5.6z'],
          ].map(([label, href, d]) => (
            <a key={label} href={href} target="_blank" rel="noopener" aria-label={label} className="bm-footlink" style={{ color: 'var(--text-tertiary)', display: 'inline-flex' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={d} /></svg>
            </a>
          ))}
        </div>
      </div>
      <style>{`.bm-footlink:hover{ color: var(--text-primary); }`}</style>
    </footer>
  );
}

Object.assign(window, { SiteFooter });