// Post-PC Labs — Footer

const Footer = ({ isMobile }) => {
  return (
    <>
      {/* Insights CTA — teal background */}
      <section style={{
        background: '#43C1C0',
        borderTop: '2px solid #0F0F0F',
        borderBottom: '2px solid #0F0F0F',
        padding: isMobile ? '56px 0 64px' : '80px 0 88px',
      }}>
        <div style={{
          maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr auto',
          gap: isMobile ? 32 : 80,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#0F0F0F', marginBottom: 24,
            }}>Insights</div>
            <h2 style={{
              fontFamily: "'Barlow Semi Condensed', sans-serif",
              fontSize: isMobile ? 'clamp(30px, 8vw, 44px)' : 'clamp(36px, 4vw, 52px)', fontWeight: 800,
              lineHeight: 1.0, letterSpacing: '-0.02em', textTransform: 'uppercase',
              color: '#0F0F0F', margin: '0 0 24px',
            }}>The Modern Art of<br/>Software Leadership</h2>
            <p style={{
              fontFamily: "'IBM Plex Sans', sans-serif",
              fontSize: 18, lineHeight: 1.65, fontWeight: 400,
              color: '#0F0F0F', margin: 0, maxWidth: 560,
            }}>Engineering leadership, AI productivity, organizational transformation. Written by practitioners. For practitioners.</p>
          </div>
          <div>
            <a href="https://h6y3.substack.com/" target="_blank" rel="noopener"
              style={{
                fontFamily: "'IBM Plex Sans', sans-serif",
                fontSize: 13, fontWeight: 700,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                padding: '16px 36px',
                background: '#0F0F0F', color: '#F5F4EF',
                textDecoration: 'none',
                display: isMobile ? 'block' : 'inline-block',
                textAlign: isMobile ? 'center' : 'left',
                border: '2px solid #0F0F0F',
                transition: 'background 150ms, color 150ms',
              }}
              onMouseEnter={e => { e.currentTarget.style.background='transparent'; e.currentTarget.style.color='#0F0F0F'; }}
              onMouseLeave={e => { e.currentTarget.style.background='#0F0F0F'; e.currentTarget.style.color='#F5F4EF'; }}
            >Read on Substack →</a>
          </div>
        </div>
      </section>

      {/* Footer bar */}
      <footer style={{
        background: '#EBEBEA',
        borderTop: '2px solid #0F0F0F',
        padding: '28px 0',
      }}>
        <div style={{
          maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="assets/favicon.png" alt="Post-PC Labs" style={{ height: 20, filter: 'grayscale(1) opacity(0.4)' }} />
            <span style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 13, letterSpacing: '0.06em',
              color: '#555', textTransform: 'uppercase',
            }}>Post-PC Labs, LLC</span>
          </div>

          {/* Nav links — hidden on mobile */}
          {!isMobile && (
            <div style={{ display: 'flex', gap: 0 }}>
              {['Services', 'About', 'Insights'].map(l => (
                <a key={l}
                  href={l === 'Insights' ? 'https://h6y3.substack.com/' : '#'}
                  target={l === 'Insights' ? '_blank' : undefined}
                  rel={l === 'Insights' ? 'noopener' : undefined}
                  style={{
                    fontFamily: "'IBM Plex Mono', monospace",
                    fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: '#555', textDecoration: 'none',
                    padding: '0 20px', borderLeft: '1px solid #C8C7C2',
                    transition: 'color 150ms',
                  }}
                  onMouseEnter={e => e.target.style.color='#0F0F0F'}
                  onMouseLeave={e => e.target.style.color='#555'}
                >{l}</a>
              ))}
            </div>
          )}

          <span style={{
            fontFamily: "'IBM Plex Mono', monospace",
            fontSize: 13, color: '#888',
          }}>© 2026</span>
        </div>
      </footer>
    </>
  );
};

Object.assign(window, { Footer });