<section data-component-type="Content" class="w-full relative pb-16 lg:pb-24" data-component-slug="home-appliances-browse-all">
  
  <!-- Top CTA Button (Centered) -->
  <div class="flex justify-center py-8 lg:py-12 bg-white">
    {{#if top_cta_link}}
    <a data-node="top_cta_link" data-node-type="text" data-node-label="Top CTA Link" href="{{top_cta_link}}" data-node-default="#" class="bg-[#FFDE16] text-[#2346A7] font-bold px-8 py-3 rounded-md uppercase tracking-wide hover:bg-[#ffe54d] transition-colors">
      <span data-node="top_cta_text" data-node-type="text" data-node-label="Top CTA Text" data-node-default="BROWSE ALL APPLIANCES">{{top_cta_text}}</span>
    </a>
    {{/if}}
  </div>

  <!-- Hero Background Section -->
  <div class="relative w-full h-[600px] lg:h-[500px] bg-gray-900">
    <!-- Background Image -->
     <img data-node="hero_bg" data-node-type="file" data-node-label="Hero Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046169/seltrix/templates/home-appliances-template/journey-bg.jpg" src="{{hero_bg}}" alt="Journey Background" class="absolute inset-0 w-full h-full object-cover opacity-60">

       <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-black/20 to-transparent"></div>
    
    <!-- Content Overlay -->
    <div class="relative z-10 w-[90%] mx-auto h-full flex flex-col justify-center items-center text-center pt-10 pb-32">
       <span data-node="badge_text" data-node-type="text" data-node-label="Badge Text" data-node-default="Our History" class="bg-[#2346A7] text-white px-4 py-1 rounded-full text-sm font-semibold mb-6">{{badge_text}}</span>

      <h2 data-node="hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="A Journey Built on Trust, Innovation & Service" class="text-3xl lg:text-5xl font-bold text-white mb-6 drop-shadow-md">{{hero_title}}</h2>

      <p data-node="hero_desc" data-node-type="textarea" data-node-label="Hero Description" data-node-default="From humble beginnings to a trusted name, every milestone reflects a commitment\nto quality and customer satisfaction." class="text-gray-100 max-w-2xl text-lg leading-relaxed whitespace-pre-line drop-shadow-sm">{{hero_desc}}</p>
    </div>
  </div>

  <!-- Overlapping Cards Section -->
  <!-- Negative margin to pull it up over the hero image -->
  <div class="relative z-20 w-[90%] mx-auto -mt-24">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      
      <!-- Card 1: Where It All Started -->
      <div class="bg-white p-8 rounded-sm shadow-lg text-center h-full flex flex-col items-center group hover:-translate-y-2 transition-transform duration-300">
        <div class="mb-6 flex justify-center">
             <div class="w-16 h-16 bg-[#FFDE16] rounded-sm flex items-center justify-center text-[#2346A7]">
              <!-- Paper Plane Icon -->
               <img data-node="card_1_icon" data-node-type="file" data-node-label="Card 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046160/seltrix/templates/home-appliances-template/icon-start.png" src="{{card_1_icon}}" alt="Icon" class="w-8 h-8 object-contain">
             </div>
        </div>
        <h3 data-node="card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Where It All Started" class="text-xl font-bold text-[#1E293B] mb-4">{{card_1_title}}</h3>
        <p data-node="card_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="A small start with a big vision to bring dependable home solutions to every household." class="text-gray-500 text-sm leading-relaxed">{{card_1_desc}}</p>
      </div>

       <!-- Card 2: Building Our Expertise -->
      <div class="bg-white p-8 rounded-sm shadow-lg text-center h-full flex flex-col items-center group hover:-translate-y-2 transition-transform duration-300">
        <div class="mb-6 flex justify-center">
             <div class="w-16 h-16 bg-[#FFDE16] rounded-sm flex items-center justify-center text-[#2346A7]">
              <!-- People Icon -->
                <img data-node="card_2_icon" data-node-type="file" data-node-label="Card 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046162/seltrix/templates/home-appliances-template/icon-team.png" src="{{card_2_icon}}" alt="Icon" class="w-8 h-8 object-contain">
             </div>
        </div>
        <h3 data-node="card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Building Our Expertise" class="text-xl font-bold text-[#1E293B] mb-4">{{card_2_title}}</h3>
        <p data-node="card_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Dedicated professionals joined the mission, bringing skill, passion, and customer-first service." class="text-gray-500 text-sm leading-relaxed">{{card_2_desc}}</p>
      </div>

       <!-- Card 3: Broadening Our Reach -->
      <div class="bg-white p-8 rounded-sm shadow-lg text-center h-full flex flex-col items-center group hover:-translate-y-2 transition-transform duration-300">
        <div class="mb-6 flex justify-center">
             <div class="w-16 h-16 bg-[#FFDE16] rounded-sm flex items-center justify-center text-[#2346A7]">
              <!-- Layers Icon -->
               <img data-node="card_3_icon" data-node-type="file" data-node-label="Card 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046157/seltrix/templates/home-appliances-template/icon-layers.png" src="{{card_3_icon}}" alt="Icon" class="w-8 h-8 object-contain">
             </div>
        </div>
        <h3 data-node="card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Broadening Our Reach" class="text-xl font-bold text-[#1E293B] mb-4">{{card_3_title}}</h3>
        <p data-node="card_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="New product lines and improved service offerings shaped a complete home appliance experience." class="text-gray-500 text-sm leading-relaxed">{{card_3_desc}}</p>
      </div>

       <!-- Card 4: Awards for Excellence -->
      <div class="bg-white p-8 rounded-sm shadow-lg text-center h-full flex flex-col items-center group hover:-translate-y-2 transition-transform duration-300">
        <div class="mb-6 flex justify-center">
             <div class="w-16 h-16 bg-[#FFDE16] rounded-sm flex items-center justify-center text-[#2346A7]">
              <!-- Badge Icon -->
                <img data-node="card_4_icon" data-node-type="file" data-node-label="Card 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046155/seltrix/templates/home-appliances-template/icon-award.png" src="{{card_4_icon}}" alt="Icon" class="w-8 h-8 object-contain">
             </div>
        </div>
        <h3 data-node="card_4_title" data-node-type="text" data-node-label="Card 4 Title" data-node-default="Awards for Excellence" class="text-xl font-bold text-[#1E293B] mb-4">{{card_4_title}}</h3>
        <p data-node="card_4_desc" data-node-type="textarea" data-node-label="Card 4 Description" data-node-default="Industry honors celebrating commitment to quality, innovation, and customer satisfaction." class="text-gray-500 text-sm leading-relaxed">{{card_4_desc}}</p>
      </div>

    </div>
  </div>

</section>