/**
 * PintRush mark geometry (64×64 grid): a tapered pint glass with a foam head, split by a
 * lightning streak. Shared by the inline <LogoMark> and the generated icons/OG images so the
 * mark is drawn from one source.
 */
export const MARK_VIEWBOX = '0 0 64 64';

/** Glass body: 36 wide at the rim, 26 at the base, softly rounded corners. */
export const GLASS_PATH =
  'M15.2 8h33.6a2.4 2.4 0 0 1 2.38 2.7l-5.46 42.6A3 3 0 0 1 42.75 56H21.25a3 3 0 0 1-2.97-2.7L12.82 10.7A2.4 2.4 0 0 1 15.2 8Z';

/** Foam head with a wavy lower edge (clipped to the glass). */
export const FOAM_PATH = 'M10 6h44v11.2c-3 1.9-6 1.9-9 0s-6-1.9-9 0-6 1.9-9 0-6-1.9-9 0-5.4 1.4-8 0Z';

/** Lightning streak cutting diagonally through the glass. */
export const BOLT_PATH = 'M37.5 19 23.6 37.2h8.1L27 52.5l15.3-21.2h-8.2L38.6 19Z';

/** Small rim highlight that sells the glass. */
export const SHINE_PATH = 'M18 21.5c.6 7.6 1.5 17 2.6 26';

export const MARK_COLORS = {
  glassTop: '#8f74ff',
  glassBottom: '#4b2fd6',
  foam: '#f2f4ff',
  bolt: '#ffb020',
  boltEdge: '#070b1f',
  tile: '#0d1433',
} as const;

/**
 * Standalone SVG markup of the mark (optionally on a rounded navy tile) for ImageResponse,
 * which renders images more reliably than inline SVG elements.
 */
export function markSvg({ tile = false }: { tile?: boolean } = {}): string {
  const c = MARK_COLORS;
  const background = tile
    ? `<rect width="64" height="64" rx="15" fill="${c.tile}"/><rect x="1" y="1" width="62" height="62" rx="14" fill="none" stroke="#23306b" stroke-width="2"/>`
    : '';
  // On the tile the glass is scaled down slightly so it breathes inside the rounded square.
  const group = tile ? '<g transform="translate(6.4 6.4) scale(0.8)">' : '<g>';
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${MARK_VIEWBOX}">${background}<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${c.glassTop}"/><stop offset="1" stop-color="${c.glassBottom}"/></linearGradient><clipPath id="c"><path d="${GLASS_PATH}"/></clipPath></defs>${group}<path d="${GLASS_PATH}" fill="url(#g)"/><path d="${FOAM_PATH}" fill="${c.foam}" clip-path="url(#c)"/><path d="${SHINE_PATH}" fill="none" stroke="#ffffff" stroke-opacity="0.35" stroke-width="2.2" stroke-linecap="round"/><path d="${BOLT_PATH}" fill="${c.bolt}" stroke="${c.boltEdge}" stroke-width="2.4" stroke-linejoin="round" paint-order="stroke"/></g></svg>`;
}

export function markDataUri(options?: { tile?: boolean }): string {
  // The markup is pure ASCII, so btoa is safe (and works in Node and browsers alike).
  return `data:image/svg+xml;base64,${btoa(markSvg(options))}`;
}