<template>
  <div class="logo-gradient-border flex-shrink-0 inline-block overflow-hidden">
    <!-- Neode logo - white or coloured -->
    <svg
      class="w-14 h-14 block logo-svg"
      viewBox="0 0 1024 1024"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Neode"
    >
      <defs>
        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#f9aa4b" />
          <stop offset="50%" stop-color="#f7931a" />
          <stop offset="100%" stop-color="#e68a19" />
        </linearGradient>
      </defs>
      <rect width="1024" height="1024" fill="#030202" />
      <rect
        v-for="(r, i) in rects"
        :key="i"
        :x="r.x"
        :y="r.y"
        :width="r.w"
        :height="r.h"
        :fill="mode === 'coloured' ? `url(#${gradientId})` : 'white'"
        class="logo-square"
        :class="{ 'logo-square-coloured': mode === 'coloured' }"
        :style="{ '--delay': delays[i] + 'ms' }"
      />
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const gradientId = 'logo-color-' + Math.random().toString(36).slice(2, 11)

// Parsed from favico-black.svg path - 20 rects
const rects = [
  { x: 357.614, y: 318, w: 71.007, h: 70.936 },
  { x: 436.152, y: 318, w: 72.082, h: 70.936 },
  { x: 515.766, y: 318, w: 72.082, h: 70.936 },
  { x: 595.379, y: 318, w: 71.007, h: 70.936 },
  { x: 595.379, y: 396.46, w: 71.007, h: 72.011 },
  { x: 673.917, y: 396.46, w: 72.083, h: 72.011 },
  { x: 278, y: 475.994, w: 72.083, h: 72.012 },
  { x: 357.614, y: 475.994, w: 71.007, h: 72.012 },
  { x: 436.152, y: 475.994, w: 72.082, h: 72.012 },
  { x: 515.766, y: 475.994, w: 72.082, h: 72.012 },
  { x: 595.379, y: 475.994, w: 71.007, h: 72.012 },
  { x: 673.917, y: 475.994, w: 72.083, h: 72.012 },
  { x: 278, y: 555.529, w: 72.083, h: 70.936 },
  { x: 357.614, y: 555.529, w: 71.007, h: 70.936 },
  { x: 595.379, y: 555.529, w: 71.007, h: 70.936 },
  { x: 673.917, y: 555.529, w: 72.083, h: 70.936 },
  { x: 357.614, y: 633.989, w: 71.007, h: 72.011 },
  { x: 436.152, y: 633.989, w: 72.082, h: 72.011 },
  { x: 515.766, y: 633.989, w: 72.082, h: 72.011 },
  { x: 595.379, y: 633.989, w: 71.007, h: 72.011 },
]

// Stagger delays (ms) - spread over ~4.5s load phase
const delays = [0, 2341, 467, 1890, 312, 3456, 123, 2789, 567, 4123, 901, 1456, 234, 3789, 2678, 456, 847, 2912, 1891, 423]

type Mode = 'normal' | 'coloured'
const mode = ref<Mode>('normal')
let cycleCount = 0
let intervalId: ReturnType<typeof setInterval> | null = null

const CYCLE_MS = 10000

onMounted(() => {
  intervalId = setInterval(() => {
    cycleCount++
    mode.value = cycleCount % 4 === 3 ? 'coloured' : 'normal'
  }, CYCLE_MS)
})

onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId)
})
</script>

<style scoped>
.logo-svg {
  will-change: auto;
}

.logo-square {
  opacity: 0;
  animation: logo-square-in 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--delay, 0ms);
  animation-fill-mode: both;
}

.logo-square-coloured {
  filter: drop-shadow(0 0 2px rgba(247, 147, 26, 0.4));
}

/* 0–45%: squares load in. 45–100%: full logo visible */
@keyframes logo-square-in {
  0% { opacity: 0; transform: scale(0.95); }
  4% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
</style>
