<footer data-component-type="Footer" class="bg-white py-16 border-t border-gray-200" data-component-slug="ss-technology-template-footer">
    <div class="max-w-[90%] mx-auto">

        <!-- Top Section: Work with us -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-200 pb-10 mb-10">
            <h2 class="text-[40px] md:text-[50px] font-bold text-[#003D33]" data-node="footer_work_title" data-node-type="text" data-node-default="Work with us">
                {{footer_work_title}}
            </h2>
            <a href="mailto:{{footer_email_text}}" class="text-[30px] md:text-[40px] font-medium text-[#003D33] underline decoration-2 hover:text-[#085C44]" data-node="footer_email_text" data-node-type="text" data-node-default="Work@brand.com">
                {{footer_email_text}}
            </a>
        </div>

        <!-- Middle Section: Links & Newsletter -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">

            <!-- Column 1: Quick Links -->
            <div class="flex flex-col space-y-4">
                <h3 class="text-[#003D33] font-bold text-lg mb-2" data-node="col1_title" data-node-type="text" data-node-default="Quick Links">
                    {{col1_title}}
                </h3>
                <a href="{{link_1_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_1_url" data-node-type="text" data-node-default="#"> <span data-node="link_1_text" data-node-type="text" data-node-default="Home">
                        {{link_1_text}}
                    </span></a>
                <a href="{{link_2_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_2_url" data-node-type="text" data-node-default="#"> <span data-node="link_2_text" data-node-type="text" data-node-default="Products">
                        {{link_2_text}}
                    </span></a>
                <a href="{{link_3_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_3_url" data-node-type="text" data-node-default="#"> <span data-node="link_3_text" data-node-type="text" data-node-default="Sales & Services">
                        {{link_3_text}}
                    </span></a>
                <a href="{{link_4_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_4_url" data-node-type="text" data-node-default="#"> <span data-node="link_4_text" data-node-type="text" data-node-default="About Us">
                        {{link_4_text}}
                    </span></a>
            </div>

            <!-- Column 2: Banking & Payments -->
            <div class="flex flex-col space-y-4">
                <h3 class="text-[#003D33] font-bold text-lg mb-2" data-node="col2_title" data-node-type="text" data-node-default="Banking & Payments">
                    {{col2_title}}
                </h3>
                <a href="{{link_5_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_5_url" data-node-type="text" data-node-default="#"> <span data-node="link_5_text" data-node-type="text" data-node-default="Digital Wallet">
                        {{link_5_text}}
                    </span></a>
                <a href="{{link_6_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_6_url" data-node-type="text" data-node-default="#"> <span data-node="link_6_text" data-node-type="text" data-node-default="Smart Payments">
                        {{link_6_text}}
                    </span></a>
                <a href="{{link_7_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_7_url" data-node-type="text" data-node-default="#"> <span data-node="link_7_text" data-node-type="text" data-node-default="Business Accounts">
                        {{link_7_text}}
                    </span></a>
                <a href="{{link_8_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_8_url" data-node-type="text" data-node-default="#"> <span data-node="link_8_text" data-node-type="text" data-node-default="Expense Insights">
                        {{link_8_text}}
                    </span></a>
                <a href="{{link_9_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_9_url" data-node-type="text" data-node-default="#"> <span data-node="link_9_text" data-node-type="text" data-node-default="API Integrations">
                        {{link_9_text}}
                    </span></a>
            </div>

            <!-- Column 3: Legal & Compliance -->
            <div class="flex flex-col space-y-4">
                <h3 class="text-[#003D33] font-bold text-lg mb-2" data-node="col3_title" data-node-type="text" data-node-default="Legal & Compliance">
                    {{col3_title}}
                </h3>
                <a href="{{link_10_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_10_url" data-node-type="text" data-node-default="#"> <span data-node="link_10_text" data-node-type="text" data-node-default="Privacy Policy">
                        {{link_10_text}}
                    </span></a>
                <a href="{{link_11_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_11_url" data-node-type="text" data-node-default="#"> <span data-node="link_11_text" data-node-type="text" data-node-default="Terms of Service">
                        {{link_11_text}}
                    </span></a>
                <a href="{{link_12_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_12_url" data-node-type="text" data-node-default="#"> <span data-node="link_12_text" data-node-type="text" data-node-default="Regulatory Compliance">
                        {{link_12_text}}
                    </span></a>
                <a href="{{link_13_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_13_url" data-node-type="text" data-node-default="#"> <span data-node="link_13_text" data-node-type="text" data-node-default="Risk Disclosure">
                        {{link_13_text}}
                    </span></a>
                <a href="{{link_14_url}}" class="text-gray-500 hover:text-[#003D33] transition-colors" data-node="link_14_url" data-node-type="text" data-node-default="#"> <span data-node="link_14_text" data-node-type="text" data-node-default="Cookie Preferences">
                        {{link_14_text}}
                    </span></a>
            </div>

            <!-- Column 4: Newsletter -->
            <div class="flex flex-col space-y-4">
                <h3 class="text-[#4E4E4E] text-lg mb-2" data-node="newsletter_title" data-node-type="text" data-node-default="Subscribe to our newsletter">
                    {{newsletter_title}}
                </h3>
                <form data-notify-form class="flex flex-col sm:flex-row w-full max-w-xl ">
                    <input type="email" name="email" required data-node="email_placeholder" data-node-type="text" data-node-label="Email Placeholder" data-node-default="Enter your email" placeholder="{{email_placeholder}}" class="w-full flex-1 px-5 py-4
           border border-gray-300
            sm:rounded-r-none
           focus:outline-none focus:border-[#003D33]">

                    <button type="submit" data-form-submit class="w-full sm:w-auto px-8 py-4
           bg-[#003D33] text-white font-semibold
            sm:rounded-l-none
           hover:bg-[#002a23]
           transition-all whitespace-nowrap">

               <span data-node="notify_button_text" data-node-type="text" data-node-label="Notify Button Text" data-node-default="Notify Me">
                        {{notify_button_text}}
                    </span>
                    </button>
                </form>


                <!-- Status Message -->
                <div id="notify-status" class="hidden mt-4 py-2 px-4 rounded-lg text-sm"></div>
            </div>



        </div>

        <!-- Bottom Section: Logo & Copyright -->
        <div class="flex flex-col md:flex-row justify-between items-center border-t border-gray-100 pt-10">
            <div class="mb-4 md:mb-0">
                <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768051172/seltrix/templates/ss-technology-template/Logo.png" src="{{footer_logo}}" alt="Logo" class="h-8 md:h-10 w-auto">
            </div>
            <p class="text-[#003D33] font-medium" data-node="copyright_text" data-node-type="text" data-node-default="All rights are reserved 2025">
                {{copyright_text}}
            </p>
        </div>

    </div>
</footer>