<section class="bg-[#FDFDF9] py-16 md:py-24 px-5" data-component-type="Content" data-component-slug="ss-photography-vision">
  <div class="max-w-[90%] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16">
    <!-- LEFT SIDEBAR: Label -->
    <div class="lg:col-span-2">
      {{#if vision_label}}
      <span class="block font-sans text-xs md:text-sm uppercase tracking-widest text-[#999999] mb-4 lg:mb-0">
        <span data-node="vision_label" data-node-type="text" data-node-label="Section Label" data-node-default="OUR VISION">{{vision_label}}</span>
      </span>
      {{/if}}
    </div>

    <!-- MAIN CONTENT -->
    <div class="lg:col-span-10 flex flex-col gap-16 md:gap-24">
      <!-- Vision Text -->
      {{#if vision_text}}
      <div>
        <h3 class="font-['Cormorant',_serif] text-2xl md:text-4xl lg:text-[40px] leading-relaxed md:leading-normal text-[#1A1A1A] max-w-4xl">
          <span data-node="vision_text" data-node-type="text" data-node-label="Vision Text" data-node-default="Built on the belief that powerful images come from genuine connection. The focus remains on mood, movement, and natural expression. Every project is approached with curiosity, precision, and creative restraint. The result is photography that feels timeless, not trendy.">{{vision_text}}</span>
        </h3>
      </div>
      {{/if}}

      <!-- Statistics Grid -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 border-t border-gray-200 pt-12">
        <!-- Stat 1 -->
        <div class="flex flex-col gap-2">
          {{#if stat_value_1}}
          <span class="font-['Cormorant',_serif] text-4xl md:text-5xl text-[#1A1A1A]">
            <span data-node="stat_value_1" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="97%">{{stat_value_1}}</span>
          </span>
          {{/if}} {{#if stat_label_1}}
          <span class="font-sans text-xs md:text-sm text-[#666666] leading-snug">
            <span data-node="stat_label_1" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="Trusted Client Satisfaction">{{stat_label_1}}</span>
          </span>
          {{/if}}
        </div>

        <!-- Stat 2 -->
        <div class="flex flex-col gap-2 md:border-l md:border-gray-200 md:pl-10">
          {{#if stat_value_2}}
          <span class="font-['Cormorant',_serif] text-4xl md:text-5xl text-[#1A1A1A]">
            <span data-node="stat_value_2" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="12M">{{stat_value_2}}</span>
          </span>
          {{/if}} {{#if stat_label_2}}
          <span class="font-sans text-xs md:text-sm text-[#666666] leading-snug">
            <span data-node="stat_label_2" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="Global Visual Views">{{stat_label_2}}</span>
          </span>
          {{/if}}
        </div>

        <!-- Stat 3 -->
        <div class="flex flex-col gap-2 md:border-l md:border-gray-200 md:pl-10">
          {{#if stat_value_3}}
          <span class="font-['Cormorant',_serif] text-4xl md:text-5xl text-[#1A1A1A]">
            <span data-node="stat_value_3" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="45M">{{stat_value_3}}</span>
          </span>
          {{/if}} {{#if stat_label_3}}
          <span class="font-sans text-xs md:text-sm text-[#666666] leading-snug">
            <span data-node="stat_label_3" data-node-type="text" data-node-label="Stat 3 Label" data-node-default="Audience Creative Reach">{{stat_label_3}}</span>
          </span>
          {{/if}}
        </div>

        <!-- Stat 4 -->
        <div class="flex flex-col gap-2 md:border-l md:border-gray-200 md:pl-10">
          {{#if stat_value_4}}
          <span class="font-['Cormorant',_serif] text-4xl md:text-5xl text-[#1A1A1A]">
            <span data-node="stat_value_4" data-node-type="text" data-node-label="Stat 4 Value" data-node-default="12+">{{stat_value_4}}</span>
          </span>
          {{/if}} {{#if stat_label_4}}
          <span class="font-sans text-xs md:text-sm text-[#666666] leading-snug">
            <span data-node="stat_label_4" data-node-type="text" data-node-label="Stat 4 Label" data-node-default="Years Industry Experience">{{stat_label_4}}</span>
          </span>
          {{/if}}
        </div>
      </div>

      <!-- Logos Grid -->
      <div class="grid grid-cols-2 md:grid-cols-6 gap-10 md:gap-16 items-center opacity-80">
        {{#if client_logo_1}}
        <img src="{{client_logo_1}}" alt="Client 1" class="h-6 md:h-8 object-contain justify-self-start grayscale hover:grayscale-0 transition-all duration-300" data-node="client_logo_1" data-node-type="file" data-node-label="Client Logo 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440955/seltrix/templates/ss-photography/logo-1.svg">
        {{/if}} {{#if client_logo_2}}
        <img src="{{client_logo_2}}" alt="Client 2" class="h-6 md:h-8 object-contain justify-self-start md:justify-self-center grayscale hover:grayscale-0 transition-all duration-300" data-node="client_logo_2" data-node-type="file" data-node-label="Client Logo 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440958/seltrix/templates/ss-photography/logo-2.svg">
        {{/if}} {{#if client_logo_3}}
        <img src="{{client_logo_3}}" alt="Client 3" class="h-6 md:h-8 object-contain justify-self-start md:justify-self-center grayscale hover:grayscale-0 transition-all duration-300" data-node="client_logo_3" data-node-type="file" data-node-label="Client Logo 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440960/seltrix/templates/ss-photography/logo-3.svg">
        {{/if}} {{#if client_logo_4}}
        <img src="{{client_logo_4}}" alt="Client 4" class="h-6 md:h-8 object-contain justify-self-start md:justify-self-end grayscale hover:grayscale-0 transition-all duration-300" data-node="client_logo_4" data-node-type="file" data-node-label="Client Logo 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440961/seltrix/templates/ss-photography/logo-4.svg">
        {{/if}}
      </div>
    </div>
  </div>
</section>