const { Link: Link_f } = ReactRouterDOM;

function Footer() {
  const onManageCookies = () => window.CyrionConsent && window.CyrionConsent.openPreferences && window.CyrionConsent.openPreferences();
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '64px 0 32px', position: 'relative' }}>
      <div className="page">
        <div style={{ fontSize: 'clamp(36px, 9vw, 140px)', letterSpacing: '-0.06em', lineHeight: 0.85, fontWeight: 500, color: 'var(--ink-faint)', marginBottom: 48, userSelect: 'none', position: 'relative' }}>
          CYRION<span style={{ color: 'var(--accent)' }}>/</span>AI
          <span className="caret" style={{ verticalAlign: '0.06em', marginLeft: '0.02em', width: '0.45em', height: '0.92em', background: 'var(--accent)' }} />
        </div>

        <div className="footer-grid" style={{ paddingBottom: 40, borderBottom: '1px solid var(--line)' }}>
          <div>
            <div className="row" style={{ gap: 10 }}>
              <span style={{ color: 'var(--accent)' }}><LogoMark size={20} /></span>
              <span style={{ fontWeight: 600, fontSize: 13 }}>CYRION<span style={{ color: 'var(--accent)' }}>/</span>AI</span>
            </div>
            <p className="body" style={{ marginTop: 14, maxWidth: 320, fontSize: 13 }}>Intelligence-grade offensive security. Continuous, autonomous, auditor-ready.</p>
            <p className="caption" style={{ marginTop: 24 }}>© 2026 Cyrion Operations Ltd.<br />Registered · DE-EU · 41-2-8819</p>
          </div>
          <FooterCol title="Platform" items={[['AI Red Team', '/#ai-red-team'], ['Attack Surface', '/#platform'], ['Method', '/#method'], ['Threat Feed', '/#feed'], ['Pricing', '/#pricing']]} />
          <FooterCol title="Resources" items={[['Documentation', 'https://docs.cyrion.ai', true], ['Blog', '/blog'], ['FAQ', '/#faq']]} />
          <FooterCol title="Company" items={[['About', '/about'], ['Careers', '/careers'], ['Trust Center', '/trust-center'], ['Contact', '/contact']]} />
          <FooterCol title="Legal" items={[['Engagement charter', '/trust-center#engagement'], ['Privacy', '/privacy'], ['Terms', '/terms'], ['Responsible disclosure', '/trust-center#disclosure']]} onCookieClick={onManageCookies} cookieLabel="Cookie preferences" />
        </div>

        <div style={{ paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14, fontSize: 11, color: 'var(--ink-dim)' }}>
          <span className="bracket">SYSTEM · all regions nominal · 99.997% / 90d</span>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="https://github.com/cyrion-ai" target="_blank" rel="noopener noreferrer" className="dim" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconGithub size={14} />github</a>
            <a href="https://x.com/cyrion_ai" target="_blank" rel="noopener noreferrer" className="dim" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconX size={13} />x.com</a>
            <a href="https://www.linkedin.com/company/cyrion-ai" target="_blank" rel="noopener noreferrer" className="dim" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconLinkedIn size={14} />linkedin</a>
            <Link_f to="/trust-center" style={{ color: 'var(--accent)' }}>status →</Link_f>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, onCookieClick, cookieLabel }) {
  return (
    <div>
      <div className="caption" style={{ marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([label, href, external], i) => (
          <li key={i}>{external ? <a href={href} target="_blank" rel="noopener noreferrer" className="mute" style={{ fontSize: 13 }}>{label}</a> : <Link_f to={href} className="mute" style={{ fontSize: 13 }}>{label}</Link_f>}</li>
        ))}
        {onCookieClick && <li><a href="#" onClick={(e) => { e.preventDefault(); onCookieClick(); }} className="mute" style={{ fontSize: 13 }}>{cookieLabel}</a></li>}
      </ul>
    </div>
  );
}

Object.assign(window, { Footer });