<script setup lang="ts">
// Dezky "Node" mark — a lowercase d inside a squircle, with a corner node-dot.
// Geometry is the locked set from the brand handoff (logos.jsx NodeMark +
// LOCKED). The squircle paints in `fg`; the letterform and dot paint in
// `accent` (electric chartreuse). `variant` controls the bowl rendering:
// donut/solid paint the filled letter (with counter); outline knocks out an
// eroded copy so only a uniform rim survives.
import { computed } from 'vue'
import { C, LOCKED } from '~/utils/landingTokens'

const props = withDefaults(defineProps<{
  size?: number
  fg?: string
  accent?: string
  variant?: 'donut' | 'solid' | 'outline'
}>(), {
  size: 96,
  fg: C.carbon,
  accent: C.signal,
  variant: 'donut',
})

const { bowlR, stemW, dotR, contR } = LOCKED

const overlap = stemW * 0.55
const cy = 52
const cx = 50 - stemW / 2 + overlap / 2
const stemX = cx + bowlR - overlap
const stemRight = stemX + stemW
const capR = stemW / 2
const stemTop = 26
const stemBottom = cy + bowlR
const holeR = Math.max(2.5, bowlR - stemW - 0.5)

const bowlPath =
  `M ${cx - bowlR} ${cy} ` +
  `a ${bowlR} ${bowlR} 0 1 0 ${bowlR * 2} 0 ` +
  `a ${bowlR} ${bowlR} 0 1 0 ${-bowlR * 2} 0 Z`
const counterPath =
  `M ${cx - holeR} ${cy} ` +
  `a ${holeR} ${holeR} 0 1 0 ${holeR * 2} 0 ` +
  `a ${holeR} ${holeR} 0 1 0 ${-holeR * 2} 0 Z`
const stemPath =
  `M ${stemX} ${stemTop + capR} ` +
  `a ${capR} ${capR} 0 0 1 ${stemW} 0 ` +
  `L ${stemRight} ${stemBottom} ` +
  `L ${stemX} ${stemBottom} Z`

// Eroded inner copy for the outline variant (a uniform rim survives).
const outline = computed(() => {
  const maxOw = (overlap - 1.4) / 2
  const ow = Math.max(1.1, Math.min(stemW * 0.32, maxOw))
  const ibowlR = bowlR - ow
  const iholeR = holeR + ow
  const istemX = stemX + ow
  const istemW = Math.max(1.2, stemW - 2 * ow)
  const istemRight = istemX + istemW
  const icapR = istemW / 2
  const istemTop = stemTop + ow
  return {
    bowl: `M ${cx - ibowlR} ${cy} a ${ibowlR} ${ibowlR} 0 1 0 ${ibowlR * 2} 0 a ${ibowlR} ${ibowlR} 0 1 0 ${-ibowlR * 2} 0 Z`,
    counter: `M ${cx - iholeR} ${cy} a ${iholeR} ${iholeR} 0 1 0 ${iholeR * 2} 0 a ${iholeR} ${iholeR} 0 1 0 ${-iholeR * 2} 0 Z`,
    stem: `M ${istemX} ${istemTop + icapR} a ${icapR} ${icapR} 0 0 1 ${istemW} 0 L ${istemRight} ${stemBottom} L ${istemX} ${stemBottom} Z`,
  }
})
</script>

<template>
  <svg :width="size" :height="size" viewBox="0 0 100 100" aria-label="dezky node mark">
    <rect x="8" y="8" width="84" height="84" :rx="contR" :fill="fg" />
    <template v-if="variant === 'outline'">
      <path :d="`${bowlPath} ${counterPath}`" fill-rule="evenodd" :fill="accent" />
      <path :d="stemPath" :fill="accent" />
      <path :d="`${outline.bowl} ${outline.counter}`" fill-rule="evenodd" :fill="fg" />
      <path :d="outline.stem" :fill="fg" />
    </template>
    <g v-else-if="variant === 'solid'" :fill="accent">
      <path :d="bowlPath" />
      <path :d="stemPath" />
    </g>
    <g v-else :fill="accent">
      <path :d="`${bowlPath} ${counterPath}`" fill-rule="evenodd" />
      <path :d="stemPath" />
    </g>
    <circle cx="74" cy="26" :r="dotR" :fill="accent" />
  </svg>
</template>
