const { Wordmark, Divider } = window.IndigoAdvisoryDesignSystem_fba97f;

function SiteFooter() {
  const offices = [
    ['Dubai', '25.20° N, 55.27° E'],
    ['London', '51.51° N, 0.13° W'],
    ['Hong Kong', '22.32° N, 114.17° E'],
    ['Mumbai', '19.08° N, 72.88° E'],
  ];
  return (
    <footer style={{ background: '#08172a', color: 'var(--text-invert)', padding: 'var(--space-9) var(--gutter) var(--space-6)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--space-7)' }}>
          <div style={{ maxWidth: 320 }}>
            <Wordmark size={28} tone="invert" dot={false} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-relaxed)', color: 'var(--ink-300)', marginTop: 'var(--space-4)' }}>
              Negotiation, structuring, and investing for companies that move markets.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: 'var(--space-5) var(--space-8)' }}>
            {offices.map(([city, coord]) => (
              <div key={city}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h4)', fontWeight: 'var(--fw-med)' }}>{city}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', color: 'var(--ink-400)', marginTop: 4 }}>{coord}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: 1, background: 'rgba(212,175,55,0.18)', margin: 'var(--space-7) 0 var(--space-5)' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', color: 'var(--ink-400)', letterSpacing: '0.08em' }}>
          <span>© 2026 INDIGO ADVISORY</span>
          <span>ADVISORY · STRUCTURING · CAPITAL</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteFooter });