// TAO Design System — Footer Component
// ui_kits/tao-website/Footer.jsx

function Footer({ onNavigate }) {
  return (
    <footer style={{ background: TAO_COLORS.deepForest, color: 'white', padding: '64px 32px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 56 }}>
          {/* Brand */}
          <div>
            <Logo variant="light" size="sm" />
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: 1.8, marginTop: 20, maxWidth: 280 }}>
              Full-service association management for non-profits, professional organizations, and member-based groups across Canada.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              {['linkedin', 'instagram', 'facebook'].map(s => (
                <a key={s} href="#" style={{ width: 34, height: 34, borderRadius: 2, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 200ms', color: 'rgba(255,255,255,0.6)' }}>
                  <Icon name={s} size={15} color="currentColor" />
                </a>
              ))}
            </div>
          </div>
          {/* Services */}
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: TAO_COLORS.sage, marginBottom: 16 }}>Services</div>
            {['Association Management', 'Conference Management', 'Tradeshow & Events', 'Membership Admin'].map(item => (
              <button key={item} onClick={() => onNavigate('services')} style={{ display: 'block', background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.55)', padding: '4px 0', textAlign: 'left', transition: 'color 200ms' }}>
                {item}
              </button>
            ))}
          </div>
          {/* Company */}
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: TAO_COLORS.sage, marginBottom: 16 }}>Company</div>
            {[['About', 'about'], ['Our Work', 'work'], ['Contact', 'contact']].map(([label, page]) => (
              <button key={page} onClick={() => onNavigate(page)} style={{ display: 'block', background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.55)', padding: '4px 0', textAlign: 'left' }}>
                {label}
              </button>
            ))}
          </div>
          {/* Contact */}
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: TAO_COLORS.sage, marginBottom: 16 }}>Contact</div>
            {[
              { icon: 'map', text: 'Suite 720, 999 West Broadway\nVancouver, BC V5Z 1K5' },
              { icon: 'phone', text: '' },
              { icon: 'mail', text: 'hello@taoservices.ca' },
            ].map(({ icon, text }) => (
              <div key={icon} style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'flex-start' }}>
                <Icon name={icon} size={14} color={TAO_COLORS.sage} style={{ flexShrink: 0, marginTop: 2 }} />
                <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, whiteSpace: 'pre-line' }}>{text}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.3)' }}>
            © 2026 TAO — The Association Office
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            {['Privacy Policy', 'Terms of Use'].map(t => (
              <a key={t} href="#" style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.3)', textDecoration: 'none' }}>{t}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });