// Original anchor mark — geometric, gold
function AnchorMark({ size = 40, color = "var(--gold)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="32" cy="11" r="4.5" stroke={color} strokeWidth="1.6" />
      <path d="M32 16 L32 54" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
      <path d="M22 24 L42 24" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
      <path d="M14 40 C 16 50, 24 56, 32 56 C 40 56, 48 50, 50 40" stroke={color} strokeWidth="1.6" strokeLinecap="round" fill="none" />
      <path d="M14 40 L10 36 M14 40 L18 38" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
      <path d="M50 40 L54 36 M50 40 L46 38" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

// Wordmark used in nav + footer
function Wordmark({ light = false, size = 1 }) {
  const ink = light ? "#f5f1ea" : "var(--navy)";
  const gold = "var(--gold)";
  return (
    <div style={{display:"flex", alignItems:"center", gap: 12*size}}>
      <AnchorMark size={36*size} color={gold} />
      <div style={{lineHeight:1}}>
        <div className="sans" style={{fontSize: 18*size, letterSpacing:"0.18em", fontWeight:500, color: ink, textTransform:"uppercase"}}>
          Agater <span style={{color:gold, fontSize: 16*size}}>⚓</span> Klisa
        </div>
        <div className="serif" style={{fontSize: 11*size, letterSpacing:"0.32em", color: light? "rgba(245,241,234,0.65)":"rgba(10,24,40,0.55)", marginTop: 4*size, textTransform:"uppercase", fontWeight:500}}>
          bootversicherung-makler.de
        </div>
      </div>
    </div>
  );
}

window.AnchorMark = AnchorMark;
window.Wordmark = Wordmark;