<footer data-component-type="Footer" class=" " data-component-slug="ss-interior-kitchen-footer">
    <div class="max-w-[98%] mx-auto px-4 sm:px-6 lg:px-8 bg-black text-white pt-16 pb-8  rounded-[30px]">

        <div class="max-w-[90%] mx-auto ">


            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:flex lg:justify-between  mb-16">

                <!-- Brand & Description (Left, spans 4 cols) -->
                <div class="lg:col-span-4 flex flex-col items-start justify-start">
                    <a href="#" class="mb-6 flex items-center gap-2">
                        <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779854/seltrix/templates/ss-interior-kitchen/logo-white.png" src="{{footer_logo}}" alt="Logo" class="h-8 w-auto">
                    </a>
                    <p data-node="footer_description" data-node-type="textarea" data-node-label="Footer Description" data-node-default="Crafting modern kitchens with performance-driven, beautifully designed appliances." class="text-white leading-relaxed mb-8 max-w-sm">
                        {{footer_description}}
                    </p>

                    <div class="flex flex-col gap-4">
                        <span class="text-sm font-semibold text-white uppercase tracking-wider" data-node="footer_follow_us" data-node-type="text" data-node-label="Footer Follow Us" data-node-default="Follow Us">{{footer_follow_us}}</span>
                        <div class="flex gap-4">
                            <!-- Social 1 -->
                            <a data-node="social_1_link" data-node-type="text" href="{{social_1_link}}" data-node-default="#" class="text-white hover:text-gray-300 transition-colors">
                                <img data-node="social_1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779879/seltrix/templates/ss-interior-kitchen/twitter.png" src="{{social_1_icon}}" class="w-5 h-5" alt="Social 1">
                            </a>
                            <!-- Social 2 -->
                            <a data-node="social_2_link" data-node-type="text" href="{{social_2_link}}" data-node-default="#" class="text-white hover:text-gray-300 transition-colors">
                                <img data-node="social_2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779841/seltrix/templates/ss-interior-kitchen/facebook.png" src="{{social_2_icon}}" class="w-5 h-5" alt="Social 2">
                            </a>
                            <!-- Social 3 -->
                            <a data-node="social_3_link" data-node-type="text" href="{{social_3_link}}" data-node-default="#" class="text-white hover:text-gray-300 transition-colors">
                                <img data-node="social_3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779870/seltrix/templates/ss-interior-kitchen/pinterest.png" src="{{social_3_icon}}" class="w-5 h-5" alt="Social 3">
                            </a>
                            <a data-node="social_4_link" data-node-type="text" href="{{social_4_link}}" data-node-default="#" class="text-white hover:text-gray-300 transition-colors">
                                <img data-node="social_4_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779839/seltrix/templates/ss-interior-kitchen/discord.png" src="{{social_4_icon}}" class="w-5 h-5" alt="Social 4">
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Links Columns (Right, spans 8 cols) -->
                <div class="lg:col-span-8 grid grid-cols-1 lg:flex lg:gap-[70px] sm:grid-cols-3 gap-8 lg:gap-12 lg:pl-12 ">

                    <!-- Column 1 -->
                    <div>
                        <h4 data-node="col_1_heading" data-node-type="text" data-node-default="Quick Links" class="text-lg font-bold mb-6">
                            {{col_1_heading}}
                        </h4>
                        <ul class="space-y-4">
                            <li><a data-node="col_1_link_1" data-node-type="text" data-node-label="Link 1" href="{{col_1_link_1}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_1_link_1_text" data-node-type="text" data-node-default="Home">{{col_1_link_1_text}}</span></a></li>
                            <li><a data-node="col_1_link_2" data-node-type="text" data-node-label="Link 2" href="{{col_1_link_2}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_1_link_2_text" data-node-type="text" data-node-default="About">{{col_1_link_2_text}}</span></a></li>
                               <li><a data-node="col_1_link_3" data-node-type="text" data-node-label="Link 3" href="{{col_1_link_3}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_1_link_3_text" data-node-type="text" data-node-default="Products">{{col_1_link_3_text}}</span></a></li>
                            <li><a data-node="col_1_link_4" data-node-type="text" data-node-label="Link 4" href="{{col_1_link_4}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_1_link_4_text" data-node-type="text" data-node-default="Contact">{{col_1_link_4_text}}</span></a></li>
                        </ul>
                    </div>

                    <!-- Column 2 -->
                    <div>
                        <h4 data-node="col_2_heading" data-node-type="text" data-node-default="Explore" class="text-lg font-bold mb-6">
                            {{col_2_heading}}
                        </h4>
                        <ul class="space-y-4">
                            <li><a data-node="col_2_link_1" data-node-type="text" data-node-label="Link 1" data-node-default="#" href="{{col_2_link_1}}" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_2_link_1_text" data-node-type="text" data-node-default="Collections">{{col_2_link_1_text}}</span></a></li>
                            <li><a data-node="col_2_link_2" data-node-type="text" data-node-label="Link 2" href="{{col_2_link_2}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_2_link_2_text" data-node-type="text" data-node-default="New Arrivals">{{col_2_link_2_text}}</span></a></li>
                            <li><a data-node="col_2_link_3" data-node-type="text" data-node-label="Link 3" href="{{col_2_link_3}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_2_link_3_text" data-node-type="text" data-node-default="Best Sellers">{{col_2_link_3_text}}</span></a></li>
                            <li><a data-node="col_2_link_4" data-node-type="text" data-node-label="Link 4" href="{{col_2_link_4}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_2_link_4_text" data-node-type="text" data-node-default="Design Ideas">{{col_2_link_4_text}}</span></a></li>
                        </ul>
                    </div>

                    <!-- Column 3 -->
                    <div>
                        <h4 data-node="col_3_heading" data-node-type="text" data-node-default="Support" class="text-lg font-bold mb-6">
                            {{col_3_heading}}
                        </h4>
                        <ul class="space-y-4">
                            <li><a data-node="col_3_link_1" data-node-type="text" data-node-label="Link 1" href="{{col_3_link_1}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_3_link_1_text" data-node-type="text" data-node-default="Help Center">{{col_3_link_1_text}}</span></a></li>
                            <li><a data-node="col_3_link_2" data-node-type="text" data-node-label="Link 2" href="{{col_3_link_2}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_3_link_2_text" data-node-type="text" data-node-default="Warranty">{{col_3_link_2_text}}</span></a></li>
                            <li><a data-node="col_3_link_3" data-node-type="text" data-node-label="Link 3" href="{{col_3_link_3}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_3_link_3_text" data-node-type="text" data-node-default="Care Guides">{{col_3_link_3_text}}</span></a></li>
                            <li><a data-node="col_3_link_4" data-node-type="text" data-node-label="Link 4" href="{{col_3_link_4}}" data-node-default="#" class="text-white hover:text-gray-400 transition-colors"><span data-node="col_3_link_4_text" data-node-type="text" data-node-default="Service">{{col_3_link_4_text}}</span></a></li>
                        </ul>
                    </div>

                </div>

            </div>

            <!-- Divider -->
            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-center items-center">
                <p data-node="copyright_text" data-node-type="text" class="text-white text-sm" data-node-label="Copyright Text" data-node-default="2025 All Rights Reserved">
                    {{copyright_text}}
                </p>
            </div>
        </div>

    </div>
</footer>