@props([
    'variant' => 'full',   // full | mark
    'class' => 'h-8',
])

@php
    /*
     | Renders the supplied logo when it exists, and a typographic wordmark
     | until then.
     |
     | The fallback is not decoration — it means every layout, email and print
     | view can be built and reviewed before the artwork lands, and the moment
     | the real file is dropped into public/brand/ it appears everywhere with
     | no template changes. The path comes from config('zylovpn.brand'), so
     | swapping artwork stays a one-line change.
     */
    $configured = $variant === 'mark'
        ? config('zylovpn.brand.mark')
        : config('zylovpn.brand.logo');

    $hasAsset = $configured && file_exists(public_path($configured));
@endphp

@if ($hasAsset)
    <img
        src="{{ asset($configured) }}"
        alt="{{ config('zylovpn.brand.name') }}"
        {{ $attributes->merge(['class' => $class.' w-auto']) }}
    >
@elseif ($variant === 'mark')
    {{-- Compact mark: shield outline with a signal glyph. --}}
    <svg {{ $attributes->merge(['class' => $class.' w-auto']) }}
         viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"
         role="img" aria-label="{{ config('zylovpn.brand.name') }}">
        <defs>
            <linearGradient id="zylo-mark-grad" x1="0" y1="0" x2="32" y2="32">
                <stop offset="0%" stop-color="#4d86ff"/>
                <stop offset="100%" stop-color="#22d3ee"/>
            </linearGradient>
        </defs>
        <path d="M16 2.5 27 6.8v8.4c0 6.6-4.4 12.2-11 14.3-6.6-2.1-11-7.7-11-14.3V6.8L16 2.5Z"
              stroke="url(#zylo-mark-grad)" stroke-width="2" stroke-linejoin="round"/>
        <path d="M11 16.5 14.5 20l7-7.5" stroke="url(#zylo-mark-grad)"
              stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
@else
    <span {{ $attributes->merge(['class' => 'inline-flex items-center gap-2.5']) }}>
        <svg class="{{ $class }} w-auto" viewBox="0 0 32 32" fill="none"
             xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <defs>
                <linearGradient id="zylo-word-grad" x1="0" y1="0" x2="32" y2="32">
                    <stop offset="0%" stop-color="#4d86ff"/>
                    <stop offset="100%" stop-color="#22d3ee"/>
                </linearGradient>
            </defs>
            <path d="M16 2.5 27 6.8v8.4c0 6.6-4.4 12.2-11 14.3-6.6-2.1-11-7.7-11-14.3V6.8L16 2.5Z"
                  stroke="url(#zylo-word-grad)" stroke-width="2" stroke-linejoin="round"/>
            <path d="M11 16.5 14.5 20l7-7.5" stroke="url(#zylo-word-grad)"
                  stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="font-display text-xl font-bold tracking-tight text-silver-100">
            Zylo<span class="zylo-gradient-text">VPN</span>
        </span>
    </span>
@endif