// Swivy logo — wordmark + glyph. Monochrome, scalable.
// The glyph is a hand-drawn "S-loop" made of two opposing arcs —
// evokes a signature, a key bow, and motion (swivel).

const SwivyGlyph = ({ size = 28, color = "currentColor", strokeWidth }) => {
  const sw = strokeWidth ?? Math.max(1.5, size * 0.09);
  return (
    <svg viewBox="0 0 32 32" width={size} height={size} fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {/* upper arc — starts top-right, curves left and down */}
      <path d="M23.5 7.5 C19 5 11.5 5.5 9.5 10.5 C7.8 14.8 13 16 16 16"/>
      {/* lower arc — from middle curves right then down-left */}
      <path d="M16 16 C19 16 24.2 17.2 22.5 21.5 C20.5 26.5 13 27 8.5 24.5"/>
      {/* pivot dot — the swivel */}
      <circle cx="16" cy="16" r={sw * 0.55} fill={color} stroke="none"/>
    </svg>
  );
};

const SwivyMark = ({ size = 28, inverse = false }) => (
  <div style={{
    width: size, height: size, borderRadius: size * 0.26,
    background: inverse ? "var(--bg)" : "var(--ink)",
    color: inverse ? "var(--ink)" : "var(--bg)",
    display: "grid", placeItems: "center",
    boxShadow: inverse ? "inset 0 0 0 1px var(--line)" : "none",
  }}>
    <SwivyGlyph size={size * 0.68}/>
  </div>
);

const SwivyWordmark = ({ size = 22, inverse = false, withMark = true }) => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.42 }}>
    {withMark && <SwivyMark size={size * 1.22} inverse={inverse}/>}
    <span style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 600,
      fontSize: size,
      letterSpacing: "-0.035em",
      color: inverse ? "var(--bg)" : "var(--ink)",
      lineHeight: 1,
    }}>swivy</span>
  </div>
);

Object.assign(window, { SwivyGlyph, SwivyMark, SwivyWordmark });