function Partners() {
  const partnersTop = [
    { name: "Pantaenius", id: "logoPantaenius", logo: "assets/logos/pantaenius.png", note: "Internationaler Yachtversicherer" },
    { name: "Nammert", id: "logoNammert", logo: "assets/logos/nammert.png", note: "Spezialist für Binnenreviere" },
    { name: "Helvetia", id: "logoHelvetia", logo: "assets/logos/helvetia.svg", note: "Schweizer Tradition seit 1858" },
    { name: "Allianz Esa", id: "logoAllianzEsa", logo: "assets/logos/allianz-esa.png", note: "Marktführer für Wassersport" },
  ];
  const partnersBottom = [
    { name: "Württembergische", id: "logoWuerttembergische", logo: "assets/logos/wuerttembergische.png", note: "Vorsorge mit Tradition seit 1828" },
    { name: "Gothaer", id: "logoGothaer", logo: "assets/logos/gothaer.png", note: "Deutscher Versicherer seit 1820" },
    { name: "Baloise", id: "logoBaloise", logo: "assets/logos/baloise.png", note: "Schweizer Sicherheit seit 1863" },
    { name: "Mannheimer", id: "logoMannheimer", logo: "assets/logos/mannheimer.png", note: "Spezialist für Wassersport" },
  ];
  return (
    <section id="partner" className="partners-section" style={{
      background:"var(--sky-soft)", color:"var(--navy)", padding:"120px 40px",
      position:"relative", overflow:"hidden",
      borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)",
    }}>
      <div style={{position:"absolute", inset:0, opacity:0.05,
        backgroundImage: "repeating-linear-gradient(45deg, var(--navy) 0, var(--navy) 1px, transparent 1px, transparent 24px)"}} />
      <div style={{maxWidth:1320, margin:"0 auto", position:"relative"}}>
        <div style={{textAlign:"center", marginBottom: 72}}>
          <div className="sans" style={{fontSize:11, letterSpacing:"0.4em", textTransform:"uppercase", color:"var(--gold)", fontWeight:600, marginBottom:18}}>
            ⚓ Unsere Häuser
          </div>
          <h2 className="serif" style={{fontSize:"clamp(36px, 4vw, 56px)", lineHeight:1.1, fontWeight:500, maxWidth: 820, margin:"0 auto"}}>
            Acht Spezialisten —<br/>
            <span style={{fontStyle:"italic", color:"var(--gold)"}}>ein Ansprechpartner.</span>
          </h2>
          <p className="serif" style={{fontSize: 18, lineHeight:1.6, color:"rgba(26,38,56,0.7)", maxWidth: 640, margin:"28px auto 0"}}>
            Wir sind unabhängig — und kooperieren mit den führenden
            Bootsversicherern Europas. Sie erhalten Vergleich, Beratung
            und Vermittlung aus einer Hand.
          </p>
        </div>

        {/* Top row */}
        <div className="partners-grid" style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 0, border:"1px solid var(--line)", background:"#fff"}}>
          {partnersTop.map((p, i) => (
            <PartnerCard key={p.name} p={p} i={i} total={partnersTop.length} />
          ))}
        </div>

        {/* Bottom row */}
        <div className="partners-grid" style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 0, border:"1px solid var(--line)", borderTop:"none", background:"#fff"}}>
          {partnersBottom.map((p, i) => (
            <PartnerCard key={p.name} p={p} i={i + partnersTop.length} total={partnersBottom.length} />
          ))}
        </div>

        <div style={{textAlign:"center", marginTop: 56}}>
          <p className="serif" style={{fontSize:14, color:"rgba(26,38,56,0.55)", fontStyle:"italic"}}>
            Auf Wunsch vergleichen wir auch außerhalb dieser Auswahl — Ihre Nutzung entscheidet.
          </p>
        </div>
      </div>
    </section>
  );
}

function PartnerCard({ p, i, total }) {
  const colIdx = i % 4;
  return (
    <div style={{
      padding:"40px 24px",
      borderRight: colIdx < 3 ? "1px solid var(--line)" : "none",
      textAlign:"center",
      display:"flex", flexDirection:"column", alignItems:"center",
    }}>
      <div className="serif" style={{fontSize:10, letterSpacing:"0.36em", color:"var(--gold)", textTransform:"uppercase", marginBottom:18, fontStyle:"italic"}}>
        Partner · {String(i + 1).padStart(2, "0")}
      </div>
      <div style={{
        height: 70, width:"100%",
        display:"flex", alignItems:"center", justifyContent:"center",
        marginBottom: 18,
      }}>
        <img src={(typeof window !== 'undefined' && window.__resources?.[p.id]) || p.logo} alt={p.name + " Logo"}
          style={{maxHeight:"100%", maxWidth:"82%", objectFit:"contain", display:"block"}}
          onError={(e)=>{e.target.style.display="none"; e.target.parentElement.innerHTML=`<span class="serif" style="font-size:34px;font-style:italic;color:var(--navy);font-weight:500;line-height:1">${p.name[0]}</span>`;}} />
      </div>
      <div style={{width:28, height:1, background:"var(--gold)", margin:"0 auto 12px"}}></div>
      <div className="serif" style={{fontSize: 13, color:"rgba(26,38,56,0.6)", fontStyle:"italic", lineHeight:1.4}}>
        {p.note}
      </div>
    </div>
  );
}

window.Partners = Partners;