{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: network.blade.php
------------------------------------------------------
Use: Minimal repeating SVG animation for the merchant
     credentials card: Etebarit at the hub, wired to the
     bank gateway, the shop, and the users on installment
     credit. Self-contained (inline SMIL), no assets.
=====================================================
--}}

<div {{ $attributes->merge(['class' => 'rounded-2xl border border-line bg-[#faf9fd] p-4']) }}>
    <svg viewBox="0 0 340 214" class="mx-auto block w-full max-w-[320px]" role="img" aria-label="{{ __('front.shop.keys.network.aria') }}">
        {{-- Connectors --}}
        <g stroke="#dcd9ea" stroke-width="1.5" stroke-linecap="round">
            <line x1="170" y1="105" x2="170" y2="40" />
            <line x1="170" y1="105" x2="54" y2="176" />
            <line x1="170" y1="105" x2="286" y2="176" />
        </g>

        {{-- Flowing dots (SMIL, loops forever) --}}
        {{-- Bank -> Etebarit: money in (green) --}}
        <circle r="3.4" fill="#16a34a"><animateMotion dur="2.4s" repeatCount="indefinite" path="M170,40 L170,105" /></circle>
        {{-- Etebarit -> Shop: payout (red) --}}
        <circle r="3.4" fill="#e80e23"><animateMotion dur="2.4s" begin="0.4s" repeatCount="indefinite" path="M170,105 L54,176" /></circle>
        {{-- Etebarit -> Users: installment credit (violet) --}}
        <circle r="3.4" fill="#563bb1"><animateMotion dur="2.4s" begin="0.8s" repeatCount="indefinite" path="M170,105 L286,176" /></circle>
        {{-- Users -> Etebarit: repayments (green) --}}
        <circle r="3.4" fill="#16a34a"><animateMotion dur="2.4s" begin="1.6s" repeatCount="indefinite" path="M286,176 L170,105" /></circle>

        {{-- Bank node --}}
        <g>
            <circle cx="170" cy="34" r="21" fill="#fff" stroke="#e6e3f0" stroke-width="1.5" />
            <g transform="translate(170,34)" stroke="#16a34a" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <rect x="-9" y="-6.5" width="18" height="13" rx="2.5" /><line x1="-9" y1="-2" x2="9" y2="-2" />
            </g>
            <text x="170" y="10" text-anchor="middle" font-size="10.5" font-weight="700" fill="#5b5872">{{ __('front.shop.keys.network.bank') }}</text>
        </g>

        {{-- Center: Etebarit --}}
        <g>
            <circle cx="170" cy="105" r="30" fill="#563bb1" />
            <circle cx="170" cy="105" r="30" fill="none" stroke="#563bb1" stroke-opacity="0.25" stroke-width="6">
                <animate attributeName="r" values="30;37;30" dur="2.6s" repeatCount="indefinite" />
                <animate attributeName="stroke-opacity" values="0.25;0;0.25" dur="2.6s" repeatCount="indefinite" />
            </circle>
            <text x="170" y="109" text-anchor="middle" font-size="12" font-weight="700" fill="#fff">{{ __('front.shop.keys.network.etebarit') }}</text>
        </g>

        {{-- Shop node --}}
        <g>
            <circle cx="54" cy="176" r="21" fill="#fff" stroke="#e6e3f0" stroke-width="1.5" />
            <g transform="translate(54,176)" stroke="#e80e23" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M-8,-4 L-6.4,-9 H6.4 L8,-4" /><path d="M-6,-1.5 V8 H6 V-1.5" />
            </g>
            <text x="54" y="207" text-anchor="middle" font-size="10.5" font-weight="700" fill="#5b5872">{{ __('front.shop.keys.network.shop') }}</text>
        </g>

        {{-- Users node --}}
        <g>
            <circle cx="286" cy="176" r="21" fill="#fff" stroke="#e6e3f0" stroke-width="1.5" />
            <g transform="translate(286,176)" stroke="#563bb1" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="0" cy="-4" r="3.2" /><path d="M-6,7 a6,6 0 0 1 12,0" />
            </g>
            <text x="286" y="207" text-anchor="middle" font-size="10.5" font-weight="700" fill="#5b5872">{{ __('front.shop.keys.network.users') }}</text>
        </g>
    </svg>
</div>