<script setup lang="ts">
defineProps<{ size?: number }>();
</script>

<template>
  <svg
    class="app-logo"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 32 32"
    :width="size ?? 24"
    :height="size ?? 24"
    aria-hidden="true"
  >
    <defs>
      <linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="var(--fs-accent)" />
        <stop offset="100%" stop-color="var(--fs-accent-deep)" />
      </linearGradient>
    </defs>
    <!-- Book body -->
    <path class="logo-book" d="M4 7 C4 7 8 5 16 6 C24 5 28 7 28 7 L28 26 C28 26 24 24 16 25 C8 24 4 26 4 26 Z" stroke-width="0.5"/>
    <!-- Book spine -->
    <line class="logo-spine" x1="16" y1="6" x2="16" y2="25" stroke-width="0.8"/>
    <!-- Left page lines -->
    <line class="logo-lines" x1="7" y1="11" x2="14" y2="10.5" stroke-width="0.6" stroke-linecap="round"/>
    <line class="logo-lines" x1="7" y1="14" x2="14" y2="13.5" stroke-width="0.6" stroke-linecap="round"/>
    <line class="logo-lines" x1="7" y1="17" x2="14" y2="16.5" stroke-width="0.6" stroke-linecap="round"/>
    <line class="logo-lines" x1="7" y1="20" x2="12" y2="19.5" stroke-width="0.6" stroke-linecap="round"/>
    <!-- Right page lines -->
    <line class="logo-lines" x1="18" y1="10.5" x2="25" y2="11" stroke-width="0.6" stroke-linecap="round"/>
    <line class="logo-lines" x1="18" y1="13.5" x2="25" y2="14" stroke-width="0.6" stroke-linecap="round"/>
    <line class="logo-lines" x1="18" y1="16.5" x2="25" y2="17" stroke-width="0.6" stroke-linecap="round"/>
    <!-- Magic spark -->
    <g transform="translate(24, 5)">
      <path d="M0 -4 L1 -1 L4 0 L1 1 L0 4 L-1 1 L-4 0 L-1 -1 Z" fill="#f6ad55"/>
      <path d="M0 -2.5 L0.6 -0.6 L2.5 0 L0.6 0.6 L0 2.5 L-0.6 0.6 L-2.5 0 L-0.6 -0.6 Z" fill="#fbd38d"/>
    </g>
    <!-- Secondary sparkles -->
    <circle cx="20" cy="3" r="0.7" fill="#f6ad55" opacity="0.7"/>
    <circle cx="27" cy="8" r="0.5" fill="#fbd38d" opacity="0.6"/>
  </svg>
</template>

<style scoped>
.logo-book {
  fill: url(#logo-gradient);
  stroke: color-mix(in srgb, var(--fs-accent) 70%, transparent);
}
.logo-spine {
  stroke: var(--fs-text-secondary);
}
.logo-lines {
  stroke: var(--fs-text-tertiary);
}
</style>
