<script setup lang="ts">
/**
 * Logo "SF" de StreakFit — monogramme flamme animé.
 * Sert AUSSI de loader : passer `loader` pour le mode chargement (flamme qui monte + halo tournant).
 */
const props = withDefaults(defineProps<{
  size?: number
  loader?: boolean
  label?: string
}>(), {
  size: 40,
  loader: false,
  label: 'StreakFit'
})

const uid = useId()
</script>

<template>
  <svg
    :class="['sf-logo', { 'sf-loader': props.loader }]"
    :width="props.size"
    :height="props.size"
    viewBox="0 0 64 64"
    fill="none"
    role="img"
    :aria-label="props.label"
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <linearGradient :id="`flame-${uid}`" x1="20" y1="8" x2="46" y2="60" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#FBBF24" />
        <stop offset="0.5" stop-color="#F97316" />
        <stop offset="1" stop-color="#EF4444" />
      </linearGradient>
    </defs>

    <!-- Halo (visible en mode loader) -->
    <circle
      v-if="props.loader"
      class="sf-logo__halo"
      cx="32" cy="32" r="28"
      :stroke="`url(#flame-${uid})`"
      stroke-width="3"
      stroke-linecap="round"
      stroke-dasharray="44 132"
      opacity="0.7"
    />

    <!-- Badge arrondi -->
    <rect x="8" y="8" width="48" height="48" rx="14" :fill="`url(#flame-${uid})`" />

    <!-- Flamme qui vacille au-dessus du monogramme -->
    <path
      class="sf-logo__flame"
      d="M32 13c3.6 3.1 5.3 6.4 4.1 9.4-.8 2-2.7 2.9-2.7 5.1 0 1.7 1.2 3 2.9 3 2.3 0 3.9-2 3.9-5 3 2.4 4.6 5.4 4.6 8.6C44.8 40.4 39 45 32 45s-12.8-4.6-12.8-10.9c0-4.8 3.2-9.2 8.2-13.4-.4 2.3.3 4 2 4 1.4 0 2.3-1.1 2.3-2.6 0-2.8-2-4.9-.7-9.1Z"
      fill="#FFF7ED"
      opacity="0.95"
    />

    <!-- Monogramme "SF" -->
    <text
      x="32" y="49"
      text-anchor="middle"
      font-family="Inter, ui-sans-serif, system-ui, sans-serif"
      font-size="20"
      font-weight="800"
      letter-spacing="-1"
      fill="#7C2D12"
      opacity="0.9"
    >SF</text>
  </svg>
</template>
