// brand.jsx — SaveHor wordmark + meter mark.
// Mark: a circular meter dial with a low-position notch. Stripped, geometric.

function SHMark({ size = 32, color = 'currentColor', bg }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ flexShrink: 0 }}>
      {bg && <circle cx="16" cy="16" r="16" fill={bg} />}
      {/* outer dial ring */}
      <circle cx="16" cy="16" r="11" fill="none" stroke={color} strokeWidth="1.6" strokeOpacity="0.28" />
      {/* low-reading arc — sweeps ~110° from bottom-left */}
      <path d="M 8.5 22.5 A 11 11 0 0 1 16 5" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" />
      {/* needle dot at the low end */}
      <circle cx="8.5" cy="22.5" r="2.2" fill={color} />
      {/* center pivot */}
      <circle cx="16" cy="16" r="1.6" fill={color} />
    </svg>
  );
}

function SHWordmark({ size = 18, color = 'currentColor', mark = true }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.45, color }}>
      {mark && <SHMark size={size * 1.5} color={color} />}
      <span style={{
        fontFamily: '"DM Sans", system-ui, sans-serif',
        fontWeight: 600, fontSize: size, letterSpacing: -0.4, lineHeight: 1,
      }}>savehor<span style={{ color, opacity: 0.55 }}>.</span></span>
    </span>
  );
}

Object.assign(window, { SHMark, SHWordmark });