@php
    $items = 'AI Business Insights  ●  Invoice & Billing  ●  Staff Management  ●  Financial Reports  ●  Mobile-First  ●  Inventory Management  ●  POS & Sales  ●  HR & Payroll  ●  ';
    $mobileItems = 'Inventory Management  ●  POS & Sales  ●  Financial Reports  ●  Mobile-First  ●  Staff Management  ●  ';
@endphp

<div class="marquee-wrap" aria-label="Uzapoint product capabilities">
    <svg class="ribbon-svg" viewBox="0 0 1800 360" preserveAspectRatio="none" role="img" aria-label="Moving ribbon of Uzapoint product capabilities">
        <defs>
            <linearGradient id="ribbonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#9fffe0" />
                <stop offset="15%" stop-color="#4af2bd" />
                <stop offset="48%" stop-color="#16d39a" />
                <stop offset="74%" stop-color="#08a978" />
                <stop offset="100%" stop-color="#057151" />
            </linearGradient>

            <filter id="ribbonShadow" x="-22%" y="-85%" width="144%" height="300%">
                <feDropShadow dx="0" dy="24" stdDeviation="16" flood-color="#000000" flood-opacity="0.38" />
                <feDropShadow dx="0" dy="4" stdDeviation="3" flood-color="#004d38" flood-opacity="0.35" />
            </filter>

            <filter id="ribbonSoftShadow" x="-24%" y="-120%" width="148%" height="360%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur" />
                <feOffset in="blur" dx="0" dy="34" result="offsetBlur" />
                <feColorMatrix in="offsetBlur" type="matrix" values="0 0 0 0 0  0 0 0 0 0.05  0 0 0 0 0.035  0 0 0 0.46 0" />
            </filter>

            <path id="ribbonPath" d="M -180 118 C 55 36 260 45 420 98 S 725 167 940 110 S 1285 37 1495 93 S 1790 143 1980 66" />
            <path id="ribbonSectionPath" d="M -220 160 C 45 78 260 89 420 140 S 725 209 940 152 S 1285 79 1495 135 S 1790 185 2020 108 L 2020 380 L -220 380 Z" />
        </defs>

        <use class="ribbon-section-fill" href="#ribbonSectionPath" />
        <use class="ribbon-under-shadow" href="#ribbonPath" />
        <use class="ribbon-base" href="#ribbonPath" />
        <use class="ribbon-top-gloss" href="#ribbonPath" />
        <use class="ribbon-bottom-shade" href="#ribbonPath" />

        <text class="ribbon-text ribbon-text-desktop">
            <textPath href="#ribbonPath" startOffset="0%">
                {{ $items }}{{ $items }}{{ $items }}{{ $items }}
                <animate attributeName="startOffset" from="0%" to="-52%" dur="38s" repeatCount="indefinite" />
            </textPath>
        </text>
        <text class="ribbon-text ribbon-text-mobile">
            <textPath href="#ribbonPath" startOffset="0%">
                {{ $mobileItems }}{{ $mobileItems }}{{ $mobileItems }}
                <animate attributeName="startOffset" from="0%" to="-38%" dur="34s" repeatCount="indefinite" />
            </textPath>
        </text>
    </svg>
</div>