/* Wordmark — small reusable for header + footer.
   Combines IM Fell English italic "potion" + roman "post" + .io super.
   The sigil left of it is a tiny alchemical mark; flask-shape in gold. */

function Sigil({ size = 26 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" style={{display:'block'}}>
      {/* circle stamp */}
      <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1.2" opacity=".65" />
      <circle cx="16" cy="16" r="11.5" fill="none" stroke="currentColor" strokeWidth=".7" opacity=".4" />
      {/* tiny flask inside */}
      <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <path d="M13.5 8 L13.5 13 L9.5 22 Q9.5 24 11.5 24 L20.5 24 Q22.5 24 22.5 22 L18.5 13 L18.5 8 Z" />
        <path d="M12.5 8 L19.5 8" />
        {/* liquid level */}
        <path d="M11.5 18 L20.5 18" opacity=".55" />
        {/* bubbles */}
      </g>
      <circle cx="13" cy="20" r=".7" fill="currentColor" opacity=".55" />
      <circle cx="17" cy="21" r=".7" fill="currentColor" opacity=".55" />
      {/* steam */}
      <path d="M14 6 Q13 4 14 3 M16 6 Q17 4 16 3 M18 6 Q17 4 18 3" stroke="currentColor" strokeWidth=".9" fill="none" opacity=".55" strokeLinecap="round" />
    </svg>
  );
}

function Wordmark({ size = 26 }) {
  return (
    <span className="wm" style={{ fontSize: size }}>
      <span className="wm-sigil"><Sigil size={size * 1.1} /></span>
      <span className="wm-potion">potion</span>
      <span className="wm-post">post</span>
      <span className="wm-io">.io</span>
    </span>
  );
}

window.Wordmark = Wordmark;
window.Sigil = Sigil;