<?php
// Set the base URL for the website
$baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . '';
?>
<!-- Footer Component -->
</div> <!-- Close content wrapper from header -->

<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            <!-- Company Info -->
            <div class="mb-8 md:mb-0">
                <a href="<?php echo $baseUrl; ?>" class="flex items-center mb-6">
                    <span class="text-2xl font-bold text-red-500">Finggu</span>
                    <span class="text-2xl font-bold text-white">Infotech</span>
                </a>
                <p class="text-gray-400 mb-6">Transforming ideas into digital reality with cutting-edge web solutions and innovative design.</p>
                <div class="flex space-x-4">
                    <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300" aria-label="Facebook">
                        <i class="fab fa-facebook-f text-xl w-8 h-8 flex items-center justify-center rounded-full border border-gray-600 hover:border-red-500 hover:bg-red-500"></i>
                    </a>
                    <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300" aria-label="Twitter">
                        <i class="fab fa-twitter text-xl w-8 h-8 flex items-center justify-center rounded-full border border-gray-600 hover:border-red-500 hover:bg-red-500"></i>
                    </a>
                    <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300" aria-label="Instagram">
                        <i class="fab fa-instagram text-xl w-8 h-8 flex items-center justify-center rounded-full border border-gray-600 hover:border-red-500 hover:bg-red-500"></i>
                    </a>
                    <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300" aria-label="LinkedIn">
                        <i class="fab fa-linkedin-in text-xl w-8 h-8 flex items-center justify-center rounded-full border border-gray-600 hover:border-red-500 hover:bg-red-500"></i>
                    </a>
                </div>
            </div>

            <!-- Quick Links -->
            <div>
                <h3 class="text-xl font-bold mb-6 text-white">Quick Links</h3>
                <ul class="space-y-3">
                    <li><a href="<?php echo $baseUrl; ?>/about.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">About Us</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/services.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Our Services</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/portfolio.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Portfolio</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/testimonials.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Testimonials</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/blog.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Blog</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/contact.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Contact Us</a></li>
                </ul>
            </div>

            <!-- Services -->
            <div>
                <h3 class="text-xl font-bold mb-6 text-white">Our Services</h3>
                <ul class="space-y-3">
                    <li><a href="<?php echo $baseUrl; ?>/services/web-design.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Web Design</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/services/web-development.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Web Development</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/services/ecommerce.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">E-commerce Solutions</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/services/seo.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">SEO Services</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/services/mobile-apps.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Mobile App Development</a></li>
                    <li><a href="<?php echo $baseUrl; ?>/services/digital-marketing.php" class="text-gray-400 hover:text-red-500 transition-colors duration-300">Digital Marketing</a></li>
                </ul>
            </div>

            <!-- Contact Info -->
            <div>
                <h3 class="text-xl font-bold mb-6 text-white">Contact Us</h3>
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <i class="fas fa-map-marker-alt text-red-500 mt-1 mr-3"></i>
                        <span class="text-gray-400">A-402, Channur Bhavan CHS., Ghanshyam Near Station, Dombivali West, Mumbai, Maharashtra 421202</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-phone-alt text-red-500 mr-3"></i>
                        <a href="tel:+918655442429" class="text-gray-400 hover:text-white transition-colors">+91 86554 42429</a>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-envelope text-red-500 mr-3"></i>
                        <a href="mailto:info@fingguinfotech.com" class="text-gray-400 hover:text-white transition-colors">info@fingguinfotech.com</a>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-clock text-red-500 mr-3"></i>
                        <span class="text-gray-400">24/7 Available</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Newsletter -->
        <div class="border-t border-gray-800 pt-12 pb-8">
            <div class="max-w-3xl mx-auto text-center">
                <h3 class="text-2xl md:text-3xl font-bold mb-4 text-white">Subscribe to Our Newsletter</h3>
                <p class="text-gray-400 mb-6 max-w-2xl mx-auto">Stay updated with our latest news, offers, and industry insights. No spam, we promise.</p>
                <form class="flex flex-col sm:flex-row gap-3 max-w-xl mx-auto px-4">
                    <div class="flex-1">
                        <input type="email" placeholder="Your email address" class="w-full px-5 py-3 rounded-md bg-gray-800 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors" required>
                    </div>
                    <button type="submit" class="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-medium px-6 py-3 rounded-md transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg">
                        <span class="flex items-center justify-center">
                            <span>Subscribe</span>
                            <i class="fas fa-paper-plane ml-2"></i>
                        </span>
                    </button>
                </form>
                <p class="text-xs text-gray-500 mt-3">We respect your privacy. Unsubscribe at any time.</p>
            </div>
        </div>

        <!-- Copyright -->
        <div class="border-t border-gray-800 pt-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm text-center md:text-left mb-4 md:mb-0">&copy; <span id="current-year">2024</span> Finggu Infotech. All rights reserved.</p>
                    <div class="flex space-x-6">
                        <a href="<?php echo $baseUrl; ?>/privacy-policy.php" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Privacy Policy</a>
                        <a href="<?php echo $baseUrl; ?>/terms-of-service.php" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Terms of Service</a>
                        <a href="<?php echo $baseUrl; ?>/sitemap.php" class="text-gray-500 hover:text-white text-sm transition-colors duration-300">Sitemap</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>



<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<!-- Font Awesome JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>

<!-- Main JavaScript -->
<script src="<?php echo $baseUrl; ?>/assets/js/main.js"></script>

<!-- Initialize GSAP animations -->
<script>
    if (typeof gsap !== 'undefined') {
        gsap.registerPlugin(ScrollTrigger);
        
        // Animate elements when they come into view
        gsap.utils.toArray('.animate-on-scroll').forEach((element) => {
            gsap.from(element, {
                scrollTrigger: {
                    trigger: element,
                    start: 'top 80%',
                    toggleActions: 'play none none none',
                    once: true
                },
                opacity: 0,
                y: 20,
                duration: 0.6,
                ease: 'power2.out'
            });
        });
    }
</script>

<!-- Update copyright year -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const yearElement = document.getElementById('current-year');
        if (yearElement) {
            yearElement.textContent = new Date().getFullYear();
        }
    });
</script>
</body>
</html>
<!-- End of Footer Component -->
