// BrandMark.jsx — StoreOn logo system

// The glyph: a thin-ring crescent moon with a small sparkle star to the upper right
// Treated like an astronomical symbol engraving, minimal and timeless.
const BrandGlyph = ({ size = 32, color = 'currentColor', accent }) => {
  const a = accent || 'var(--accent)';
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none"
      style={{ display: 'block', flexShrink: 0 }}>
      {/* Outer ring — the "moon disk" */}
      <circle cx="16" cy="16" r="13" stroke={color} strokeWidth="1" opacity="0.35" />
      {/* Main crescent — two overlapping circles, crescent formed by difference */}
      <mask id="crescent-mask">
        <rect width="32" height="32" fill="black"/>
        <circle cx="16" cy="16" r="11" fill="white"/>
        <circle cx="20" cy="14" r="10" fill="black"/>
      </mask>
      <rect width="32" height="32" fill={color} mask="url(#crescent-mask)" />
      {/* Tiny sparkle star, upper right */}
      <g transform="translate(25.5, 7)">
        <path d="M0 -3 L0.6 -0.6 L3 0 L0.6 0.6 L0 3 L-0.6 0.6 L-3 0 L-0.6 -0.6 Z"
          fill={a} />
      </g>
      {/* Horizon tick */}
      <line x1="3" y1="28" x2="29" y2="28" stroke={color} strokeWidth="0.5" opacity="0.25" strokeDasharray="1 2"/>
    </svg>
  );
};

// Full wordmark: glyph + 'StoreOn' in serif + small caps tagline
const BrandMark = ({ size = 30, withTag = true, color }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <BrandGlyph size={size} color={color} />
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
      <span style={{
        fontFamily: 'var(--serif)',
        fontSize: Math.round(size * 0.78),
        letterSpacing: '0.005em',
        fontWeight: 400,
        color: color || 'var(--ink)',
        lineHeight: 1,
      }}>
        Store<em style={{ fontStyle: 'italic', fontWeight: 400 }}>On</em>
      </span>
      {withTag && (
        <span style={{
          fontFamily: 'var(--mono)',
          fontSize: 9,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: 'var(--ink-mute)',
          whiteSpace: 'nowrap',
        }}>
          Web&nbsp;Solutions
        </span>
      )}
    </div>
  </div>
);

Object.assign(window, { BrandGlyph, BrandMark });