<script setup>
// DriverVault lockup: the tri-bar "Fast Forward" mark + Archivo italic-800 wordmark.
// Kept identical to the Web App's Logo.vue — the same mark has to render the same
// way in both consoles. Colours come from the design tokens so it reads on both
// light and dark shells; `onDark` forces the light-on-dark variant (white bars/
// "Driver", brand-400 "Vault"), which this panel selects from the theme toggle.
defineProps({
  iconOnly: { type: Boolean, default: false },
  onDark: { type: Boolean, default: false },
});
</script>

<template>
  <span class="inline-flex items-center gap-2.5 select-none">
    <svg class="h-full w-auto shrink-0" viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <g transform="translate(7 0) skewX(-13)">
        <rect x="9" y="16" width="6" height="16" rx="3" :fill="onDark ? '#60A5FA' : 'var(--brand-700)'" />
        <rect x="19" y="12" width="6" height="24" rx="3" :fill="onDark ? '#93C5FD' : 'var(--brand-500)'" />
        <rect x="29" y="8" width="6" height="32" rx="3" :fill="onDark ? '#ffffff' : 'var(--brand-400)'" />
      </g>
    </svg>
    <span
      v-if="!iconOnly"
      class="text-[1.35em] font-extrabold italic leading-none tracking-[-0.03em]"
    >
      <span :class="onDark ? 'text-white' : 'text-strong'">Driver</span><span :class="onDark ? 'text-brand-400' : 'text-brandtext'">Vault</span>
    </span>
    <span class="sr-only">DriverVault</span>
  </span>
</template>
