@props(['rateSettings'])
<!-- Start Rate Section -->
<section class="td_accent_bg td_rate_section wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s">
  <div class="td_rate_section_inner">
    <div class="td_rate_heading td_fs_20 td_semibold td_white_color">
      {{ app()->getLocale() == 'en' ? $rateSettings['en']['heading_text'] ?? 'Excellent Rated On Trustpilot' : $rateSettings['ar']['heading_text'] ?? 'تقييم ممتاز على Trustpilot' }}
    </div>
    <div class="td_rate_feature_list_wrap">
      <div class="td_moving_box_in">
        @for ($i = 0; $i < 3; $i++)
          <div class="td_moving_box">
            <ul class="td_rate_feature_list td_mp_0">
              @php
                $items = [
                  ['key' => 'one', 'default_image' => '1738833985_item_one_image.svg'],
                  ['key' => 'two', 'default_image' => '1738833985_item_two_image.svg'],
                  ['key' => 'three', 'default_image' => '1738834030_item_three_image.svg'],
                  ['key' => 'four', 'default_image' => '1738834030_item_four_image.svg']
                ];
              @endphp
              
              @foreach($items as $item)
                <li>
                  <div class="td_rate_feature_icon td_center td_white_bg">
                    <img src="{{ asset('uploads/website-images/' . ($rateSettings['images']['item_'.$item['key'].'_image'] ?? $item['default_image'])) }}" 
                         alt="{{ app()->getLocale() == 'en' ? ($rateSettings['en']['item_'.$item['key'].'_title'] ?? 'Title') : ($rateSettings['ar']['item_'.$item['key'].'_title'] ?? 'عنوان') }}">
                  </div>
                  <div class="td_rate_feature_right">
                    <h3 class="td_fs_24 td_semibold td_white_color td_mb_4">
                      {{ app()->getLocale() == 'en' ? ($rateSettings['en']['item_'.$item['key'].'_title'] ?? 'Title') : ($rateSettings['ar']['item_'.$item['key'].'_title'] ?? 'عنوان') }}
                    </h3>
                    <p class="mb-0 td_white_color td_opacity_7">
                      {{ app()->getLocale() == 'en' ? ($rateSettings['en']['item_'.$item['key'].'_description'] ?? 'Description') : ($rateSettings['ar']['item_'.$item['key'].'_description'] ?? 'الوصف') }}
                    </p>
                  </div>
                </li>
              @endforeach
            </ul>
          </div>
        @endfor
      </div>
    </div>
  </div>
</section>
<!-- End Rate Section -->

<style>
  @font-face {
    font-family: 'Tufuli';
    src: url('{{ asset("fonts/Tufuli.woff2") }}') format('woff2'),
         url('{{ asset("fonts/Tufuli.woff") }}') format('woff'),
         url('{{ asset("fonts/Tufuli.ttf") }}') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  * {
    font-family: 'Tufuli', sans-serif !important;
  }
  
  .td_rate_section {
    align-items: center;
    background: linear-gradient(90deg, {{ $rateSettings['gradient']['start_color'] ?? 'rgba(161, 13, 247, 0.8)' }} 0.07%, {{ $rateSettings['gradient']['end_color'] ?? 'rgba(222, 42, 42, 0.8)' }} 95.86%);
    padding: 15px 30px;
  }
  
  .td_rate_section_inner {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .td_rate_heading {
    flex: 0 0 auto;
    margin-right: 30px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 45px 30px 35px;
    border-right: 5px solid #fff;
    min-height: 142px;
    gap: 15px;
    position: relative;
  }
  
  html[lang="ar"] .td_rate_heading {
    margin-right: 0;
    margin-left: 30px;
    border-right: none; /* إزالة الحدود اليمنى في اللغة العربية */
    border-left: none; /* للتأكيد على عدم وجود حدود على اليسار أيضًا */
  }
  
  .td_rate_feature_list_wrap {
    flex: 1;
    overflow: hidden;
  }
  
  .td_moving_box_in {
    display: flex;
    overflow: hidden;
    position: relative;
  }
  
  .td_moving_box {
    display: inline-block;
    min-width: 100%;
    animation: scrollLTR 30s linear infinite;
  }
  
  html[lang="ar"] .td_moving_box {
    animation: scrollRTL 30s linear infinite;
  }
  
  .td_rate_feature_list {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .td_rate_feature_list li {
    margin-right: 15px;
    flex: 0 0 auto;
  }
  
  html[lang="ar"] .td_rate_feature_list li {
    margin-right: 0;
    margin-left: 15px;
  }
  
  @keyframes scrollLTR {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  
  @keyframes scrollRTL {
    0%   { transform: translateX(0); }
    100% { transform: translateX(100%); }
  }
  
  .td_moving_box_in:hover .td_moving_box {
    animation-play-state: paused;
  }
  
  /* تعديلات للشاشات الصغيرة */
  @media (max-width: 768px) {
    .td_rate_section_inner {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .td_rate_heading {
      margin-right: 0;
      margin-bottom: 15px;
      width: 100%;
      text-align: center;
    }
    
    html[lang="ar"] .td_rate_heading {
      margin-left: 0;
    }
  }
</style>