<section class="py-16 md:py-24 bg-white" data-component-type="Content" data-component-slug="home-appliances-template-who_we_are">
  <div class="max-w-[90%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
    <!-- LEFT COLUMN -->
    <div>
      <p class="text-xs font-bold tracking-[0.2em] text-[#2346A7] uppercase mb-4">
        <span data-node="section_subtitle" data-node-type="text" data-node-label="Section Subtitle" data-node-default="WHO WE ARE">{{section_subtitle}}</span>
      </p>
      
      <h2 class="text-4xl md:text-5xl font-bold text-[#1A1A1A] mb-6 leading-tight">
        <span data-node="section_title" data-node-type="text" data-node-label="Section Title" data-node-default="Designed to make your home efficient, stylish, and future-ready.">{{section_title}}</span>
      </h2>

      <p class="text-gray-500 mb-10 leading-relaxed">
        <span data-node="section_desc" data-node-type="text" data-node-label="Description" data-node-default="A trusted home appliance destination bringing innovation, comfort, and reliability to everyday life. Each product is curated with modern technology, smart features, and lasting performance in mind.">{{section_desc}}</span>
      </p>

      <!-- FEATURES -->
      <div class="space-y-8 mb-10">
        <!-- Item 1 -->
        <div class="flex gap-4">
          <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center">
             <img data-node="feature_icon_1" data-node-type="file" data-node-label="Feature Icon 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046156/seltrix/templates/home-appliances-template/icon-kitchen.png" src="{{feature_icon_1}}" class="w-8 h-8 object-contain" alt="Icon">
          </div>
          <div>
            <h3 class="text-xl font-medium text-[#1A1A1A] mb-2">
                <span data-node="feature_title_1" data-node-type="text" data-node-label="Feature Title 1" data-node-default="Kitchen Store">{{feature_title_1}}</span>
            </h3>
            <p class="text-gray-500 text-sm leading-relaxed max-w-sm">
                <span data-node="feature_desc_1" data-node-type="text" data-node-label="Feature Description 1" data-node-default="Essential tools crafted to elevate every cooking moment.">{{feature_desc_1}}</span>
            </p>
          </div>
        </div>

        <!-- Item 2 -->
        <div class="flex gap-4">
          <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center">
             <img data-node="feature_icon_2" data-node-type="file" data-node-label="Feature Icon 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046154/seltrix/templates/home-appliances-template/icon-appliance.png" src="{{feature_icon_2}}" class="w-10 h-10 object-contain" alt="Icon">
          </div>
          <div>
            <h3 class="text-xl font-medium text-[#1A1A1A] mb-2">
                <span data-node="feature_title_2" data-node-type="text" data-node-label="Feature Title 2" data-node-default="Appliance Store">{{feature_title_2}}</span>
            </h3>
            <p class="text-gray-500 text-sm leading-relaxed max-w-sm">
                <span data-node="feature_desc_2" data-node-type="text" data-node-label="Feature Description 2" data-node-default="Smart, dependable appliances designed for modern living.">{{feature_desc_2}}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="border-t border-gray-200 pt-8 mb-8">
        <p class="text-gray-500 text-sm mb-6">
            <span data-node="footer_text" data-node-type="text" data-node-label="Footer Text" data-node-default="From expert guidance to seamless service, the goal is to help you create a home that feels effortless, efficient, and inspired.">{{footer_text}}</span>
        </p>
        <a href="{{btn_link}}" class="inline-block bg-[#F9BF29] text-[#1A1A1A] text-xs font-bold uppercase tracking-widest px-8 py-4 hover:bg-[#e0ac25] transition-colors">
          <span data-node="btn_text" data-node-type="text" data-node-label="Button Text" data-node-default="DISCOVER MORE">{{btn_text}}</span>
        </a>
      </div>
    </div>

    <!-- RIGHT COLUMN (IMAGE) -->
    <div class="relative items-center justify-center flex ">
        <!-- Main Image Frame -->
        <div class="relative z-10 p-2 md:p-0 ">
             <!-- Gold/Green Border Element -->
            <!-- <div class="absolute inset-0 border-[6px] border-gradient-to-b from-[#D4AF37] to-[#2346A7] transform translate-x-4 translate-y-4 md:translate-x-4 md:translate-y-4 z-0 hidden md:block"
             style="border-image: linear-gradient(to bottom, #cfc668, #3b5998) 1;"></div> -->
             <div class="border border-[6px] border-gradient-to-b from-[#D4AF37] to-[#2346A7]" style="border-image: linear-gradient(to bottom, #cfc668, #3b5998) 1;">
            <div id="mediaContainer" class="relative z-10 md:w-[600px] md:h-[600px] h-[300px] shadow-xl bg-black">
               <img id="mainImage" data-node="main_image" data-node-type="file" data-node-label="Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046227/seltrix/templates/home-appliances-template/w2.png" src="{{main_image}}" class="w-full h-full object-cover" alt="Who We Are">
               
               <!-- Video Container (Hidden by default) -->
               <div id="videoContainer" class="hidden absolute inset-0 w-full h-full">
                   <iframe id="videoFrame" class="w-full h-full" title="Video Player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src>
                   </iframe>
                   <!-- Fallback if using local video file data node instead of iframe -->
                   <!-- 
                   <video id="localVideo" controls class="w-full h-full object-cover hidden">
                       <source src="" type="video/mp4">
                   </video> 
                   -->
               </div>

                <!-- Hidden data node for video URL (used by JS) -->
               <div class="hidden">
                   <span id="videoUrlNode" data-node="video_url" data-node-type="text" data-node-label="Video URL (YouTube/Vimeo Embed)" data-node-default="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1">{{video_url}}</span>
               </div>
            </div>
           <!-- Play Button -->
          
           <button id="playButton" class="absolute top-1/2 left-1/2 lg:left-[45px] transform -translate-x-full -translate-y-1/2 z-20 w-16 h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center shadow-lg hover:scale-105 transition-transform group cursor-pointer" aria-label="Play Video">
               <svg class="w-6 h-6 md:w-8 md:h-8 text-[#F9BF29] ml-1 group-hover:text-[#e0ac25] transition-colors" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M8 5v14l11-7z"/>
               </svg>
           </button>

           <!-- Badge -->
           <div class="absolute -bottom-10 -right-4 md:-right-12 z-20 bg-white p-6 md:p-8  border border-[6px] border-gradient-to-b from-[#D4AF37] to-[#2346A7]" style="border-image: linear-gradient(to bottom, #cfc668, #3b5998) 1;">
               <div class="text-center">
                   <span class="block text-4xl md:text-5xl font-bold text-[#2346A7] mb-1">
                        <span data-counter="1" data-node="counter_1_value" data-node-type="number" data-node-label="Counter 1 Value" data-node-default="15" class="font-bold">0</span>
                <span data-node="counter_1_suffix" data-node-type="text" data-node-label="Counter 1 Suffix" data-node-default="+" data-suffix="1" class="font-bold">{{counter_1_suffix}}</span>
                        
                   </span>
                   <span class="block text-[10px] md:text-xs font-bold text-gray-500 uppercase tracking-widest leading-tight">
                        <span data-node="badge_text" data-node-type="text" data-node-label="Badge Text" data-node-default="YEARS OF\nEXPERIENCE" style="white-space: pre-line;">{{badge_text}}</span>
                   </span>
               </div>
           </div>
        </div>
    </div>
  </div>
  </div>
</section>