/* Alchemy website — footer (shared) */
function Footer({ onNavigate }) {
  const col = { display: 'flex', flexDirection: 'column', gap: 10 };
  const head = {
    fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.72rem',
    letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--slate-300)', margin: 0,
  };
  const line = { fontFamily: 'var(--font-body)', fontSize: '0.95rem', color: 'var(--slate-300)', lineHeight: 1.5 };
  const link = { ...line, cursor: 'pointer' };
  const extLink = { ...link, display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' };

  return (
    <footer style={{ background: 'var(--navy-800)', color: 'var(--text-on-dark)' }}>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--space-9) var(--gutter) var(--space-7)',
        display: 'grid', gridTemplateColumns: '1.4fr 0.9fr 0.9fr 0.9fr 0.9fr', gap: 'var(--space-6)',
      }}>
        <div style={{ ...col, gap: 18 }}>
          <img src="../../assets/logo-mark-white.png" alt="Alchemy" style={{ height: 96, width: 'auto', alignSelf: 'flex-start' }} />
          <p style={{ ...line, maxWidth: 280 }}>Space is only the beginning. Intentional coworking to build your network and your business.</p>
        </div>
        <div style={col}>
          <p style={head}>Locations</p>
          <p style={line}><strong style={{ color: '#fff' }}>Downtown Gastonia</strong><br />121 W. Main Ave<br />Gastonia, NC 28052</p>
          <p style={line}><strong style={{ color: '#fff' }}>Charlotte</strong><br />2459 Wilkinson Blvd<br />Charlotte, NC 28208</p>
          <p style={line}><strong style={{ color: '#fff' }}>Loray Gastonia</strong><br />300 S Firestone St<br />Suite 200 H<br />Gastonia, NC 28052</p>
        </div>
        <div style={col}>
          <p style={head}>Hours</p>
          <p style={line}><strong style={{ color: '#fff' }}>Coworking</strong><br />24 / 7</p>
          <p style={line}><strong style={{ color: '#fff' }}>The Wandering Cup</strong> (Downtown Gastonia)<br />Mon to Fri 7a to 4p<br />Sat 8a to 12p</p>
        </div>
        <div style={col}>
          <p style={head}>Explore</p>
          {[['offices','Offices'],['desks','Desks'],['join','Business Club'],['meeting','Meeting Rooms'],['tour','Schedule a Tour'],['tour','Contact Us']].map(([id,l]) => (
            <span key={l} style={link} onClick={() => onNavigate(id)}>{l}</span>
          ))}
        </div>
        <div style={col}>
          <p style={head}>Merch</p>
          <a style={extLink} href="https://www.unemployable.shop" target="_blank" rel="noopener noreferrer">Unemployable ↗</a>
          <span style={{ ...line, fontSize: '0.85rem', color: 'var(--slate-400)' }}>Wear the mindset. Shop the Unemployable line.</span>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--border-on-dark)' }}>
        <div style={{
          maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '1.25rem var(--gutter)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontFamily: 'var(--font-label)', fontSize: '0.74rem', letterSpacing: '0.06em',
          textTransform: 'uppercase', color: 'var(--slate-400)',
        }}>
          <span>© 2026 Alchemy Co-Working</span>
          <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
            <a style={{ color: 'var(--slate-400)', textDecoration: 'none' }} href={window.alcUrl ? window.alcUrl('privacy') : '#'}>Privacy Policy</a>
            <a style={{ color: 'var(--slate-400)', textDecoration: 'none' }} href={window.alcUrl ? window.alcUrl('terms') : '#'}>Terms &amp; Conditions</a>
          </div>
          <span>(704) 753-8722 · team@alchemycowork.com</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;