function CTA() {
  return (
    <section id="kontakt" className="cta-section" style={{
      background:"linear-gradient(135deg, var(--sky-soft) 0%, var(--sky) 100%)",
      color:"var(--navy)", padding:"140px 40px", position:"relative", overflow:"hidden",
      borderTop:"1px solid var(--line)",
    }}>
      <div style={{position:"absolute", right:-180, bottom:-180, opacity:0.08}}>
        <CompassRose size={560} />
      </div>
      <div className="cta-grid" style={{maxWidth:1180, margin:"0 auto", position:"relative", display:"grid", gridTemplateColumns:"1.1fr 0.9fr", gap: 80, alignItems:"center"}}>
        <div>
          <div className="sans" style={{fontSize:11, letterSpacing:"0.4em", textTransform:"uppercase", color:"var(--gold)", fontWeight:600, marginBottom:18}}>
            Festmachen ⚓
          </div>
          <h2 className="serif" style={{fontSize:"clamp(40px, 5vw, 76px)", lineHeight:1.02, fontWeight:500, marginBottom: 28, color:"var(--navy)"}}>
            Werfen Sie<br/>
            <span style={{fontStyle:"italic", color:"var(--gold)"}}>die Leinen los.</span>
          </h2>
          <p className="serif" style={{fontSize: 20, lineHeight: 1.6, color:"rgba(26,38,56,0.75)", maxWidth: 520, marginBottom: 40}}>
            Wir antworten innerhalb eines Werktages. Persönlich, am Telefon
            oder direkt am Stadthafen — ganz wie Sie es bevorzugen.
          </p>
          <div style={{display:"flex", gap: 14, flexWrap:"wrap"}}>
            <a href="#kontakt" onClick={(e)=>{e.preventDefault(); window.dispatchEvent(new Event('open-contact'));}} className="sans" style={{
              padding:"20px 36px", background:"var(--navy)", color:"var(--paper)",
              fontSize: 13, letterSpacing:"0.16em", textTransform:"uppercase", fontWeight: 600,
            }}>Anfrage starten →</a>
            <a href="tel:+4934198076 15" className="sans" style={{
              padding:"20px 36px", border:"1px solid var(--navy)", color:"var(--navy)",
              fontSize: 13, letterSpacing:"0.16em", textTransform:"uppercase", fontWeight: 500,
              background:"#fff",
            }}>0341 · 980 76 15</a>
          </div>
        </div>

        <div style={{
          border:"1px solid var(--gold)", padding: 40,
          background:"#fff",
          boxShadow:"0 30px 80px -40px rgba(26,58,92,0.25)",
        }}>
          <div className="serif" style={{fontSize:11, letterSpacing:"0.4em", color:"var(--gold)", textTransform:"uppercase", fontStyle:"italic", marginBottom: 28}}>
            ~ Visitenkarte ~
          </div>
          <div style={{marginBottom: 28}}>
            <Wordmark light={false} />
          </div>
          <div style={{height:1, background:"var(--line)", marginBottom: 28}}></div>
          
          <ContactRow label="Büro" lines={["Käthe-Kollwitz-Straße 46d","04109 Leipzig"]} />
          <ContactRow label="Telefon" lines={["0341 / 980 76 15"]} />
          <ContactRow label="Fax" lines={["0341 / 980 76 14"]} />
          <ContactRow label="E-Mail" lines={["ahoi@bootsversicherung-makler.de"]} />
          <ContactRow label="Sprechzeiten" lines={["Mo – Do · 9:30 – 16:00 Uhr","Fr · 9:30 – 14:00 Uhr","sowie nach Vereinbarung"]} last />
        </div>
      </div>
    </section>
  );
}

function ContactRow({ label, lines, last }) {
  return (
    <div style={{paddingBottom: last ? 0 : 22, marginBottom: last ? 0 : 22, borderBottom: last ? "none" : "1px dashed var(--line)"}}>
      <div className="sans" style={{fontSize:10, letterSpacing:"0.3em", color:"var(--gold)", textTransform:"uppercase", marginBottom:8, fontWeight:600}}>
        {label}
      </div>
      {lines.map((l,i)=>(
        <div key={i} className="serif" style={{fontSize: 17, color:"var(--navy)", lineHeight:1.4}}>{l}</div>
      ))}
    </div>
  );
}

window.CTA = CTA;