// Shared brand mark component — rewards.com.sg

function BrandMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="10" y="26" width="44" height="28" rx="7" fill="#FF697E" />
      <rect x="8" y="20" width="48" height="12" rx="6" fill="#84E3F3" />
      <path d="M32 20V54" stroke="#FFF6E8" strokeWidth="6" strokeLinecap="round" />
      <path d="M14 32H50" stroke="#FFF6E8" strokeWidth="6" strokeLinecap="round" />
      <path d="M23 20C18.5 20 16 17.7 16 14.7C16 11.6 18.3 10 21 10C25.1 10 29.1 14.5 32 20H23Z" fill="#FFB36B" />
      <path d="M41 20C45.5 20 48 17.7 48 14.7C48 11.6 45.7 10 43 10C38.9 10 34.9 14.5 32 20H41Z" fill="#FFB36B" />
    </svg>
  );
}

function BrandLockup({ subtitle }) {
  return (
    <div style={{ display:"flex", alignItems:"center", gap:10 }}>
      <BrandMark size={28} />
      <div>
        <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:"1.05rem", lineHeight:1, color:"#f1ece7" }}>rewards.com.sg</div>
        {subtitle && <div style={{ fontSize:"0.68rem", color:"#8b97ab", marginTop:1 }}>{subtitle}</div>}
      </div>
    </div>
  );
}

window.BrandMark = BrandMark;
window.BrandLockup = BrandLockup;