<script setup lang="ts">
// Brand mark — a stylized "d" inside a squircle. Ported from project/logos.jsx.
// The geometry is computed so the letterform sits ~16u inside the 100x100 viewBox.

const props = withDefaults(
  defineProps<{
    size?: number
    fg?: string
    accent?: string
    bowlR?: number
    stemW?: number
    contR?: number
    dStyle?: 'donut' | 'solid' | 'outline'
    dotPos?: 'corner' | 'tittle' | 'orbit' | 'none'
    dotR?: number
  }>(),
  {
    size: 22,
    fg: '#0a0a0a',
    accent: '#d4ff3a',
    bowlR: 14,
    stemW: 7,
    contR: 22,
    dStyle: 'donut',
    dotPos: 'corner',
    dotR: 4,
  },
)

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

  const bowlPath =
    `M ${cx - props.bowlR} ${cy} ` +
    `a ${props.bowlR} ${props.bowlR} 0 1 0 ${props.bowlR * 2} 0 ` +
    `a ${props.bowlR} ${props.bowlR} 0 1 0 ${-props.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 ${props.stemW} 0 ` +
    `L ${stemRight} ${stemBottom} ` +
    `L ${stemX} ${stemBottom} Z`

  const dotByPos = {
    corner: { x: 74, y: 26 },
    tittle: { x: stemX + props.stemW / 2, y: stemTop - props.dotR - 3 },
    orbit: { x: cx - props.bowlR - props.dotR - 2, y: cy - props.bowlR - props.dotR - 2 },
    none: null,
  } as const

  return { bowlPath, counterPath, stemPath, dot: dotByPos[props.dotPos] }
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 100 100"
    aria-label="Dezky"
    role="img"
  >
    <rect x="8" y="8" width="84" height="84" :rx="contR" :fill="fg" />
    <g v-if="dStyle === 'donut'" fill="#0a0a0a">
      <path :d="geometry.bowlPath + ' ' + geometry.counterPath" fill-rule="evenodd" />
      <path :d="geometry.stemPath" />
    </g>
    <g v-else-if="dStyle === 'solid'" fill="#0a0a0a">
      <path :d="geometry.bowlPath" />
      <path :d="geometry.stemPath" />
    </g>
    <circle
      v-if="geometry.dot"
      :cx="geometry.dot.x"
      :cy="geometry.dot.y"
      :r="dotR"
      :fill="accent"
    />
  </svg>
</template>
