@php
    $events = [
        [
            'title' => app()->getLocale() == 'fa' ? 'تخفیف ویژه' : 'Special Offer',
            'discount' => '50%',
            'gradient' => 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        ],
        [
            'title' => app()->getLocale() == 'fa' ? 'پیشنهاد ویژه' : 'Hot Deal',
            'discount' => '70%',
            'gradient' => 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        ],
        [
            'title' => app()->getLocale() == 'fa' ? 'رایگان' : 'Free',
            'discount' => app()->getLocale() == 'fa' ? '۱ ماه' : '1 Month',
            'gradient' => 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
        ],
    ];
@endphp

<div class="events-container electric-border" 
     id="events-wrapper" 
     style="border-radius: 20px;" 
     data-color="#00eaff" 
     data-speed="1" 
     data-chaos="0.5" 
     data-thickness="2">

    <div class="eb-layers">
        <div class="eb-stroke"></div>
        <div class="eb-glow-1"></div>
        <div class="eb-glow-2"></div>
        <div class="eb-background-glow"></div>
    </div>

    <div class="eb-content">
        <div class="events-list">
            @foreach($events as $event)
                <a href="{{ route('subscription.index') }}" class="event-card-mini" style="text-decoration: none; display: flex; width: 100%;">
                    <div class="event-card-mini__content">
                        <span class="event-card-mini__discount">{{ $event['discount'] }}</span>
                        <span class="event-card-mini__title">{{ $event['title'] }}</span>
                    </div>
                    <div class="event-card-mini__arrow">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                        </svg>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</div>

<style>
/* ---- CSS اصلی از ElectricBorder ---- */
.electric-border {
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  --eb-border-width: 2px;
  position: relative;
  border-radius: inherit;
  overflow: visible;
  isolation: isolate;
}

.eb-svg {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 10px;
  height: 10px;
  opacity: 0.001;
  pointer-events: none;
}

.eb-content {
  align-items: center;
  position: relative;
  border-radius: inherit;
  z-index: 1;
  overflow: hidden; 
  padding: 24px;
  display: flex; 
  justify-content: center;
}

.eb-layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.eb-stroke,
.eb-glow-1,
.eb-glow-2,
.eb-background-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}

.eb-stroke {
  border: var(--eb-border-width) solid var(--electric-border-color);
}

.eb-glow-1 {
  border: var(--eb-border-width) solid oklch(from var(--electric-border-color) l c h / 0.6);
  opacity: 0.5;
  filter: blur(calc(0.5px + (var(--eb-border-width) * 0.25)));
}

.eb-glow-2 {
  border: var(--eb-border-width) solid var(--electric-light-color);
  opacity: 0.5;
  filter: blur(calc(2px + (var(--eb-border-width) * 0.5)));
}

.eb-background-glow {
  z-index: -1;
  transform: scale(1.08);
  filter: blur(32px);
  opacity: 0.3;
  background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}

.events-container {
  background: #e0e5ec;
  border-radius: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.events-list {
  display: flex;
  gap: 16px;
  z-index: 1;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 600px;
}

.event-card-mini {
  width: 180px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease, background 0.3s ease;
  border-radius: 16px; 
  background: #e0e5ec;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.event-card-mini:hover {
  transform: translateY(-5px);
}

/* Accent Discount Text */
.event-card-mini__discount {
  font-size: 1.8rem;
  font-weight: bold;
  color: #6c5ce7 !important; /* Accent purple */
  text-shadow: 0 0 10px rgba(108, 92, 231, 0.2);
}

/* Dark Title Text */
.event-card-mini__title {
  font-size: 0.9rem;
  color: #4a5568 !important; /* Dark Gray */
  font-weight: bold;
  margin-top: 2px;
}

.event-card-mini__arrow svg {
  width: 28px;
  height: 28px;
  stroke: #6c5ce7 !important; /* Accent Arrow */
}

.event-card-mini__content {
  display: flex;
  flex-direction: column;
}

/* ⭐⭐⭐ فقط موبایل - دسکتاپ دست نخورده ⭐⭐⭐ */
@media (max-width: 768px) {
  .eb-layers {
    z-index: 0;
  }
  
  .eb-content {
    z-index: 1;
    padding: 16px;
  }
  
  /* حذف افکت‌های سنگین */
  .eb-glow-1,
  .eb-glow-2,
  .eb-background-glow {
    display: none;
  }
  
  /* Border ساده */
  .eb-stroke {
    border: 2px solid #00eaff;
    filter: none !important;
    animation: borderPulse 2s ease-in-out infinite;
  }
  
  @keyframes borderPulse {
    0%, 100% { 
      border-color: #00eaff;
    }
    50% { 
      border-color: #5227FF;
    }
  }
  
  /* List */
  .events-list {
    gap: 12px;
    max-width: 100%;
    width: 100%;
  }
  
  /* کارت‌ها */
  .event-card-mini {
    width: calc(50% - 6px);
    min-width: 130px;
    padding: 14px 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .event-card-mini:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.25);
  }
  
  .event-card-mini__discount {
    font-size: 1.4rem;
  }
  
  .event-card-mini__title {
    font-size: 0.75rem;
  }
  
  .event-card-mini__arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* موبایل خیلی کوچک */
@media (max-width: 400px) {
  .eb-content {
    padding: 12px;
  }
  
  .event-card-mini {
    width: 100%;
    padding: 16px 14px;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const wrapper = document.querySelector("#events-wrapper");
    if (!wrapper) return;
    
    const isMobile = window.innerWidth <= 768;
    if (isMobile) return; // خروج - SVG اجرا نمیشه
    
    // کد دسکتاپ
    const props = wrapper.dataset;
    const color = props.color || '#5227FF';
    const speed = parseFloat(props.speed) || 1;
    const chaos = parseFloat(props.chaos) || 1;
    const thickness = parseFloat(props.thickness) || 2;

    const rawId = `eb-main-wrapper`; 
    const filterId = `turbulent-displace-${rawId}`;

    const svgMarkup = `
        <svg class="eb-svg" aria-hidden="true" focusable="false">
            <defs>
                <filter id="${filterId}" colorInterpolationFilters="sRGB" x="-200%" y="-200%" width="500%" height="500%">
                    <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="noise1" seed="1" /> 
                    <feOffset in="noise1" dx="0" dy="0" result="offsetNoise1">
                        <animate attributeName="dy" values="700; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
                    </feOffset>
                    <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="noise2" seed="1" />
                    <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2">
                        <animate attributeName="dy" values="0; -700" dur="6s" repeatCount="indefinite" calcMode="linear" />
                    </feOffset>
                    <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="noise1" seed="2" />
                    <feOffset in="noise1" dx="0" dy="0" result="offsetNoise3">
                        <animate attributeName="dx" values="490; 0" dur="6s" repeatCount="indefinite" calcMode="linear" />
                    </feOffset>
                    <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="noise2" seed="2" />
                    <feOffset in="noise2" dx="0" dy="0" result="offsetNoise4">
                        <animate attributeName="dx" values="0; -490" dur="6s" repeatCount="indefinite" calcMode="linear" />
                    </feOffset>
                    <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
                    <feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
                    <feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />
                    <feDisplacementMap
                        in="SourceGraphic"
                        in2="combinedNoise"
                        scale="30"
                        xChannelSelector="R"
                        yChannelSelector="B"
                    />
                </filter>
            </defs>
        </svg>
    `;
    
    wrapper.insertAdjacentHTML('afterbegin', svgMarkup);
    wrapper.style.setProperty('--electric-border-color', color);
    wrapper.style.setProperty('--eb-border-width', `${thickness}px`);

    const stroke = wrapper.querySelector(".eb-stroke");
    if (stroke) {
        stroke.style.filter = `url(#${filterId})`;
    }

    const updateAnim = () => {
        const svg = wrapper.querySelector(".eb-svg");
        if (!svg) return;

        const width = Math.max(1, Math.round(wrapper.clientWidth || 0));
        const height = Math.max(1, Math.round(wrapper.clientHeight || 0));

        const dyAnims = Array.from(svg.querySelectorAll('feOffset > animate[attributeName="dy"]'));
        if (dyAnims.length >= 2) {
            dyAnims[0].setAttribute('values', `${height}; 0`);
            dyAnims[1].setAttribute('values', `0; -${height}`);
        }

        const dxAnims = Array.from(svg.querySelectorAll('feOffset > animate[attributeName="dx"]'));
        if (dxAnims.length >= 2) {
            dxAnims[0].setAttribute('values', `${width}; 0`);
            dxAnims[1].setAttribute('values', `0; -${width}`);
        }

        const baseDur = 6;
        const dur = Math.max(0.001, baseDur / (speed || 1));
        [...dyAnims, ...dxAnims].forEach(a => a.setAttribute('dur', `${dur}s`));

        const disp = svg.querySelector('feDisplacementMap');
        if (disp) disp.setAttribute('scale', String(30 * (chaos || 1)));

        requestAnimationFrame(() => {
            [...dyAnims, ...dxAnims].forEach(a => {
                if (typeof a.beginElement === 'function') {
                    try { a.beginElement(); } catch { }
                }
            });
        });
    };

    updateAnim();
});
</script>