<section class="bg-[#FDFDF9] font-['Cormorant',_serif] py-20 px-5" data-component-type="Content" data-component-slug="ss-photography-testimonials">
  <div class="max-w-[1400px] mx-auto">
    <!-- HEADER SECTION -->
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-8 border-b border-[#D4D4D4] pb-8">
      <div class="flex-1">
        {{#if show_section_subtitle}}
        <p class="text-xs font-sans tracking-[0.2em] text-[#666666] uppercase mb-2">
          <span data-node="section_subtitle" data-node-type="text" data-node-label="Section Subtitle" data-node-default="VOICES">{{section_subtitle}}</span>
        </p>
        {{/if}} {{#if show_section_title}}
        <h2 class="text-4xl md:text-5xl text-[#1A1A1A] mb-4">
          <span data-node="section_title" data-node-type="text" data-node-label="Section Title" data-node-default="THROUGH THEIR LENS">{{section_title}}</span>
        </h2>
        {{/if}} {{#if show_count_section}}
        <div class="flex items-center gap-2">
          <span class="text-sm font-sans text-[#666666]" data-node="count_title" data-node-type="text" data-node-label="Count Title" data-node-default="Total Reviews">{{count_title}}</span>
          <span class="text-2xl font-medium text-[#1A1A1A]">
            <span data-node="total_reviews" data-node-type="text" data-node-label="Total Reviews Count" data-node-default="323">{{total_reviews}}</span>
          </span>
        </div>
        {{/if}}
      </div>

      <div class="flex items-center gap-6">
        <!-- Navigation Buttons -->
        <div class="flex items-center gap-3 bg-black p-2 rounded-full">
          <button id="prevBtn" class="w-10 h-10 rounded-full bg-[#1f1f1f] text-white flex items-center justify-center hover:bg-opacity-80 transition-colors" aria-label="Previous Review">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M15 18l-6-6 6-6"/>
            </svg>
          </button>
          <button id="nextBtn" class="w-10 h-10 rounded-full bg-[#1f1f1f] text-white flex items-center justify-center hover:bg-opacity-80 transition-colors" aria-label="Next Review">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </button>
        </div>

        <!-- CTA Button -->
        <a href="{{cta_link}}" class="hidden md:inline-flex items-center gap-2 bg-[#1A1A1A] text-white px-6 py-3 rounded text-sm font-sans uppercase tracking-wider hover:bg-opacity-90 transition-opacity" data-node="cta_link" data-node-type="url" data-node-label="CTA Link" data-node-default="#">
          <span data-node="cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="View All Testimonials">{{cta_text}}</span>
          <span>→</span>
        </a>
      </div>
    </div>

    <!-- CAROUSEL -->
    <div class="relative overflow-hidden">
      <div id="carouselContainer" class="flex gap-6 overflow-x-auto scrollbar-hide pb-4" style="scrollbar-width: none; -ms-overflow-style: none">
        <!-- REVIEW 1 -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-[#1A1A1A] p-8 rounded-lg flex flex-col justify-between min-h-[280px]">
          <div class="flex items-start justify-between mb-6">
            <div>
              {{#if review_name_1}}
              <h3 class="text-white text-lg font-sans mb-1">
                <span data-node="review_name_1" data-node-type="text" data-node-label="Review Name 1" data-node-default="Emily Johnson">{{review_name_1}}</span>
              </h3>
              {{/if}} {{#if review_location_1}}
              <p class="text-[#666666] text-xs font-sans uppercase">
                <span data-node="review_location_1" data-node-type="text" data-node-label="Review Location 1" data-node-default="USA, California">{{review_location_1}}</span>
              </p>
              {{/if}}
            </div>
            <!-- Social Icons Mockup -->
            <div class="flex gap-2 opacity-50">
              {{#if review_1_social_1}}
              <a data-node="review_1_social_1" data-node-type="url" data-node-label="Review 1 Social 1" data-node-default="#" href="{{review_1_social_1}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_1_social_icon_1" data-node-type="file" data-node-label="Review 1 Social Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438710/seltrix/templates/ss-photography/facebook.svg" src="{{review_1_social_icon_1}}" alt="R1 SI1">
              </a>
              {{/if}} {{#if review_1_social_2}}
              <a data-node="review_1_social_2" data-node-type="url" data-node-label="Review 1 Social 2" data-node-default="#" href="{{review_1_social_2}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_1_social_icon_2" data-node-type="file" data-node-label="Review 1 Social Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767441000/seltrix/templates/ss-photography/x.svg" src="{{review_1_social_icon_2}}" alt="R1 SI2">
              </a>
              {{/if}} {{#if review_1_social_3}}
              <a data-node="review_1_social_3" data-node-type="url" data-node-label="Review 1 Social 3" data-node-default="#" href="{{review_1_social_3}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_1_social_icon_3" data-node-type="file" data-node-label="Review 1 Social Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438751/seltrix/templates/ss-photography/instagram.svg" src="{{review_1_social_icon_3}}" alt="R1 SI3">
              </a>
              {{/if}}
            </div>
          </div>

          <div class="mb-4 text-[#F9BF29] text-sm tracking-widest">
            <span data-node="review_1_rating" data-node-type="text" data-node-label="Review 1 Rating" data-node-default="★★★★★">{{review_1_rating}}</span>
          </div>

          <p class="text-[#D4D4D4] text-base leading-relaxed font-sans">
            <span data-node="review_text_1" data-node-type="text" data-node-label="Review Text 1" data-node-default="Every picture felt alive. The session was relaxed, fun, and beautifully executed, these are the photos I'll treasure forever.">{{review_text_1}}</span>
          </p>
        </div>

        <!-- REVIEW 2 -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-[#1A1A1A] p-8 rounded-lg flex flex-col justify-between min-h-[280px]">
          <div class="flex items-start justify-between mb-6">
            <div>
              {{#if review_name_2}}
              <h3 class="text-white text-lg font-sans mb-1">
                <span data-node="review_name_2" data-node-type="text" data-node-label="Review Name 2" data-node-default="John Smith">{{review_name_2}}</span>
              </h3>
              {{/if}} {{#if review_location_2}}
              <p class="text-[#666666] text-xs font-sans uppercase">
                <span data-node="review_location_2" data-node-type="text" data-node-label="Review Location 2" data-node-default="Italy">{{review_location_2}}</span>
              </p>
              {{/if}}
            </div>
            <div class="flex gap-2 opacity-50">
              {{#if review_2_social_1}}
              <a data-node="review_2_social_1" data-node-type="url" data-node-label="Review 2 Social 1" data-node-default="#" href="{{review_2_social_1}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_2_social_icon_1" data-node-type="file" data-node-label="Review 2 Social Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438710/seltrix/templates/ss-photography/facebook.svg" src="{{review_2_social_icon_1}}" alt="R2 SI1">
              </a>
              {{/if}} {{#if review_2_social_2}}
              <a data-node="review_2_social_2" data-node-type="url" data-node-label="Review 2 Social 2" data-node-default="#" href="{{review_2_social_2}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_2_social_icon_2" data-node-type="file" data-node-label="Review 2 Social Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767441000/seltrix/templates/ss-photography/x.svg" src="{{review_2_social_icon_2}}" alt="R2 SI2">
              </a>
              {{/if}} {{#if review_2_social_3}}
              <a data-node="review_2_social_3" data-node-type="url" data-node-label="Review 2 Social 3" data-node-default="#" href="{{review_2_social_3}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_2_social_icon_3" data-node-type="file" data-node-label="Review 2 Social Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438751/seltrix/templates/ss-photography/instagram.svg" src="{{review_2_social_icon_3}}" alt="R2 SI3">
              </a>
              {{/if}}
            </div>
          </div>

          <div class="mb-4 text-[#F9BF29] text-sm tracking-widest">
            <span data-node="review_2_rating" data-node-type="text" data-node-label="Review 2 Rating" data-node-default="★★★★★">{{review_2_rating}}</span>
          </div>

          <p class="text-[#D4D4D4] text-base leading-relaxed font-sans">
            <span data-node="review_text_2" data-node-type="text" data-node-label="Review Text 2" data-node-default="Impressive attention to detail. The brand shoot elevated our entire visual identity. Couldn’t have asked for better creativity.">{{review_text_2}}</span>
          </p>
        </div>

        <!-- REVIEW 3 -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-[#1A1A1A] p-8 rounded-lg flex flex-col justify-between min-h-[280px]">
          <div class="flex items-start justify-between mb-6">
            <div>
              {{#if review_name_3}}
              <h3 class="text-white text-lg font-sans mb-1">
                <span data-node="review_name_3" data-node-type="text" data-node-label="Review Name 3" data-node-default="Samantha Davis">{{review_name_3}}</span>
              </h3>
              {{/if}} {{#if review_location_3}}
              <p class="text-[#666666] text-xs font-sans uppercase">
                <span data-node="review_location_3" data-node-type="text" data-node-label="Review Location 3" data-node-default="Paris">{{review_location_3}}</span>
              </p>
              {{/if}}
            </div>
            <div class="flex gap-2 opacity-50">
              {{#if review_3_social_1}}
              <a data-node="review_3_social_1" data-node-type="url" data-node-label="Review 3 Social 1" data-node-default="#" href="{{review_3_social_1}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_3_social_icon_1" data-node-type="file" data-node-label="Review 3 Social Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438710/seltrix/templates/ss-photography/facebook.svg" src="{{review_3_social_icon_1}}" alt="R3 SI1">
              </a>
              {{/if}} {{#if review_3_social_2}}
              <a data-node="review_3_social_2" data-node-type="url" data-node-label="Review 3 Social 2" data-node-default="#" href="{{review_3_social_2}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_3_social_icon_2" data-node-type="file" data-node-label="Review 3 Social Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767441000/seltrix/templates/ss-photography/x.svg" src="{{review_3_social_icon_2}}" alt="R3 SI2">
              </a>
              {{/if}} {{#if review_3_social_3}}
              <a data-node="review_3_social_3" data-node-type="url" data-node-label="Review 3 Social 3" data-node-default="#" href="{{review_3_social_3}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_3_social_icon_3" data-node-type="file" data-node-label="Review 3 Social Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438751/seltrix/templates/ss-photography/instagram.svg" src="{{review_3_social_icon_3}}" alt="R3 SI3">
              </a>
              {{/if}}
            </div>
          </div>

          <div class="mb-4 text-[#F9BF29] text-sm tracking-widest">
            <span data-node="review_3_rating" data-node-type="text" data-node-label="Review 3 Rating" data-node-default="★★★★★">{{review_3_rating}}</span>
          </div>

          <p class="text-[#D4D4D4] text-base leading-relaxed font-sans">
            <span data-node="review_text_3" data-node-type="text" data-node-label="Review Text 3" data-node-default="Professional, patient, and incredibly talented. The results were beyond what I expected. Highly recommended!">{{review_text_3}}</span>
          </p>
        </div>

        <!-- REVIEW 4 (Hidden initially on some screens but scrollable) -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-[#1A1A1A] p-8 rounded-lg flex flex-col justify-between min-h-[280px]">
          <div class="flex items-start justify-between mb-6">
            <div>
              {{#if review_name_4}}
              <h3 class="text-white text-lg font-sans mb-1">
                <span data-node="review_name_4" data-node-type="text" data-node-label="Review Name 4" data-node-default="Michael Brown">{{review_name_4}}</span>
              </h3>
              {{/if}} {{#if review_location_4}}
              <p class="text-[#666666] text-xs font-sans uppercase">
                <span data-node="review_location_4" data-node-type="text" data-node-label="Review Location 4" data-node-default="London">{{review_location_4}}</span>
              </p>
              {{/if}}
            </div>
            <div class="flex gap-2 opacity-50">
              {{#if review_4_social_1}}
              <a data-node="review_4_social_1" data-node-type="url" data-node-label="Review 4 Social 1" data-node-default="#" href="{{review_4_social_1}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_4_social_icon_1" data-node-type="file" data-node-label="Review 4 Social Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438710/seltrix/templates/ss-photography/facebook.svg" src="{{review_4_social_icon_1}}" alt="R4 SI1">
              </a>
              {{/if}} {{#if review_4_social_2}}
              <a data-node="review_4_social_2" data-node-type="url" data-node-label="Review 4 Social 2" data-node-default="#" href="{{review_4_social_2}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_4_social_icon_2" data-node-type="file" data-node-label="Review 4 Social Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767441000/seltrix/templates/ss-photography/x.svg" src="{{review_4_social_icon_2}}" alt="R4 SI2">
              </a>
              {{/if}} {{#if review_4_social_3}}
              <a data-node="review_4_social_3" data-node-type="url" data-node-label="Review 4 Social 3" data-node-default="#" href="{{review_4_social_3}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_4_social_icon_3" data-node-type="file" data-node-label="Review 4 Social Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438751/seltrix/templates/ss-photography/instagram.svg" src="{{review_4_social_icon_3}}" alt="R4 SI3">
              </a>
              {{/if}}
            </div>
          </div>

          <div class="mb-4 text-[#F9BF29] text-sm tracking-widest">
            <span data-node="review_4_rating" data-node-type="text" data-node-label="Review 4 Rating" data-node-default="★★★★★">{{review_4_rating}}</span>
          </div>

          <p class="text-[#D4D4D4] text-base leading-relaxed font-sans">
            <span data-node="review_text_4" data-node-type="text" data-node-label="Review Text 4" data-node-default="Capturing moments that matter. The team made us feel comfortable and the photos are absolutely stunning.">{{review_text_4}}</span>
          </p>
        </div>

        <!-- REVIEW 5 (Hidden initially on some screens but scrollable) -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-[#1A1A1A] p-8 rounded-lg flex flex-col justify-between min-h-[280px]">
          <div class="flex items-start justify-between mb-6">
            <div>
              {{#if review_name_5}}
              <h3 class="text-white text-lg font-sans mb-1">
                <span data-node="review_name_5" data-node-type="text" data-node-label="Review Name 5" data-node-default="Hassan Ali">{{review_name_5}}</span>
              </h3>
              {{/if}} {{#if review_location_5}}
              <p class="text-[#666666] text-xs font-sans uppercase">
                <span data-node="review_location_5" data-node-type="text" data-node-label="Review Location 5" data-node-default="New York">{{review_location_5}}</span>
              </p>
              {{/if}}
            </div>
            <div class="flex gap-2 opacity-50">
              {{#if review_5_social_1}}
              <a data-node="review_5_social_1" data-node-type="url" data-node-label="Review 5 Social 1" data-node-default="#" href="{{review_5_social_1}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_5_social_icon_1" data-node-type="file" data-node-label="Review 5 Social Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438710/seltrix/templates/ss-photography/facebook.svg" src="{{review_5_social_icon_1}}" alt="R5 SI1">
              </a>
              {{/if}} {{#if review_5_social_2}}
              <a data-node="review_5_social_2" data-node-type="url" data-node-label="Review 5 Social 2" data-node-default="#" href="{{review_5_social_2}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_5_social_icon_2" data-node-type="file" data-node-label="Review 5 Social Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767441000/seltrix/templates/ss-photography/x.svg" src="{{review_5_social_icon_2}}" alt="R5 SI2">
              </a>
              {{/if}} {{#if review_5_social_3}}
              <a data-node="review_5_social_3" data-node-type="url" data-node-label="Review 5 Social 3" data-node-default="#" href="{{review_5_social_3}}" target="_blank" class="w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-white text-[10px]">
                <img class="w-4 h-4" data-node="review_5_social_icon_3" data-node-type="file" data-node-label="Review 5 Social Icon 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438751/seltrix/templates/ss-photography/instagram.svg" src="{{review_5_social_icon_3}}" alt="R5 SI3">
              </a>
              {{/if}}
            </div>
          </div>

          <div class="mb-4 text-[#F9BF29] text-sm tracking-widest">
            <span data-node="review_5_rating" data-node-type="text" data-node-label="Review 5 Rating" data-node-default="★★★★">{{review_5_rating}}</span>
          </div>

          <p class="text-[#D4D4D4] text-base leading-relaxed font-sans">
            <span data-node="review_text_5" data-node-type="text" data-node-label="Review Text 5" data-node-default="Capturing moments that matter. The team made us feel comfortable and the photos are absolutely stunning.">{{review_text_5}}</span>
          </p>
        </div>
      </div>
    </div>

    <!-- Mobile CTA -->
    <div class="mt-8 text-center md:hidden">
      <a href="{{cta_link}}" class="inline-flex items-center gap-2 bg-[#1A1A1A] text-white px-6 py-3 rounded text-sm font-sans uppercase tracking-wider">
        <span>{{cta_text}}</span>
        <span>→</span>
      </a>
    </div>
  </div>

  
</section>