/* Inline conversion-band — sits between high-engagement sections (after Testimonials, after Pakete).
   Per LP-Mode: Sticky-CTA is passive safety, inline-CTAs are active conversion-triggers
   tied to the moment the reader just had. Brand-Signature-Gradient (blue→pink) als
   Pattern-Break — visuell distinkt von den alternierenden white/bg-page Sections drumrum.
*/
function InlineCta({ question, label = 'Fit-Check anfragen', href = '#kontakt' }) {
  return (
    <section className="inline-cta" style={{ padding: '56px 0', background: 'var(--ap-gradient)', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="inline-cta-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(22px, 2.6vw, 32px)', fontWeight: 500, color: '#fff', letterSpacing: '-0.01em', lineHeight: 1.25, maxWidth: 680, textShadow: '0 1px 2px rgba(0,0,0,0.08)' }}>
            {question}
          </div>
          <a href={href} className="btn inline-cta-btn" style={{ whiteSpace: 'nowrap', padding: '14px 26px', fontSize: 15, background: '#fff', color: 'var(--fg-1)', boxShadow: '0 6px 18px rgba(0,0,0,0.18)' }}>
            {label} <span style={{ fontSize: 16 }}>→</span>
          </a>
        </div>
      </div>
      <style>{`
        section.inline-cta .inline-cta-btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 10px 26px rgba(0,0,0,0.24);
        }
        @media (max-width: 640px) {
          section.inline-cta { padding: 40px 0 !important; }
          section.inline-cta .inline-cta-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
          }
        }
      `}</style>
    </section>
  );
}
window.InlineCta = InlineCta;