/* eslint-disable */
const Footer = () => (
  <footer style={{
    background: 'var(--bone-2)', color: 'var(--ink)',
    borderTop: '1px solid var(--rule)',
    padding: 'var(--s-8) 0 var(--s-5)',
  }}>
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 'var(--s-7)',
        paddingBottom: 'var(--s-6)', borderBottom: '1px solid var(--rule)',
      }}>
        <div>
          <div style={{
            fontWeight: 600, fontSize: 22, letterSpacing: '-0.02em',
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 'var(--s-3)',
          }}>
            <span>AI</span>
            <span style={{ width: 22, height: 3, background: 'var(--ink)' }} />
            <span>Cycle</span>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: '32ch', margin: 0 }}>
            Handwerk in eurem Team. Vorsprung mit uns.
          </p>
          <p style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--ocher)',
            marginTop: 'var(--s-4)',
          }}>
            Limitiert auf 10 Mandate / Jahr
          </p>
        </div>
        {[
          { t: 'Kontakt', items: ['hallo@ai-cycle.ch', 'Engelgasse 10a', '9000 St. Gallen'] },
          { t: 'Cycle', items: ['Kick-Off', 'Foundation', 'Focus', 'Build', 'Pulse'] },
          { t: 'Sonst', items: ['Über uns', 'Cases', 'FAQ', 'Impressum'] },
        ].map(col => (
          <div key={col.t}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-4)',
            }}>{col.t}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {col.items.map(it => (
                <li key={it} style={{ fontSize: 14, color: 'var(--fg-2)' }}>{it}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 'var(--s-4)', display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--fg-3)',
      }}>
        <div>AI-Cycle GmbH · Schweiz</div>
        <div>© 2026 · Impressum · Datenschutz</div>
      </div>
    </div>
  </footer>
);
window.Footer = Footer;