// hush-brand.jsx — brand mark, wordmark, lockup, eyebrow + background washes.
// Depends on globals: W, T (hush-tokens.jsx).

// ── Brand mark — "the cradle": arc sweeping under a resting ball ──
function MarkGlyph({ size = 100, color = '#FFFFFF', dotColor, stroke = 13 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none"
      style={{ display: 'block', overflow: 'visible' }}>
      <path d="M 22 50 Q 22 78, 50 78 Q 78 78, 78 50"
        stroke={color} strokeWidth={stroke} strokeLinecap="round" fill="none" />
      <circle cx="50" cy="32" r="8.5" fill={dotColor || color} />
    </svg>
  );
}

// ── Lowercase wordmark ──
function Wordmark({ size = 40, color = W.ink, weight = 800 }) {
  return (
    <span className="display" style={{
      fontFamily: 'Plus Jakarta Sans', fontWeight: weight, fontSize: size,
      letterSpacing: '-0.05em', color, lineHeight: 1,
    }}>hush</span>
  );
}

// Mark + wordmark lockup, horizontal
function Lockup({ markSize = 30, wordSize = 30, color = W.ink, accent = W.sage, gap = 12 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap }}>
      <MarkGlyph size={markSize} color={accent} stroke={14} />
      <Wordmark size={wordSize} color={color} />
    </span>
  );
}

// Eyebrow (uppercase label with a leading rule)
function Eyebrow({ children, color = W.sage, style = {} }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 19,
      letterSpacing: '0.16em', textTransform: 'uppercase', color, ...style,
    }}>
      <span style={{ width: 34, height: 2, background: color, borderRadius: 2, opacity: 0.7 }} />
      {children}
    </div>
  );
}

// Cream wash with tintable corner glows
function warmWash(tintA = W.peachMist, tintB = W.lavMist, tintC = W.sageMist) {
  return `
    radial-gradient(ellipse 90% 50% at 50% -6%, ${tintA} 0%, transparent 60%),
    radial-gradient(ellipse 80% 45% at 100% 102%, ${tintB} 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 0% 82%, ${tintC} 0%, transparent 65%),
    linear-gradient(180deg, ${W.cream} 0%, ${W.cream2} 100%)
  `;
}

const SAGE_DEEP = `
  radial-gradient(ellipse 55% 70% at 82% 46%, rgba(143,179,164,0.42) 0%, transparent 60%),
  radial-gradient(ellipse 80% 80% at 8% 26%, rgba(232,168,124,0.16) 0%, transparent 55%),
  linear-gradient(150deg, #2F4A40 0%, #1E322A 60%, #16261F 100%)
`;

Object.assign(window, { MarkGlyph, Wordmark, Lockup, Eyebrow, warmWash, SAGE_DEEP });