/* eslint-disable */
const FinalCTA = () => (
  <section id="kontakt" style={{
    background: 'var(--ink)', color: 'var(--bone)',
    padding: 'var(--s-10) 0',
    position: 'relative',
  }}>
    <div style={{
      maxWidth: 'var(--container)', margin: '0 auto',
      padding: '0 var(--gutter)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--ocher)', marginBottom: 'var(--s-6)',
      }}>
        <span style={{ width: 24, height: 2, background: 'var(--ocher)' }} />
        <span>Letzter Schritt</span>
      </div>

      <h2 className="display" style={{
        color: 'var(--bone)', maxWidth: '12ch', margin: '0 0 var(--s-6) 0',
      }}>
        Startet euren <span style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontWeight: 400, color: 'var(--ocher)', letterSpacing: '-0.01em',
        }}>Cycle.</span>
      </h2>

      <p style={{
        fontSize: 22, lineHeight: 1.45, color: 'rgba(242,238,229,0.85)',
        maxWidth: '46ch', margin: '0 0 var(--s-7) 0',
      }}>
        Kein Verkaufsgespräch. Kein Druck. Lass uns einfach reden — über eure Situation,
        eure Ziele und ob der AI-Cycle der richtige Rahmen für euch ist.
      </p>

      <div style={{
        display: 'flex', gap: 'var(--s-4)', flexWrap: 'wrap',
        marginBottom: 'var(--s-8)',
      }}>
        <a href="mailto:hallo@ai-cycle.ch" style={{
          padding: '16px 26px', background: 'var(--ocher)', color: 'var(--bone)',
          textDecoration: 'none', fontSize: 16, fontWeight: 500, borderRadius: 2,
          transition: 'background .2s cubic-bezier(.2,0,0,1)',
        }}
        onMouseOver={e => e.currentTarget.style.background = 'var(--ocher-deep)'}
        onMouseOut={e => e.currentTarget.style.background = 'var(--ocher)'}>
          Gespräch buchen →
        </a>
        <a href="mailto:hallo@ai-cycle.ch" style={{
          padding: '16px 26px', background: 'transparent', color: 'var(--bone)',
          textDecoration: 'none', fontSize: 16, fontWeight: 500, borderRadius: 2,
          border: '1px solid rgba(242,238,229,0.3)',
          transition: 'border-color .2s cubic-bezier(.2,0,0,1), color .2s cubic-bezier(.2,0,0,1)',
        }}
        onMouseOver={e => { e.currentTarget.style.borderColor = 'var(--ocher)'; e.currentTarget.style.color = 'var(--ocher)'; }}
        onMouseOut={e => { e.currentTarget.style.borderColor = 'rgba(242,238,229,0.3)'; e.currentTarget.style.color = 'var(--bone)'; }}>
          hallo@ai-cycle.ch
        </a>
      </div>

      <div style={{
        borderTop: '1px solid rgba(242,238,229,0.18)',
        paddingTop: 'var(--s-6)',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--s-6)',
      }}>
        {[
          { k: 'Mandate / Jahr', v: 'limitiert auf 10' },
          { k: 'Erstes Gespräch', v: 'unverbindlich · 45 Min' },
          { k: 'Adresse', v: 'Engelgasse 10a · 9000 St. Gallen' },
        ].map(item => (
          <div key={item.k}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: 'var(--ocher)', marginBottom: 8,
            }}>{item.k}</div>
            <div style={{ fontSize: 17, color: 'rgba(242,238,229,0.9)', fontWeight: 500 }}>
              {item.v}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);
window.FinalCTA = FinalCTA;