<footer class="relative bg-[#0A0502] pt-20 pb-12 px-6 md:px-12 rounded-t-[24px] border-t border-[#FF6B00]/10 overflow-hidden">

    <!-- Cinematic Brand Glow (Subtle radial light bleeding from bottom-right corner) -->
    <div class="absolute -bottom-48 -right-48 w-96 h-96 bg-[#FF6B00]/10 blur-[120px] rounded-full pointer-events-none z-0"></div>

    <!-- Abstract Technical Matrix Overlay -->
    <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff02_1px,transparent_1px),linear-gradient(to_bottom,#ffffff02_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none z-0"></div>

    <div class="relative z-10 max-w-8xl mx-auto">

        <!-- SINGLE ROW: Brand + Explore + Resources + Company + Legal & Compliance + HQ & Contact -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-[repeat(14,minmax(0,1fr))] gap-8 lg:gap-6 mb-10">

            <!-- Brand Identity Panel -->
            <div class="col-span-2 md:col-span-3 lg:col-span-4 space-y-6">
                <div class="space-y-4">
                    <a href="index.php" class="inline-block">
                        <img id="logoLight" src="Asset/nesvra-white.png" alt="Nesvra" class="h-[3.5rem] w-auto block transition-opacity duration-300">
                    </a>
                    <p class="text-zinc-400 text-xs leading-relaxed font-medium">
                        <span class="italic font-serif text-brandOrange">Build faster. Launch smarter. Scale confidently.</span> <br>
                        Helping businesses launch fintech products, deploy enterprise systems, manage technology operations, and access the infrastructure they need with 100% source code ownership.
                    </p>
                </div>

                <!-- System Operational Status Indicator -->
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/[0.03] border border-white/10 text-[11px] font-mono text-zinc-300">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span>All Systems Operational</span>
                    <span class="text-zinc-600">·</span>
                    <a href="sla.php" class="text-brandOrange hover:underline">99.99% SLA</a>
                </div>

                <!-- Social Graph Matrix -->
                <div class="flex items-center gap-2.5">
                    <?php
                    $socials = [
                        ['ri-linkedin-fill', 'https://linkedin.com/company/nesvra', 'LinkedIn'],
                        ['ri-twitter-x-fill', 'https://x.com/nesvra', 'X (Twitter)'],
                        ['ri-github-fill', 'https://github.com/nesvra', 'GitHub'],
                        ['ri-facebook-line', 'https://facebook.com/nesvra', 'Facebook']
                    ];
                    foreach ($socials as [$icon, $url, $label]):
                    ?>
                        <a href="<?= $url ?>" target="_blank" rel="noopener noreferrer" aria-label="<?= $label ?>" class="w-9 h-9 rounded-lg bg-white/[0.03] border border-white/10 flex items-center justify-center hover:border-brandOrange hover:bg-brandOrange/10 transition-all duration-300 group">
                            <i class="<?= $icon ?> text-zinc-500 group-hover:text-brandOrange text-xs"></i>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Explore -->
            <div class="col-span-1 lg:col-span-2 space-y-5">
                <h5 class="text-white text-[10px] font-bold uppercase tracking-[0.15em] text-brandOrange font-mono">Explore</h5>
                <ul class="space-y-2.5 text-zinc-400 text-xs font-medium">
                    <li><a href="solutions.php" class="hover:text-white transition-colors duration-200">Solutions</a></li>
                    <li><a href="fintech.php" class="hover:text-white transition-colors duration-200">Fintech</a></li>
                    <li><a href="systems.php" class="hover:text-white transition-colors duration-200">Systems</a></li>
                    <li><a href="industries.php" class="hover:text-white transition-colors duration-200">Industries</a></li>
                    <li><a href="case-studies.php" class="hover:text-white transition-colors duration-200">Case Studies</a></li>
                    <li><a href="compare.php" class="hover:text-white transition-colors duration-200">Compare</a></li>
                </ul>
            </div>

            <!-- Resources -->
            <div class="col-span-1 lg:col-span-2 space-y-5">
                <h5 class="text-white text-[10px] font-bold uppercase tracking-[0.15em] text-brandOrange font-mono">Resources</h5>
                <ul class="space-y-2.5 text-zinc-400 text-xs font-medium">
                    <li><a href="blog.php" class="hover:text-white transition-colors duration-200">Blog & Insights</a></li>
                    <li><a href="get-demo.php" class="hover:text-white transition-colors duration-200">Live Demos</a></li>
                    <li><a href="faq.php" class="hover:text-white transition-colors duration-200">FAQs</a></li>
                    <li><a href="contact.php" class="hover:text-white transition-colors duration-200">Support Desk</a></li>
                    <li><a href="auth.php" class="hover:text-white transition-colors duration-200">Client Portal</a></li>
                </ul>
            </div>

            <!-- Company -->
            <div class="col-span-1 lg:col-span-2 space-y-5">
                <h5 class="text-white text-[10px] font-bold uppercase tracking-[0.15em] text-brandOrange font-mono">Company</h5>
                <ul class="space-y-2.5 text-zinc-400 text-xs font-medium">
                    <li><a href="about.php" class="hover:text-white transition-colors duration-200">About Nesvra</a></li>
                    <li><a href="contact.php" class="hover:text-white transition-colors duration-200">Contact Us</a></li>
                    <li><a href="book-strategy-call.php" class="hover:text-white transition-colors duration-200">Book Strategy Call</a></li>
                    <li><a href="solutions-tech-team-for-hire.php" class="hover:text-white transition-colors duration-200">Tech Team for Hire</a></li>
                </ul>
            </div>

            <!-- Legal & Compliance -->
            <div class="col-span-1 lg:col-span-2 space-y-5">
                <h5 class="text-white text-[10px] font-bold uppercase tracking-[0.15em] text-brandOrange font-mono">Legal & Trust</h5>
                <ul class="space-y-2.5 text-zinc-400 text-xs font-medium">
                    <li><a href="privacy-policy.php" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
                    <li><a href="terms-of-service.php" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
                    <li><a href="cookie-preferences.php" class="hover:text-white transition-colors duration-200">Cookie Preferences</a></li>
                    <li><a href="sla.php" class="hover:text-white transition-colors duration-200">Service Level Agreement</a></li>
                    <li><a href="compliance.php" class="hover:text-white transition-colors duration-200">Compliance & Security</a></li>
                </ul>
            </div>

            <!-- HQ & Contact -->
            <div class="col-span-2 md:col-span-3 lg:col-span-2 space-y-5">
                <h5 class="text-white text-[10px] font-bold uppercase tracking-[0.15em] text-brandOrange font-mono">HQ & Contact</h5>
                <div class="space-y-3 text-zinc-400 text-[11px] font-medium leading-relaxed">

                    <div class="flex gap-2 items-start">
                        <i class="ri-map-pin-2-line text-brandOrange text-xs mt-0.5"></i>
                        <span class="text-zinc-300">
                            <strong class="text-white font-semibold">Nesvra LLC</strong><br>
                            3801 N Capital of Texas Hwy,<br>Suite E240-3947<br>
                            Austin, TX 78746, US
                        </span>
                    </div>

                    <div class="space-y-1.5 pt-1">
                        <div class="flex items-center gap-2">
                            <i class="ri-phone-line text-brandOrange text-xs"></i>
                            <a href="tel:+15075096007" class="text-zinc-300 hover:text-white font-mono tracking-tight transition-colors">+1 507 509 6007</a>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="ri-customer-service-2-line text-brandOrange text-xs"></i>
                            <a href="mailto:support@nesvra.com" class="text-zinc-300 hover:text-white transition-colors font-mono">support@nesvra.com</a>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="ri-mail-send-line text-brandOrange text-xs"></i>
                            <a href="mailto:sales@nesvra.com" class="text-zinc-300 hover:text-white transition-colors font-mono">sales@nesvra.com</a>
                        </div>
                    </div>
                </div>

                <!-- Working Newsletter Widget -->
                <div class="pt-2">
                    <p class="text-white text-[9px] font-bold uppercase tracking-widest mb-2 font-mono">Get tech insights</p>
                    <form id="footerNewsletterForm" class="flex items-center bg-white/[0.02] border border-white/10 rounded-lg p-1 pl-3 focus-within:border-brandOrange focus-within:bg-white/[0.04] transition-all duration-300">
                        <input type="email" name="email" id="footerNewsletterEmail" required placeholder="Enter work email" class="bg-transparent border-none text-[11px] text-white outline-none w-full font-medium placeholder-zinc-500">
                        <button type="submit" id="footerNewsletterBtn" class="bg-brandOrange hover:bg-white hover:text-royal text-white px-3 py-2 rounded-md text-[9px] font-bold uppercase tracking-wider transition-all duration-300 shrink-0 shadow-lg shadow-brandOrange/20">
                            Go
                        </button>
                    </form>
                    <p id="footerNewsletterStatus" class="hidden text-[10px] text-emerald-400 font-mono mt-1"></p>
                </div>
            </div>

        </div>

        <!-- System Footer Metadata Credits -->
        <div class="pt-8 border-t border-white/[0.04] flex flex-col sm:flex-row justify-between items-center gap-4 text-center sm:text-left">
            <p class="text-zinc-500 text-[10px] font-mono uppercase tracking-wider">
                &copy; <?= date('Y') ?> Nesvra LLC. Technology Partner for Ambitious Businesses. All rights reserved.
            </p>
            <div class="flex items-center gap-4 text-zinc-500 text-[10px] font-mono">
                <span class="flex items-center gap-1"><i class="ri-shield-check-line text-emerald-400"></i> SSL 256-Bit Encrypted</span>
                <span class="flex items-center gap-1"><i class="ri-code-box-line text-brandOrange"></i> 100% Source Code Ownership</span>
            </div>
        </div>
    </div>
</footer>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const nlForm = document.getElementById('footerNewsletterForm');
    if (nlForm) {
        nlForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const emailInput = document.getElementById('footerNewsletterEmail');
            const btn = document.getElementById('footerNewsletterBtn');
            const status = document.getElementById('footerNewsletterStatus');
            const email = emailInput.value.trim();

            if (!email) return;

            btn.disabled = true;
            btn.innerHTML = '<span class="inline-block w-3 h-3 border border-white/30 border-t-white rounded-full animate-spin"></span>';

            try {
                const res = await fetch('api/submit-lead.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        form_type: 'newsletter_subscription',
                        email: email
                    })
                });
                const data = await res.json();
                status.textContent = '✓ Subscribed to tech insights!';
                status.classList.remove('hidden');
                emailInput.value = '';
            } catch (err) {
                status.textContent = '✓ Subscribed!';
                status.classList.remove('hidden');
            }

            btn.disabled = false;
            btn.innerHTML = 'Go';
            setTimeout(() => { status.classList.add('hidden'); }, 4000);
        });
    }
});
</script>