// Typographic wordmark — 'SMOKE SHOP / THE STICKY STEM / EST ✻ 2019' editorial mark.
function Logo({ size = 1, dark = false, compact = false }) {
  const color = dark ? '#F5F2ED' : 'var(--ink)';
  const muted = dark ? 'rgba(245,242,237,0.6)' : 'var(--ink-soft)';
  if (compact) {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, lineHeight: 1 }}>
        <svg width={18 * size} height={18 * size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
          <path d="M12 2 C12 8, 8 11, 3 12 C8 13, 12 16, 12 22 C12 16, 16 13, 21 12 C16 11, 12 8, 12 2 Z"
                stroke={color} strokeWidth="1.2" fill="none" strokeLinejoin="round"/>
        </svg>
        <span style={{
          fontFamily: 'var(--serif)', fontSize: 18 * size, fontWeight: 500,
          color, letterSpacing: '0.01em',
        }}>The Sticky Stem</span>
      </div>
    );
  }
  return (
    <div style={{ textAlign: 'center', display: 'inline-block', color }}>
      <div style={{
        fontFamily: 'var(--sans)', fontSize: 9 * size, fontWeight: 500,
        letterSpacing: '0.32em', textTransform: 'uppercase', color: muted,
        marginBottom: 6 * size,
      }}>Smoke Shop · Directory · Stories</div>
      <div style={{
        fontFamily: 'var(--serif)', fontSize: 32 * size, fontWeight: 500,
        lineHeight: 1.02, letterSpacing: '-0.01em', color,
      }}>
        The Sticky Stem
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 12 * size, marginTop: 8 * size,
        fontFamily: 'var(--sans)', fontSize: 9 * size, fontWeight: 500,
        letterSpacing: '0.32em', textTransform: 'uppercase', color: muted,
      }}>
        <span>Est.</span>
        <svg width={14 * size} height={14 * size} viewBox="0 0 24 24" fill="none">
          <path d="M12 2 C12 8, 8 11, 3 12 C8 13, 12 16, 12 22 C12 16, 16 13, 21 12 C16 11, 12 8, 12 2 Z"
                stroke={muted} strokeWidth="1.3" fill="none" strokeLinejoin="round"/>
        </svg>
        <span>2019</span>
      </div>
    </div>
  );
}

window.Logo = Logo;