/* logo.jsx — Brewly logo mark + lockups. Exports Logo, BrewMark. */

/* The mark: a hand-drawn coffee cup with steam (the "brew" in Brewly). */
function BrewMark({ size = 120, cup = 'var(--postit)', stroke = 'var(--ink)', steam = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none" aria-hidden="true"
      style={{ overflow: 'visible' }}>
      {/* steam */}
      <g stroke={steam} strokeWidth="5" strokeLinecap="round" fill="none">
        <path d="M44 30c-5-7 5-10 0-17s4-10 1-16" />
        <path d="M62 28c-5-7 5-11 0-18s4-9 1-15" />
        <path d="M80 30c-5-7 5-10 0-17s4-10 1-16" />
      </g>
      {/* saucer */}
      <path d="M26 104c8 6 60 6 68 0" stroke={stroke} strokeWidth="5" strokeLinecap="round" fill="none" />
      {/* cup body */}
      <path d="M30 52c-1-3 1-5 4-5h52c3 0 5 2 4 5l-4 33c-1 8-9 14-26 14s-25-6-26-14l-4-33Z"
        fill={cup} stroke={stroke} strokeWidth="5" strokeLinejoin="round" />
      {/* handle */}
      <path d="M88 56c12-3 16 3 13 11s-12 9-15 6" stroke={stroke} strokeWidth="5" strokeLinecap="round" fill="none" />
      {/* coffee line */}
      <path d="M37 60c10 5 36 5 46 0" stroke={stroke} strokeWidth="4" strokeLinecap="round" opacity=".45" fill="none" />
    </svg>
  );
}

/* Full lockup: mark on top, "Brewly" below (+ optional tagline) */
function Logo({ size = 130, name = true, tagline = false, badge = false, mono = false, color }) {
  const stroke = mono ? 'var(--ink)' : 'var(--ink)';
  const cup = mono ? 'transparent' : 'var(--postit)';
  const steam = mono ? 'var(--ink)' : (color || 'var(--accent)');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: size * 0.12 }}>
      {badge ? (
        <div style={{
          width: size * 1.25, height: size * 1.25, borderRadius: 'var(--wob-blob)',
          background: 'var(--surface)', border: '3px solid var(--ink)', boxShadow: 'var(--sh-hard)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(calc(var(--tilt) * -3deg))',
        }}>
          <BrewMark size={size * 0.82} cup={cup} stroke={stroke} steam={steam} />
        </div>
      ) : (
        <BrewMark size={size} cup={cup} stroke={stroke} steam={steam} />
      )}
      {name && (
        <span className="font-head" style={{ fontWeight: 700, fontSize: size * 0.42, lineHeight: 1, color: 'var(--ink)', letterSpacing: '.5px' }}>
          Brewly
        </span>
      )}
      {tagline && (
        <span className="font-body" style={{ fontSize: size * 0.16, color: 'var(--ink-muted)', letterSpacing: '1px', marginTop: size * -0.04 }}>
          news, brewed.
        </span>
      )}
    </div>
  );
}

Object.assign(window, { BrewMark, Logo });