function Leistungen() {
  const services = [
    {
      num:"I",
      title:"Bootskasko",
      teaser:"Schutz für Rumpf, Maschine und Ausrüstung",
      points:[
        "Sturm, Strandung, Diebstahl, Brand",
        "Transport- und Liegeplatzschäden",
        "Eigene Schäden durch Bedienungsfehler",
        "Neuwertentschädigung optional",
      ],
    },
    {
      num:"II",
      title:"Bootshaftpflicht",
      teaser:"Pflichtschutz für Schäden gegenüber Dritten",
      points:[
        "Personen- und Sachschäden",
        "Bis 10 Mio. € Deckungssumme",
        "Mietboote & Charter inkludiert",
        "Auch im europäischen Ausland",
      ],
    },
    {
      num:"III",
      title:"Skipperhaftpflicht",
      teaser:"Sicherheit für Charter und fremde Boote",
      points:[
        "Schäden am gecharterten Boot",
        "Ausfall durch Verschulden",
        "Crew-Mitversicherung möglich",
        "Weltweite Geltung",
      ],
    },
    {
      num:"IV",
      title:"Insassen­unfall",
      teaser:"Persönlicher Schutz für Sie und Ihre Crew",
      points:[
        "Invaliditäts­leistung",
        "Tagegeld & Krankenhauskosten",
        "Bergungs­kosten",
        "Auf jedem Boot gültig",
      ],
    },
    {
      num:"V",
      title:"Trailer & Transport",
      teaser:"Unterwegs zwischen den Seen",
      points:[
        "Trailer-Kasko",
        "Transportschäden",
        "Diebstahl unterwegs",
        "Auch im EU-Ausland",
      ],
    },
    {
      num:"VI",
      title:"Charter­kaution",
      teaser:"Statt Kaution — Versicherung",
      points:[
        "Ersetzt hohe Bar‑Kautionen",
        "Selbstbehalt­schutz",
        "Sofort online abschließbar",
        "Mittelmeer & Ostsee",
      ],
    },
  ];

  return (
    <section id="leistungen" className="leistungen-section" style={{background:"var(--paper)", padding:"60px 40px 140px"}}>
      <div style={{maxWidth:1320, margin:"0 auto"}}>
        <div className="leistungen-header" style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap: 80, marginBottom: 80, alignItems:"end"}}>
          <div>
            <div className="sans" style={{fontSize:11, letterSpacing:"0.4em", textTransform:"uppercase", color:"var(--gold)", fontWeight:600, marginBottom:18}}>
              Leistungen
            </div>
            <h2 className="serif" style={{fontSize:"clamp(40px, 4.5vw, 64px)", lineHeight:1.05, color:"var(--navy)", fontWeight:500}}>
              Vom Schlauchboot<br/>
              <span style={{fontStyle:"italic", color:"var(--gold)"}}>bis zur Yacht.</span>
            </h2>
          </div>
          <div>
            <div style={{height:1, background:"var(--line)", marginBottom:24}}></div>
            <p className="serif" style={{fontSize: 19, lineHeight: 1.6, color:"rgba(10,24,40,0.72)", maxWidth: 580}}>
              Sechs Bausteine, individuell kombinierbar. Wir analysieren Ihr
              Fahrgebiet, Ihren Bootstyp und Ihre Nutzung — und entwickeln daraus
              eine maßgefertigte Police, abgestimmt auf das Leipziger Neuseenland
              und darüber hinaus.
            </p>
          </div>
        </div>

        <div className="leistungen-grid" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, border:"1px solid var(--line)"}}>
          {services.map((s, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            return (
              <ServiceCard key={i} {...s}
                style={{
                  borderRight: col < 2 ? "1px solid var(--line)" : "none",
                  borderBottom: row < Math.floor((services.length-1)/3) ? "1px solid var(--line)" : "none",
                }}
              />
            );
          })}
        </div>

        <SpezialButton />
      </div>
    </section>
  );
}

function SpezialButton() {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href="#kontakt"
      className="sans"
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      className="leistungen-spezial-btn"
      style={{
        display:"flex", alignItems:"center", justifyContent:"center", gap: 28,
        position:"relative",
        padding:"48px 40px 44px",
        background: hover ? "var(--navy)" : "transparent",
        color: hover ? "#f5f1ea" : "var(--navy)",
        border:"1px solid var(--line)",
        borderTop:"none",
        transition:"all .35s ease",
      }}>
      <span className="serif" style={{
        fontSize: 56, fontStyle:"italic", fontWeight: 400, lineHeight: 1,
        color:"var(--gold)",
        opacity: hover ? 1 : 0.5,
        transition:"opacity .35s",
      }}>VII</span>
      <span className="serif" style={{fontSize: 30, fontWeight: 500, lineHeight:1.15, letterSpacing:"-0.005em"}}>
        Sonderanfragen &amp; Spezialrisiko
      </span>
      <span style={{
        width:36, height:36, borderRadius:"50%",
        border:"1px solid " + (hover ? "var(--gold)" : "var(--line)"),
        display:"inline-flex", alignItems:"center", justifyContent:"center",
        color: hover ? "var(--gold)" : "var(--navy)",
        transition:"all .35s",
        transform: hover ? "rotate(-45deg)" : "rotate(0)",
      }}>→</span>
    </a>
  );
}

function ServiceCard({num, title, teaser, points, style}) {
  const [hover, setHover] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const pdfHref = (typeof window !== 'undefined' && window.__resources?.leistungspdf) || "assets/Leistungsvergleich.pdf";
  return (
    <div
      className={"service-card" + (open ? " is-open" : "")}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      onClick={(e)=>{ if (e.target.closest('.service-card-arrow')) return; setOpen(o=>!o); }}
      style={{
        padding:"48px 40px 44px", background: hover ? "var(--navy)" : "transparent",
        color: hover ? "#f5f1ea" : "var(--navy)",
        transition:"all .35s ease", position:"relative", cursor:"pointer",
        ...style,
      }}>
      <div className="service-card-head" style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom: 24}}>
        <div className="serif" style={{fontSize: 56, color: hover ? "var(--gold)" : "var(--gold)", fontStyle:"italic", lineHeight:1, fontWeight: 400, opacity: hover? 1 : 0.5}}>
          {num}
        </div>
        <a className="service-card-arrow"
          href={pdfHref} target="_blank" rel="noopener"
          aria-label={"Leistungsvergleich " + title + " als PDF öffnen"}
          onClick={(e)=>e.stopPropagation()}
          style={{
            width:36, height:36, borderRadius:"50%",
            border:"1px solid " + (hover ? "var(--gold)" : "var(--line)"),
            display:"flex", alignItems:"center", justifyContent:"center",
            color: hover ? "var(--gold)" : "var(--navy)",
            transition:"all .35s",
            transform: hover ? "rotate(-45deg)" : "rotate(0)",
            textDecoration:"none",
            cursor:"pointer",
          }}>→</a>
      </div>
      <h3 className="serif service-card-title" style={{fontSize: 30, fontWeight: 500, marginBottom: 10, lineHeight:1.15}}>{title}</h3>
      <p className="serif service-card-teaser" style={{fontSize: 16, lineHeight: 1.5, color: hover ? "rgba(245,241,234,0.7)" : "rgba(10,24,40,0.65)", marginBottom: 24, fontStyle:"italic"}}>
        {teaser}
      </p>
      <div className="service-card-detail">
        <div style={{height:1, background: hover ? "rgba(201,165,90,0.4)" : "var(--line)", marginBottom:20}}></div>
        <ul style={{listStyle:"none"}}>
          {points.map((p,i)=>(
            <li key={i} className="sans" style={{fontSize:13.5, lineHeight:1.7, color: hover ? "rgba(245,241,234,0.85)" : "rgba(10,24,40,0.75)", display:"flex", alignItems:"flex-start", gap:10, paddingLeft: 0}}>
              <span style={{color:"var(--gold)", marginTop:2}}>·</span>{p}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

window.Leistungen = Leistungen;