/* Wordmark — Filepile caps + stone printer's mark with idle skip. */

function Wordmark({ size = 84, withTagline = false, skip = true }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "flex-start", flexDirection: "column", gap: 4, maxWidth: "100%" }}>
      <div className="ss-wordmark" style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "0.18em",
        fontFamily: "Filepile, cursive",
        fontSize: size,
        lineHeight: 0.9,
        color: "var(--ss-navy)",
        letterSpacing: 0,
        whiteSpace: "nowrap",
      }}>
        skipstone
        <svg viewBox="0 0 50 32" width="0.7em" height="0.45em" aria-hidden="true"
             className={skip ? "stone-skip" : ""}>
          <path d="M 6 16 Q 14 4, 28 4 Q 42 5, 46 16 Q 48 26, 32 28 Q 14 29, 4 22 Q 1 18, 6 16 Z"
                fill="var(--ss-mint)" stroke="var(--ss-mulberry)" strokeWidth="2.5" strokeLinejoin="round"/>
          <path d="M 14 12 Q 22 8, 32 11" fill="none" stroke="var(--ss-mulberry)" strokeWidth="1.4" opacity="0.45" strokeLinecap="round"/>
        </svg>
      </div>
      {withTagline && (
        <div className="pixel-text" style={{
          fontFamily: "basis33, monospace",
          fontSize: 13,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--ss-mulberry)",
          marginLeft: 4,
        }}>
          studio · kapiti coast nz
        </div>
      )}
    </div>
  );
}

window.Wordmark = Wordmark;