function Footer() {
  return (
    <footer className="site-footer" style={{background:"var(--paper-warm)", color:"rgba(26,38,56,0.65)", padding:"60px 40px 40px", borderTop:"1px solid var(--line)"}}>
      <div style={{maxWidth:1320, margin:"0 auto"}}>
        <div className="footer-cols" style={{display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr 1fr", gap: 60, marginBottom: 48}}>
          <div>
            <Wordmark light={false} />
            <p className="serif" style={{fontSize:14, lineHeight:1.55, marginTop: 22, maxWidth: 320, fontStyle:"italic", color:"rgba(26,38,56,0.6)"}}>
              Versicherungsmakler aus Leidenschaft — Spezialisiert auf
              Bootsversicherungen am Leipziger Stadthafen.
            </p>
          </div>
          <FooterCol title="Leistungen" items={["Bootskasko","Bootshaftpflicht","Skipperhaftpflicht","Charterkaution"]} />
          <FooterCol title="Haus" items={["Über uns","Stadthafen","Partner"]} />
          <FooterCol title="Service" items={["Beitragsrechner","FAQ",{label:"Kontakt", onClick:()=>window.dispatchEvent(new Event('open-contact'))}]} />
        </div>
        <div style={{height:1, background:"var(--line)", marginBottom:24}}></div>
        <div className="footer-bottom" style={{display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:16}}>
          <div className="sans" style={{fontSize:11, letterSpacing:"0.16em", color:"rgba(26,38,56,0.5)"}}>
            © MMXXVI · Agater ⚓ Klisa Versicherungsmakler · bootsversicherung-makler.de
          </div>
          <div className="footer-legal" style={{display:"flex", gap: 24, flexWrap:"wrap"}}>
            {[{l:"Impressum", href:"impressum.html"}, {l:"Datenschutz", href:"datenschutz.html"}, {l:"Haftungsausschluss", href:"haftungsausschluss.html"}, {l:"Erstinformation", href: (typeof window !== 'undefined' && window.__resources?.erstinfo) || "assets/AK_Erstinformation.pdf"}].map(({l, href})=>(
              <a key={l} href={href} target={href.endsWith('.pdf') ? '_blank' : undefined} rel={href.endsWith('.pdf') ? 'noopener' : undefined} className="sans" style={{fontSize:11, letterSpacing:"0.16em", color:"rgba(26,38,56,0.5)", textTransform:"uppercase"}}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items }) {
  return (
    <div>
      <div className="sans" style={{fontSize:11, letterSpacing:"0.32em", textTransform:"uppercase", color:"var(--gold)", fontWeight:600, marginBottom:20}}>{title}</div>
      <ul style={{listStyle:"none"}}>
        {items.map(i => {
          const label = typeof i === 'string' ? i : i.label;
          const onClick = typeof i === 'string' ? undefined : i.onClick;
          return (
            <li key={label} className="serif" style={{fontSize:15, lineHeight:2, color:"rgba(26,38,56,0.7)"}}>
              <a href="#" onClick={(e)=>{ if (onClick) { e.preventDefault(); onClick(); } }}>{label}</a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
window.Footer = Footer;