<script setup lang="ts">
// Dezky "Node" mark — a lowercase d (donut style) 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) — the design's intent.
import { C, LOCKED } from '~/utils/landingTokens'

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

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`
</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" />
    <g :fill="accent">
      <path :d="`${bowlPath} ${counterPath}`" fill-rule="evenodd" />
      <path :d="stemPath" />
    </g>
    <circle cx="74" cy="26" :r="dotR" :fill="accent" />
  </svg>
</template>
