/* burp.agency — Footer */

const Footer = ({ depth = 0 }) => {
  const r = fileRoutes(depth);
  const mascot = `${'../'.repeat(depth)}assets/burp-mascot.png`;

  return (
    <footer data-screen-label="Footer"
            style={{
              background: 'var(--color-cream)',
              borderTop: '1px solid var(--color-warm-gray)',
              paddingTop: 64, paddingBottom: 40,
            }}>
      <Container>
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 48, alignItems: 'flex-start',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <img src={mascot} alt="" style={{ height: 36, width: 'auto' }} />
              <span style={{ fontFamily: 'Georgia, serif', fontSize: 20, letterSpacing: '-0.02em' }}>burp.agency</span>
            </div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 14,
              color: 'var(--color-mid-gray)', lineHeight: 1.7,
            }}>
              Full-funnel B2B SaaS marketing<br/>
              <a href="mailto:rohan@burp.agency" style={{ color: 'var(--color-ink)' }}>rohan@burp.agency</a>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href={r.words}  style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Words</a></li>
              <li><a href={r.shape}  style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Shape</a></li>
              <li><a href={r.motion} style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Motion</a></li>
              <li><a href={r.work}   style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Work</a></li>
              <li><a href={r.blog}   style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Blog</a></li>
              <li><a href="#audit" onClick={e => { e.preventDefault(); bookAudit(); }} style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Audit</a></li>
              <li><a href={r.contact} style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: 'var(--color-ink)' }}>Contact</a></li>
            </ul>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['LinkedIn', 'Substack', 'Instagram'].map(l => (
                <li key={l}>
                  <a href="#" style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
                    color: 'var(--color-mid-gray)',
                  }}>{l}</a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{
          marginTop: 48, paddingTop: 24,
          borderTop: '1px solid var(--color-warm-gray)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
          fontFamily: 'Inter, sans-serif', fontSize: 12,
          color: 'var(--color-mid-gray)',
        }}>
          <span>© 2026 burp.agency · Made for the audit, not the deck.</span>
          <span>v.0.4 · Updated this Tuesday</span>
        </div>
      </Container>
    </footer>
  );
};

Object.assign(window, { Footer });