// Footer.jsx — site footer (offensive-only) with path-aware links
const Footer = ({ onNav }) => {
  const _p = location.pathname;
  const inSub = /\/(services|blog|legal)\//.test(_p);
  const root = (p) => p; // links are already root-relative
  const home = (h) => `/#${h.replace(/^#/, '')}`;

  const cols = [
    { title: 'Services', links: [
      { l: 'Penetration Testing',            h: root('/services/vapt/') },
      { l: 'Web Application Pentesting',     h: root('/services/web/') },
      { l: 'Mobile Application Pentesting',  h: root('/services/mobile/') },
      { l: 'Cloud Pentesting',               h: root('/services/cloud/') },
      { l: 'Continuous Pentesting',          h: root('/services/ptaas/') },
      { l: 'Red Teaming',                    h: root('/services/red-team/') },
      { l: 'IT Support',                     h: root('/it-support/') }, // TEMPORARY offering — remove with /it-support/
    ]},
    { title: 'Company', links: [
      { l: 'About',     h: root('/about/') },
      { l: 'Philosophy', h: root('/philosophy/') },
      { l: 'Careers',   h: root('/careers/') },
      { l: 'Customers', h: root('/customers/') },
      { l: 'Contact',   h: root('/contact/') },
    ]},
    { title: 'Resources', links: [
      { l: 'Blog',          h: root('/blog/') },
      { l: 'Pricing',       h: root('/pricing/') },
      { l: 'Partners',      h: root('/partners/') },
      { l: 'Sample report', h: root('/resources/#sample') },
      { l: 'Trust center',  h: root('/about/#compliance') },
    ]},
    { title: 'Legal', links: [
      { l: 'Privacy policy',   h: root('/legal/privacy-policy/') },
      { l: 'Terms of service', h: root('/legal/terms-of-service/') },
      { l: 'Responsible disclosure', h: root('/contact/#disclose') },
      { l: 'MSA / NDA',        h: root('/contact/') },
    ]},
  ];

  return (
    <footer style={{
      background: '#010102', borderTop: '1px solid #23252a',
      padding: '64px 32px 32px',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1.4fr repeat(3, 1fr)', gap: 48,
        marginBottom: 48,
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 300 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <GsMark size={20} />
            <GsWordmark height={20} />
          </div>
          <p style={{ fontSize: 13, color: '#8a8f98', lineHeight: 1.6, margin: 0 }}>
            Manual penetration testing and red teaming by an experienced team. We stay with you until the findings are fixed.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
            <a href="mailto:info@greysurface.com" style={{ fontSize: 12.5, color: '#d0d6e0', textDecoration: 'none', fontFamily: 'var(--font-mono)' }}>info@greysurface.com</a>
          </div>
          {/* Status indicator */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 10px', borderRadius: 9999,
            background: '#0f1011', border: '1px solid #23252a',
            alignSelf: 'flex-start', marginTop: 6,
          }}>
            <div className="gs-pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: '#27a644' }} />
            <span style={{ fontSize: 11.5, color: '#d0d6e0', fontWeight: 500 }}>12 engagements active this week</span>
          </div>
        </div>

        {cols.map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 12, fontWeight: 500, color: '#f7f8f8', marginBottom: 14 }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {col.links.map(link => (
                <a key={link.l} href={link.h} style={{
                  fontSize: 13, color: '#8a8f98', textDecoration: 'none', cursor: 'pointer',
                  transition: 'color 120ms ease-out',
                }}
                onMouseEnter={e => e.target.style.color = '#f7f8f8'}
                onMouseLeave={e => e.target.style.color = '#8a8f98'}
                >{link.l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Compliance strip */}
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: '24px 0', borderTop: '1px solid #1a1b1e', borderBottom: '1px solid #1a1b1e',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 16,
      }}>
        <span style={{ fontSize: 11.5, color: '#62666d', textTransform: 'uppercase', letterSpacing: '0.4px', fontWeight: 500 }}>Standards and certifications</span>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          {['OWASP WSTG', 'OSSTMM v3', 'NIST SP 800-115', 'PTES', 'CREST-aligned', 'OSCP · OSEP · OSWE'].map(c => (
            <span key={c} style={{
              fontSize: 12, color: '#8a8f98', fontFamily: 'var(--font-mono)', letterSpacing: '0.3px',
            }}>{c}</span>
          ))}
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{
        maxWidth: 1280, margin: '24px auto 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 12,
      }}>
        <span style={{ fontSize: 11.5, color: '#62666d' }}>© 2026 GreySurface, Inc. All rights reserved.</span>
        <span style={{ fontSize: 11.5, color: '#62666d' }}>GreySurface is a registered trademark. All client work is delivered under NDA.</span>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });