<template>
  <div class="flex items-center gap-4 relative -mb-8 z-50 group cursor-pointer">
    
    <svg 
      viewBox="0 0 240 240" 
      class="w-24 h-24 drop-shadow-[0_10px_20px_rgba(0,0,0,0.5)] transition-transform duration-500 group-hover:scale-105" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="sf-green" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#418890" />
          <stop offset="100%" stop-color="#79B085" />
        </linearGradient>
        <linearGradient id="sf-white" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#FFFFFF" />
          <stop offset="100%" stop-color="#D1D5DB" />
        </linearGradient>
      </defs>

      <path d="M 80 180 L 30 210" stroke="url(#sf-green)" stroke-width="8" stroke-linecap="round"/>
      <circle cx="15" cy="219" r="4" fill="url(#sf-green)"/>
      
      <path d="M 110 205 L 40 245" stroke="url(#sf-green)" stroke-width="12" stroke-linecap="round"/>
      <circle cx="20" cy="255" r="6" fill="url(#sf-green)"/>
      
      <path d="M 140 225 L 90 255" stroke="url(#sf-green)" stroke-width="6" stroke-linecap="round"/>
      <circle cx="75" cy="264" r="3" fill="url(#sf-green)"/>

      <polygon points="120,30 108,50 132,50" fill="url(#sf-white)"/>
      <polygon points="120,210 108,190 132,190" fill="url(#sf-white)"/>
      <polygon points="30,120 50,108 50,132" fill="url(#sf-white)"/>
      <polygon points="65,65 85,78 70,88" fill="url(#sf-white)"/>

      <circle cx="120" cy="120" r="70" stroke="url(#sf-white)" stroke-width="14"/>

      <text x="90" y="155" font-family="Arial, Helvetica, sans-serif" font-weight="900" font-size="95" text-anchor="middle" fill="url(#sf-white)">S</text>
      <text x="155" y="155" font-family="Arial, Helvetica, sans-serif" font-weight="900" font-size="95" text-anchor="middle" fill="url(#sf-green)">F</text>

      <path d="M 170 170 L 215 215" stroke="url(#sf-white)" stroke-width="26" stroke-linecap="round"/>
      <path d="M 180 180 L 210 210" stroke="#062535" stroke-width="6" stroke-linecap="round"/>

      <circle cx="125" cy="110" r="15" fill="url(#sf-white)"/>
      <circle cx="125" cy="110" r="6" fill="#062535"/>

      <polygon points="215,25 125,110 95,70" fill="#2C5A63"/>
      
      <polygon points="215,25 125,110 165,140" fill="url(#sf-green)"/>

    </svg>
    
    <div class="hidden sm:flex flex-col justify-center mt-3">
      <div class="font-black tracking-widest text-3xl leading-none drop-shadow-md">
        <span class="text-white">SERVICE</span> <span class="text-[#75A882]">FINDER</span>
      </div>
      <div class="text-[#75A882] text-[0.65rem] tracking-[0.25em] font-bold mt-2 uppercase opacity-90">
        Online Járműnyilvántartó & Szervizkereső
      </div>
    </div>
    
  </div>
</template>

<script setup>
// Tiszta, újrahasználható, kézzel optimalizált SVG logó.
</script>