// Najmat Almadina wordmark — direction B concept C3.
//
// The brand IS the type: "najmat" lowercase in Switzer 800
// followed by a 1em-square orange period. No standalone mark.
//
// Tones:
//   "brand"   — ink wordmark, orange period (light surfaces)
//   "reverse" — cream wordmark, orange period (charcoal surfaces)
//   "mono"    — ink wordmark, ink period (single-ink print)
//   "on-orange" — ink wordmark, cream period (orange surfaces)
//
// Props:
//   tone:  brand | reverse | mono | on-orange     (default: brand)
//   size:  number (font-size in px)               (default: 24)
//   full:  if true, render the full legal name    (default: false)

(function () {
  function toneFor(tone) {
    if (tone === 'reverse')   return { ink: 'var(--cream)', period: 'var(--orange)' };
    if (tone === 'mono')      return { ink: 'var(--ink)',   period: 'var(--ink)'    };
    if (tone === 'on-orange') return { ink: 'var(--ink)',   period: 'var(--cream)'  };
    return                           { ink: 'var(--ink)',   period: 'var(--orange)' };
  }

  window.Logo = function Logo({ tone = 'brand', size = 24, full = false, ariaLabel }) {
    const t = toneFor(tone);
    const periodPx = Math.round(size * 0.20);    // ~20% of font size — looks square at any scale
    const word = full ? 'najmat almadina' : 'najmat';
    return (
      <span
        role="img"
        aria-label={ariaLabel || (full ? 'najmat almadina' : 'najmat')}
        style={{
          display: 'inline-flex',
          alignItems: 'flex-end',
          gap: Math.round(size * 0.06),
          fontFamily: 'var(--font-sans)',
          fontWeight: 800,
          fontSize: size,
          lineHeight: 0.9,
          letterSpacing: 'var(--tracking-tight)',
          color: t.ink,
          userSelect: 'none',
        }}
      >
        <span aria-hidden="true">{word}</span>
        <span
          aria-hidden="true"
          style={{
            display: 'inline-block',
            width: periodPx,
            height: periodPx,
            background: t.period,
            marginBottom: Math.round(size * 0.04),
            flex: 'none',
          }}
        />
      </span>
    );
  };
})();