<testimonials>
  <section class="about padding-top padding-bottom">
    <div class="container">
      <div class="columns">
        <div class="column col-12">
          <div class="about__inner">
            <div class="about__blur">
              <svg width="1200" height="854" viewBox="0 0 645 854" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g opacity="0.3" filter="url(#filter0_f_258_2623)">
                  <circle cx="218" cy="427" r="127" fill="#317BE9" />
                </g>
                <defs>
                  <filter id="filter0_f_258_2623" x="-209" y="0" width="854" height="854" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                    <feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_258_2623" />
                  </filter>
                </defs>
              </svg>
            </div>
            <div class="about__img">
              <img id="aboutImg" src="{opts.topImage}" alt="About us Image">
            </div>
            <div class="about__box">
              <h1 if={opts.topTitle} class="first-title about__title">
                <raw content={opts.topTitle} />
              </h1>
              <div class="about__img-2">
                <img id="aboutImg" src="{opts.topImage}" alt="About us Image">
              </div>
              <p if={opts.description} class="about__text">
                <raw content={opts.description} />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section if={(opts.testimonialList && opts.testimonialList.length !== 0) && opts.isFullPlan} class="say padding-bottom">
    <div class="container">
      <div class="columns">
        <div class="column col-12">
          <div class="say__inner">
            <div class="say__blur">
              <svg width="1200" height="854" viewBox="0 0 645 854" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g opacity="0.3" filter="url(#filter0_f_258_2623)">
                  <circle cx="218" cy="427" r="127" fill="#317BE9" />
                </g>
                <defs>
                  <filter id="filter0_f_258_2623" x="-209" y="0" width="854" height="854" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                    <feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_258_2623" />
                  </filter>
                </defs>
              </svg>
            </div>
            <div class="say__box">
              <h1 class="first-title say__title">
                {opts.testimonialTitle}
              </h1>
              <div class="say__img-2">
                <img src="{opts.testimonialImg}" alt="">
              </div>
              <div class="saySlider swiper">
                <div class="swiper-wrapper saySlider__wrapper">
                  <div each={testimony in opts.testimonialList} class="swiper-slide saySlider__slide">
                    <p if={testimony.description} class="saySlider__text">
                      <raw content={testimony.description} />
                    </p>
                    <div class="saySlider__box">
                      <p class="saySlider__info">
                        <span class="saySlider__name"> {testimony.testimonial}</span>
                      </p>
                      <div class="saySlider__quote">
                        <svg width="69" height="52" viewBox="0 0 69 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <g opacity="0.3" clip-path="url(#clip0_258_2740)">
                            <path
                              d="M28.0044 1.08203H2.02148C0.90493 1.08203 0 1.99133 0 3.11328V29.2217C0 30.3437 0.90493 31.253 2.02148 31.253H12.9912V48.8032C12.9912 49.9246 13.8961 50.8344 15.0127 50.8344H21.5088C22.379 50.8344 23.1513 50.2748 23.4261 49.4454L29.9217 29.8639C29.9906 29.6571 30.0259 29.4402 30.0259 29.2217V3.11328C30.0259 1.99133 29.121 1.08203 28.0044 1.08203V1.08203Z"
                              fill="#317BE9" />
                            <path
                              d="M66.9785 1.08203H40.9956C39.8791 1.08203 38.9741 1.99133 38.9741 3.11328V29.2217C38.9741 30.3437 39.8791 31.253 40.9956 31.253H51.9658V48.8032C51.9658 49.9246 52.8708 50.8344 53.9873 50.8344H60.4829C61.3531 50.8344 62.1254 50.2748 62.4007 49.4454L68.8963 29.8639C68.9647 29.6571 69 29.4402 69 29.2217V3.11328C69 1.99133 68.0951 1.08203 66.9785 1.08203V1.08203Z"
                              fill="#317BE9" />
                          </g>
                          <defs>
                            <clipPath id="clip0_258_2740">
                              <rect width="69" height="52" fill="white" />
                            </clipPath>
                          </defs>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div if={opts.testimonialList && opts.testimonialList.length > 1} class="saySlider__group">
                <div class="saySlider__arrow saySlider__prev swiper-button-prev">
                  <img src="/static/img/clinic-landing/arrow.svg" alt="">
                </div>
                <div class="saySlider__arrow saySlider__next swiper-button-next">
                  <img src="/static/img/clinic-landing/arrow.svg" alt="">
                </div>
              </div>
            </div>
            <div class="say__img">
              <img src="{opts.testimonialImg}" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script>
    const controller = this;
    const { topTitle, description, topImage } = controller.opts;
    controller.topTitle = topTitle;
  </script>
</testimonials>
