// FooterSection.jsx — Editorial dark footer

const FooterSection = ({ onNavigate, bookingUrl }) => {
  const links = [
  { label: 'How it works', page: 'process' },
  { label: 'Who we are', page: 'about' },
  { label: 'Case studies', page: 'stories' },
  { label: 'Book a call', page: 'contact' }];


  return (
    <footer style={{ background: '#fafaf7', padding: '56px 32px 32px', borderTop: '1px solid rgba(26,26,26,0.10)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1.5fr',
          gap: 64, marginBottom: 64, paddingBottom: 48
        }} className="footer-grid">
          {/* Brand */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <button onClick={() => onNavigate('home')} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              background: 'none', border: 'none', cursor: 'pointer', padding: 0, width: 'fit-content'
            }}>
              <img src="assets/logo-leaf.png" alt="coLiberate" style={{ width: 32, height: 32, objectFit: 'contain' }} />
              <span style={{
                fontFamily: "'Fraunces', serif",
                fontSize: 24, fontWeight: 500, color: '#1a1a1a',
                letterSpacing: '-0.02em'
              }}>coLiberate</span>
            </button>
            <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 14, color: '#6b6b66', lineHeight: 1.7,
              fontWeight: 300, maxWidth: 300
            }}>Growth partner for solo consultants + boutique firms. Helping you create clients on LinkedIn and build a life-first business.

            </p>
          </div>

          {/* Nav */}
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Navigate</div>
            {links.map((l) =>
            <button key={l.page} onClick={() => onNavigate(l.page)} style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 14, fontWeight: 300, color: '#1a1a1a',
              background: 'none', border: 'none', cursor: 'pointer',
              textAlign: 'left', padding: 0,
              transition: 'color 150ms'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#7a8a64'}
            onMouseLeave={(e) => e.currentTarget.style.color = '#1a1a1a'}>
              {l.label}</button>
            )}
          </nav>

          {/* CTA */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="eyebrow">Get in touch</div>
            <p style={{
              fontFamily: "'Fraunces', serif",
              fontSize: 24, fontWeight: 500, color: '#1a1a1a', lineHeight: 1.15,
              letterSpacing: '-0.02em', margin: 0, maxWidth: 280
            }}>Ready for life-first growth?</p>
            <a href={bookingUrl} target="_blank" rel="noopener noreferrer" className="btn-primary" style={{ width: 'fit-content' }}>
              Book a call
            </a>
          </div>
        </div>

        {/* Bottom */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 32, borderTop: '1px solid rgba(26,26,26,0.10)'
        }}>
          <span className="eyebrow">© 2026 COLIBERATE VENTURES</span>
          <a
            href="https://www.linkedin.com/in/diaraparker/"
            target="_blank"
            rel="noopener noreferrer"
            className="eyebrow"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              textDecoration: 'none',
              transition: 'color 150ms'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#7a8a64'}
            onMouseLeave={(e) => e.currentTarget.style.color = ''}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" />
            </svg>
          </a>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { FooterSection });