// M. Logo — 3 variants
function Logo({ variant = 'a', size = 'md', showText = true, inverse = false }) {
  const color = inverse ? '#fff' : 'var(--ink)';
  const sub = inverse ? 'rgba(255,255,255,0.7)' : 'var(--body-soft)';
  const accent = 'var(--navy)';
  const accentInv = inverse ? '#c7c6ea' : 'var(--navy)';

  const sizes = {
    sm: { mark: 22, name: 11, sub: 10, gap: 10 },
    md: { mark: 30, name: 13, sub: 12, gap: 14 },
    lg: { mark: 56, name: 16, sub: 13, gap: 18 },
    xl: { mark: 120, name: 22, sub: 16, gap: 22 },
  };
  const s = sizes[size] || sizes.md;

  // Variant A — Italic serif M with navy dot
  if (variant === 'a') {
    return (
      <a href="/" className="logo-lockup" style={{ gap: s.gap, color }}>
        <span style={{
          fontFamily: "'Playfair Display', serif",
          fontStyle: 'italic',
          fontWeight: 500,
          fontSize: s.mark,
          lineHeight: 1,
          letterSpacing: '-0.02em',
          color
        }}>
          M<span style={{ color: accentInv }}>.</span>
        </span>
        {showText && (
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
            <span style={{
              fontFamily: "'Lato', sans-serif",
              fontSize: s.name,
              fontWeight: 700,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color
            }}>Megan Hunter</span>
            <span style={{
              fontFamily: "'Playfair Display', serif",
              fontStyle: 'italic',
              fontSize: s.sub,
              color: sub,
              marginTop: 2
            }}>Making It Matter</span>
          </span>
        )}
      </a>
    );
  }

  // Variant B — Monogram in circle
  if (variant === 'b') {
    return (
      <a href="/" className="logo-lockup" style={{ gap: s.gap, color }}>
        <span style={{
          width: s.mark * 1.45,
          height: s.mark * 1.45,
          borderRadius: '999px',
          border: `1.5px solid ${color}`,
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: "'Playfair Display', serif",
          fontStyle: 'italic',
          fontWeight: 500,
          fontSize: s.mark * 0.65,
          color,
          position: 'relative',
        }}>
          M<span style={{ color: accentInv, fontSize: s.mark * 0.9, lineHeight: 0, marginLeft: 1 }}>.</span>
        </span>
        {showText && (
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
            <span style={{
              fontFamily: "'Lato', sans-serif",
              fontSize: s.name,
              fontWeight: 700,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color
            }}>Megan Hunter</span>
            <span style={{
              fontFamily: "'Playfair Display', serif",
              fontStyle: 'italic',
              fontSize: s.sub,
              color: sub,
              marginTop: 2
            }}>Making It Matter</span>
          </span>
        )}
      </a>
    );
  }

  // Variant C — Tight geometric, upright
  return (
    <a href="#" className="logo-lockup" style={{ gap: s.gap, color }}>
      <span style={{
        fontFamily: "'Playfair Display', serif",
        fontWeight: 600,
        fontSize: s.mark,
        lineHeight: 1,
        letterSpacing: '-0.04em',
        color
      }}>
        M<span style={{ color: accentInv, fontWeight: 400 }}>.</span>
      </span>
      {showText && (
        <span style={{
          display: 'flex',
          flexDirection: 'column',
          lineHeight: 1.1,
          borderLeft: `1px solid ${inverse ? 'rgba(255,255,255,0.2)' : 'var(--rule)'}`,
          paddingLeft: s.gap
        }}>
          <span style={{
            fontFamily: "'Lato', sans-serif",
            fontSize: s.name,
            fontWeight: 700,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            color
          }}>Megan Hunter</span>
          <span style={{
            fontFamily: "'Playfair Display', serif",
            fontStyle: 'italic',
            fontSize: s.sub,
            color: sub,
            marginTop: 2
          }}>Making It Matter</span>
        </span>
      )}
    </a>
  );
}

window.Logo = Logo;