/* OVM SiteFooter — dark footer with link columns + CTA strip. */
const { Eyebrow: OVMEyebrow } = window.OgdenVictoryMindsetDesignSystem_d92c3e;

function SiteFooter({ onNav, logoSrc = '../../assets/logo-mark.png' }) {
  const go = (id) => (e) => { e.preventDefault(); onNav && onNav(id); };
  const cols = [
    ['Programs', [['Speaking', 'speaking'], ['Podcast', 'podcast'], ['Mastermind', 'home'], ['Coaching', 'home'], ['For Teams', 'home']]],
    ['Company', [['About Marques', 'about'], ['The Book', 'book'], ['Press', 'home'], ['Contact', 'speaking']]],
  ];
  return (
    <footer style={{ background: 'var(--ink-950)', borderTop: '1px solid var(--border-subtle)' }}>
      <div className="ovm-container ovm-container--wide" style={{ paddingBlock: 'var(--space-8)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(220px, 1.4fr) repeat(2, 1fr)', gap: 'var(--space-7)', alignItems: 'start' }} className="ovm-footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <img src={logoSrc} alt="OVM" style={{ width: 44, height: 44 }} />
              <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18, color: 'var(--text-strong)' }}>OGDEN</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--blue-400)', marginTop: 3 }}>Victory Mindset</span>
              </span>
            </div>
            <p style={{ fontSize: 14.5, color: 'var(--text-muted)', maxWidth: 320, lineHeight: 1.6 }}>
              Keynotes, masterminds, coaching and a top-0.5% podcast — built around one idea: bet on the mindset, not the past.
            </p>
          </div>
          {cols.map(([title, items]) => (
            <div key={title}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-faint)', marginBottom: 16 }}>{title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {items.map(([label, id]) => (
                  <a key={label} href="#" onClick={go(id)} style={{ fontSize: 14.5, color: 'var(--text-body)', width: 'fit-content', transition: 'color .2s' }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--blue-300)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-body)'}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'var(--space-8)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-faint)' }}>© {new Date().getFullYear()} Ogden Victory Mindset LLC</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-faint)', letterSpacing: '0.04em' }}>BET ON WHAT COMES NEXT</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteFooter });