<script setup lang="ts">
/**
 * Logo — Catalyst brand lockup.
 * Composes the CorrosionMark SVG + Oxanium wordmark "Catalyst" + optional tagline.
 *
 * The mark renders in `currentColor`, so set `color: var(--accent)` on a
 * parent (or pass `markColor`) to theme it per active game.
 *
 * Props mirror Logo.jsx exactly:
 *   size       — base px size; drives mark em-size + wordmark scaling
 *   wordmark   — show the "Catalyst" text (default true)
 *   tagline    — false | true (→ "by Corrosion") | custom string
 *   glow       — accent drop-shadow for marketing / login hero use
 *   markColor  — force a fixed color on the mark (bypasses currentColor theming)
 */
import { computed } from 'vue'
import CorrosionMark from '@/components/brand/CorrosionMark.vue'

const props = withDefaults(
  defineProps<{
    size?: number
    wordmark?: boolean
    tagline?: boolean | string
    glow?: boolean
    markColor?: string
  }>(),
  { size: 26, wordmark: true, tagline: false, glow: false },
)

const gap = computed(() => Math.round(props.size * 0.4) + 'px')
const wordmarkGap = computed(() => Math.round(props.size * 0.14) + 'px')
const wordmarkFontSize = computed(() => (props.size * 0.62) + 'px')
const taglineFontSize = computed(() => Math.max(8, props.size * 0.26) + 'px')
const glowFilter = computed(() =>
  props.glow ? `drop-shadow(0 0 ${props.size * 0.5}px var(--accent-glow))` : 'none'
)
const tagText = computed(() =>
  typeof props.tagline === 'string' ? props.tagline : 'by Corrosion'
)
</script>

<template>
  <span
    class="cc-logo"
    :style="{ display: 'inline-flex', alignItems: 'center', gap, lineHeight: 1 }"
  >
    <!-- Mark wrapper: sets font-size so CorrosionMark's 1em sizing works; applies glow -->
    <span
      :style="{
        fontSize: size + 'px',
        display: 'inline-flex',
        filter: glowFilter,
        color: markColor ?? undefined,
      }"
    >
      <CorrosionMark :size="size" />
    </span>

    <!-- Wordmark + optional tagline -->
    <span
      v-if="wordmark"
      :style="{ display: 'inline-flex', flexDirection: 'column', gap: wordmarkGap }"
    >
      <span
        :style="{
          fontFamily: 'var(--font-brand)',
          fontWeight: 800,
          fontSize: wordmarkFontSize,
          letterSpacing: '0.005em',
          color: 'var(--text-primary)',
          lineHeight: 1,
        }"
      >Catalyst</span>
      <span
        v-if="tagline"
        :style="{
          fontFamily: 'var(--font-brand)',
          fontWeight: 600,
          fontSize: taglineFontSize,
          letterSpacing: '0.26em',
          textTransform: 'uppercase',
          color: 'var(--accent-text)',
          lineHeight: 1,
        }"
      >{{ tagText }}</span>
    </span>
  </span>
</template>

<style>
.cc-logo { user-select: none; }
</style>
