<footer class="bg-[#F9FAFB] text-[#1A1A1A] font-sans pt-16 pb-8 text-sm" data-component-type="Content" data-component-slug="home-appliances-template-footer">
    <div class="max-w-[90%] mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
        
        <!-- Column 1: Logo & Info -->
        <div class="flex flex-col gap-6">
            <!-- Logo -->
             <img data-node="logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046180/seltrix/templates/home-appliances-template/Logo2.png" src="{{logo}}" class="w-40 h-auto" alt="Logo">
            
            <!-- Address -->
            <p class="text-gray-500 leading-relaxed max-w-xs">
                 <span data-node="address" data-node-type="textarea" data-node-label="Address" data-node-default="Jln. Cempaka Wangi No 22\nJakarta - Indonesia" style="white-space: pre-line;">{{address}}</span>
            </p>

            <!-- Contact -->
            <div class="flex flex-col gap-3">
                 <div class="flex items-center gap-3 text-gray-500">
                    <img data-node="email_icon" data-node-type="file" data-node-label="Email Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046143/seltrix/templates/home-appliances-template/email.png" src="{{email_icon}}" alt="Email" class="w-5 h-5 text-[#2346A7]">
                    <a href="mailto:{{email}}" class="hover:text-[#2346A7] transition-colors">
                        <span data-node="email" data-node-type="text" data-node-label="Email Address" data-node-default="support@yourdomain.tld">{{email}}</span>
                    </a>
                 </div>
                 <div class="flex items-center gap-3 text-gray-500">
                    <img data-node="phone_icon" data-node-type="file" data-node-label="Phone Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046205/seltrix/templates/home-appliances-template/phone.png" src="{{phone_icon}}" alt="Phone" class="w-5 h-5 text-[#2346A7]">
                    <a href="tel:{{phone}}" class="hover:text-[#2346A7] transition-colors">
                        <span data-node="phone" data-node-type="text" data-node-label="Phone Number" data-node-default="(+6221) 2002-2012">{{phone}}</span>
                    </a>
                 </div>
            </div>
        </div>

        <!-- Column 2: Popular Categories -->
        <div>
            <h4 class="font-bold text-[#1A1A1A] mb-6 text-sm">
                 <span data-node="col2_title" data-node-type="text" data-node-label="Column 2 Title" data-node-default="Popular Categories">{{col2_title}}</span>
            </h4>
            <ul class="flex flex-col gap-4 text-gray-500">
                <li><a data-node="link_2_1_link" data-node-type="text" data-node-label="Link 2-1 link" data-node-default="#" href="{{link_2_1_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_2_1" data-node-type="text" data-node-label="Link 2-1" data-node-default="Bathroom Products">{{link_2_1}}</span></a></li>
                <li><a data-node="link_2_2_link" data-node-type="text" data-node-label="Link 2-2 link" data-node-default="#" href="{{link_2_2_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_2_2" data-node-type="text" data-node-label="Link 2-2" data-node-default="Kitchen Products">{{link_2_2}}</span></a></li>
                <li><a data-node="link_2_3_link" data-node-type="text" data-node-label="Link 2-3 link" data-node-default="#" href="{{link_2_3_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_2_3" data-node-type="text" data-node-label="Link 2-3" data-node-default="Plumbing Fixtures">{{link_2_3}}</span></a></li>
                <li><a data-node="link_2_4_link" data-node-type="text" data-node-label="Link 2-4 link" data-node-default="#" href="{{link_2_4_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_2_4" data-node-type="text" data-node-label="Link 2-4" data-node-default="Lighting">{{link_2_4}}</span></a></li>
                <li><a data-node="link_2_5_link" data-node-type="text" data-node-label="Link 2-5 link" data-node-default="#" href="{{link_2_5_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_2_5" data-node-type="text" data-node-label="Link 2-5" data-node-default="Flooring and Tiles">{{link_2_5}}</span></a></li>
                <li><a data-node="link_2_6_link" data-node-type="text" data-node-label="Link 2-6 link" data-node-default="#" href="{{link_2_6_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_2_6" data-node-type="text" data-node-label="Link 2-6" data-node-default="Water Filtration and Purification">{{link_2_6}}</span></a></li>
            </ul>
        </div>

        <!-- Column 3: Support -->
        <div>
             <h4 class="font-bold text-[#1A1A1A] mb-6 text-sm">
                 <span data-node="col3_title" data-node-type="text" data-node-label="Column 3 Title" data-node-default="Support">{{col3_title}}</span>
            </h4>
             <ul class="flex flex-col gap-4 text-gray-500">
                <li><a data-node="link_3_1_link" data-node-type="text" data-node-label="Link 3-1 link" data-node-default="#" href="{{link_3_1_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_3_1" data-node-type="text" data-node-label="Link 3-1" data-node-default="Help Center">{{link_3_1}}</span></a></li>
                <li><a data-node="link_3_2_link" data-node-type="text" data-node-label="Link 3-2 link" data-node-default="#" href="{{link_3_2_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_3_2" data-node-type="text" data-node-label="Link 3-2" data-node-default="Ticket Support">{{link_3_2}}</span></a></li>
                <li><a data-node="link_3_3_link" data-node-type="text" data-node-label="Link 3-3 link" data-node-default="#" href="{{link_3_3_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_3_3" data-node-type="text" data-node-label="Link 3-3" data-node-default="My Account">{{link_3_3}}</span></a></li>
                <li><a data-node="link_3_4_link" data-node-type="text" data-node-label="Link 3-4 link" data-node-default="#" href="{{link_3_4_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_3_4" data-node-type="text" data-node-label="Link 3-4" data-node-default="Return Product">{{link_3_4}}</span></a></li>
                <li><a data-node="link_3_5_link" data-node-type="text" data-node-label="Link 3-5 link" data-node-default="#" href="{{link_3_5_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_3_5" data-node-type="text" data-node-label="Link 3-5" data-node-default="Contact us">{{link_3_5}}</span></a></li>
            </ul>
        </div>

        <!-- Column 4: Company -->
        <div>
             <h4 class="font-bold text-[#1A1A1A] mb-6 text-sm">
                 <span data-node="col4_title" data-node-type="text" data-node-label="Column 4 Title" data-node-default="Company">{{col4_title}}</span>
            </h4>
             <ul class="flex flex-col gap-4 text-gray-500">
                <li><a data-node="link_4_1_link" data-node-type="text" data-node-label="Link 4-1 link" data-node-default="#" href="{{link_4_1_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_4_1" data-node-type="text" data-node-label="Link 4-1" data-node-default="About us">{{link_4_1}}</span></a></li>
                <li><a data-node="link_4_2_link" data-node-type="text" data-node-label="Link 4-2 link" data-node-default="#" href="{{link_4_2_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_4_2" data-node-type="text" data-node-label="Link 4-2" data-node-default="Leadership">{{link_4_2}}</span></a></li>
                <li><a data-node="link_4_3_link" data-node-type="text" data-node-label="Link 4-3 link" data-node-default="#" href="{{link_4_3_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_4_3" data-node-type="text" data-node-label="Link 4-3" data-node-default="Careers">{{link_4_3}}</span></a></li>
                <li><a data-node="link_4_4_link" data-node-type="text" data-node-label="Link 4-4 link" data-node-default="#" href="{{link_4_4_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_4_4" data-node-type="text" data-node-label="Link 4-4" data-node-default="Article & News">{{link_4_4}}</span></a></li>
                <li><a data-node="link_4_5_link" data-node-type="text" data-node-label="Link 4-5 link" data-node-default="#" href="{{link_4_5_link}}" class="hover:text-[#2346A7] transition-colors"><span data-node="link_4_5" data-node-type="text" data-node-label="Link 4-5" data-node-default="Legal Notices">{{link_4_5}}</span></a></li>
            </ul>
        </div>
    </div>

    <!-- Bottom Bar -->
    <div class="border-t border-gray-200 max-w-[90%] mx-auto pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
        <p class="text-gray-400 text-xs">
             <span data-node="copyright" data-node-type="text" data-node-label="Copyright Text" data-node-default="Copyrights © 2025">{{copyright}}</span>
        </p>
        <div class="flex gap-2">
            <!-- Payment Icons (Mockups) -->
           
             <div class="w-[60px] h-[40px] bg-white flex items-center justify-center">
                  <img data-node="payment_icons1" data-node-type="file" data-node-label="Payment Icons1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046204/seltrix/templates/home-appliances-template/paypal.png" src="{{payment_icons1}}" class="h-full w-[80%] h-[80%]" alt="Payment Methods">


             </div>
               <div class="w-[60px] h-[40px] bg-white flex items-center justify-center">
                  <img data-node="payment_icons2" data-node-type="file" data-node-label="Payment Icons2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046226/seltrix/templates/home-appliances-template/visa.png" src="{{payment_icons2}}" class="h-full w-[80%] h-[80%]" alt="Payment Methods">

             </div>
               <div class="w-[60px] h-[40px] bg-white flex items-center justify-center">
                  <img data-node="payment_icons3" data-node-type="file" data-node-label="Payment Icons3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046146/seltrix/templates/home-appliances-template/google-pay.png" src="{{payment_icons3}}" class="h-full w-[80%] h-[80%]" alt="Payment Methods">

             </div>
               <div class="w-[60px] h-[40px] bg-white flex items-center justify-center">
                  <img data-node="payment_icons4" data-node-type="file" data-node-label="Payment Icons4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046226/seltrix/templates/home-appliances-template/visa.png" src="{{payment_icons4}}" class="h-full w-[80%] h-[80%]" alt="Payment Methods">
           
        </div>


          <div class="w-[60px] h-[40px] bg-white flex items-center justify-center">
                  <img data-node="payment_icons5" data-node-type="file" data-node-label="Payment Icons5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046204/seltrix/templates/home-appliances-template/paypal.png" src="{{payment_icons5}}" class="h-full w-[80%] h-[80%]" alt="Payment Methods">

             </div>
    </div>
</div></footer>