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

const svgString = `
<svg width="84" height="84" viewBox="0 0 612 612" fill="none" xmlns="http://www.w3.org/2000/svg" class="openmcp-logo">
  <defs>
    <linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
      <stop offset="0" stop-color="#A1A7F6" />
      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.2" />
    </linearGradient>
    <linearGradient id="gradient_2" gradientUnits="userSpaceOnUse" x1="110.5" y1="0" x2="110.5" y2="221">
      <stop offset="0.468" stop-color="#BFBAF6" />
      <stop offset="1" stop-color="#FFFFFF" />
    </linearGradient>
    <filter color-interpolation-filters="sRGB" x="-219" y="-219" width="221" height="221" id="filter_3">
      <feFlood flood-opacity="0" result="BackgroundImageFix_1" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" in="SourceAlpha" />
      <feOffset dx="0" dy="4" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0" />
      <feBlend mode="normal" in2="BackgroundImageFix_1" result="Shadow_2" />
      <feBlend mode="normal" in="SourceGraphic" in2="Shadow_2" result="Shape_3" />
    </filter>
    <linearGradient id="gradient_4" gradientUnits="userSpaceOnUse" x1="55.5" y1="0" x2="55.5" y2="111">
      <stop offset="0" stop-color="#FFFFFF" />
      <stop offset="1" stop-color="#A8A7F3" />
    </linearGradient>
    <filter color-interpolation-filters="sRGB" x="-109" y="-109" width="111" height="111" id="filter_5">
      <feFlood flood-opacity="0" result="BackgroundImageFix_1" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" in="SourceAlpha" />
      <feOffset dx="0" dy="4" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0" />
      <feBlend mode="normal" in2="BackgroundImageFix_1" result="Shadow_2" />
      <feBlend mode="normal" in="SourceGraphic" in2="Shadow_2" result="Shape_3" />
    </filter>
    <linearGradient id="gradient_6" gradientUnits="userSpaceOnUse" x1="174" y1="0" x2="174" y2="348">
      <stop offset="0.182" stop-color="#A594F6" />
      <stop offset="1" stop-color="#F4E5FF" />
    </linearGradient>
    <filter color-interpolation-filters="sRGB" x="-346" y="-346" width="348" height="348" id="filter_7">
      <feFlood flood-opacity="0" result="BackgroundImageFix_1" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" in="SourceAlpha" />
      <feOffset dx="0" dy="4" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0" />
      <feBlend mode="normal" in2="BackgroundImageFix_1" result="Shadow_2" />
      <feBlend mode="normal" in="SourceGraphic" in2="Shadow_2" result="Shape_3" />
    </filter>
    <linearGradient id="gradient_8" gradientUnits="userSpaceOnUse" x1="57" y1="0" x2="57" y2="114">
      <stop offset="0" stop-color="#FFFFFF" />
      <stop offset="0.614" stop-color="#C7BAF8" />
    </linearGradient>
    <filter color-interpolation-filters="sRGB" x="-112" y="-112" width="114" height="114" id="filter_9">
      <feFlood flood-opacity="0" result="BackgroundImageFix_1" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" in="SourceAlpha" />
      <feOffset dx="0" dy="4" />
      <feGaussianBlur stdDeviation="2" />
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0" />
      <feBlend mode="normal" in2="BackgroundImageFix_1" result="Shadow_2" />
      <feBlend mode="normal" in="SourceGraphic" in2="Shadow_2" result="Shape_3" />
    </filter>
  </defs>
  <g transform="translate(6 2)">
    <g>
      <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="#5A00FF" fill-rule="evenodd" />
      <path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="url(#gradient_1)" fill-rule="evenodd" />
    </g>
    <path d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" fill="url(#gradient_2)" fill-rule="evenodd" filter="url(#filter_3)" transform="translate(293 324)" />
    <path d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z" fill="url(#gradient_4)" fill-rule="evenodd" filter="url(#filter_5)" transform="translate(48 269)" />
    <path d="M0 174C0 77.9024 77.9024 0 174 0C270.098 0 348 77.9024 348 174C348 270.098 270.098 348 174 348C77.9024 348 0 270.098 0 174Z" fill="url(#gradient_6)" fill-rule="evenodd" filter="url(#filter_7)" transform="translate(188 56)" />
    <path d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z" fill="url(#gradient_8)" fill-rule="evenodd" filter="url(#filter_9)" transform="translate(388 129)" />
  </g>
</svg>
`;

const svgContainer = ref<HTMLElement | null>(null);

onMounted(() => {
  if (svgContainer.value) {
    svgContainer.value.innerHTML = svgString;
  }
});
</script>

<template>
  <span ref="svgContainer" class="openmcp-logo"></span>
</template>

<style>
.openmcp-logo {
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 16px;
  vertical-align: middle;
}
</style>