// The Rightside wordmark — recreated in SVG from the brand sheet
// Arrow-through-"THE" device is a signature part of the mark.
const RightsideLogo = ({ size = 1, color = 'currentColor', subColor, showTagline = true }) => {
  const sub = subColor || color;
  return (
    <div className="rs-logo" style={{ '--rs-logo-scale': size, color }}>
      <div className="rs-logo-top">
        <span className="rs-logo-the" style={{ color }}>THE</span>
        <span className="rs-logo-rule" style={{ background: color }} />
        <span className="rs-logo-arrow" style={{ borderLeftColor: color }} />
      </div>
      <div className="rs-logo-main" style={{ color }}>RIGHTSIDE</div>
      {showTagline && (
        <div className="rs-logo-sub" style={{ color: sub }}>
          WITH ALLISON &amp; AMIE BETH
        </div>
      )}
    </div>
  );
};

// Small circular RS monogram
const RSMark = ({ size = 48, color = 'currentColor', ring = 'currentColor' }) => (
  <div
    className="rs-mark"
    style={{
      width: size,
      height: size,
      border: `1.5px solid ${ring}`,
      color,
    }}
  >
    <span className="rs-mark-letters">RS</span>
    <span className="rs-mark-arrow" style={{ background: color }} />
    <span className="rs-mark-tip" style={{ borderLeftColor: color }} />
  </div>
);

window.RightsideLogo = RightsideLogo;
window.RSMark = RSMark;