<?php
// ===================================================
// প্রজেক্ট: কর্জে হাসানা ফাউন্ডেশন পোর্টাল
// ফাইল: footer.php (ফুটার ব্রান্ডিং, জুম আউট ফিক্স ও বাটন স্ট্যাকিং)
// ===================================================

require_once 'config.php';

// ডাটাবেস থেকে হোয়াটসঅ্যাপ নম্বর লোড করা
$wa_number = '8801830518691'; // আপনার হটলাইন নম্বর ডিফোল্ট হিসেবে
try {
    $stmt_wa = $pdo->prepare("SELECT `setting_value` FROM `" . table('site_settings') . "` WHERE `setting_key` = 'whatsapp_number' LIMIT 1");
    $stmt_wa->execute();
    $res_wa = $stmt_wa->fetchColumn();
    if ($res_wa) {
        $wa_number = preg_replace('/[^0-9]/', '', $res_wa);
    }
} catch (Exception $e) {
    // ইগনোর
}

$current_lang = $_SESSION['lang'] ?? 'bn';
?>

    <!-- Footer Styles & Responsive Viewport Protections (Inline CSS) -->
    <style>
        /* 📱 মোবাইলে জুম আউট হওয়া রোধ করার জন্য গ্লোবাল প্রোটেকশন */
        html, body {
            max-width: 100% !important;
            overflow-x: hidden !important;
            box-sizing: border-box;
        }

        .site-footer {
            background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
            color: #94a3b8;
            padding-top: 70px;
            padding-bottom: 30px;
            margin-top: 80px;
            border-top: 1px solid #1e293b;
            position: relative;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.5fr;
            gap: 40px;
            margin-bottom: 50px;
        }

        .footer-brand p {
            font-size: 14.5px;
            line-height: 1.7;
            color: #cbd5e1;
        }

        .footer-title {
            color: #ffffff;
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 8px;
        }

        .footer-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 35px;
            height: 3px;
            background: #059669;
            border-radius: 2px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #94a3b8;
            text-decoration: none;
            font-size: 14.5px;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .footer-links a:hover {
            color: #10b981;
            transform: translateX(5px);
        }

        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .footer-contact-item i {
            color: #10b981;
            margin-top: 4px;
        }

        .footer-bottom {
            border-top: 1px solid #1e293b;
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }

        /* 🟢 Floating WhatsApp Button (ডান পাশে নিচে) */
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px; /* ডান পাশে স্থাপন */
            width: 60px;
            height: 60px;
            background-color: #25d366;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            font-size: 32px;
            box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: pulse-wa 2s infinite;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            color: #fff;
            box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
        }

        @keyframes pulse-wa {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }

        /* 🤖 Floating Gemini AI Chatbot (ডান পাশে হোয়াটসঅ্যাপের ঠিক ওপরে) */
        .ai-chat-toggle {
            position: fixed;
            bottom: 105px; /* হোয়াটসঅ্যাপ থেকে ৭৫ পিক্সেল ওপরে স্ট্যাক করা হয়েছে */
            right: 30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #059669 0%, #3b82f6 100%);
            color: #ffffff;
            border: none;
            border-radius: 50%; /* রাউন্ড লোগো বাটন ডিজাইন */
            font-size: 26px; /* লোগো আইকন বড় দেখানোর জন্য */
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(5, 150, 105, 0.4);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ai-chat-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 30px rgba(5, 150, 105, 0.6);
        }

        /* চ্যাটবক্স উইন্ডোর পজিশন বাটন দুটির ওপরে চমৎকার স্থানে */
        .chat-box-container {
            position: fixed;
            bottom: 180px; /* বাটনগুলোর ঠিক ওপরে ফ্লুইড হবে */
            right: 30px;
            width: 380px;
            max-width: calc(100vw - 60px);
            height: 500px;
            max-height: calc(100vh - 210px);
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
            z-index: 1000;
            display: none;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            animation: slideUp 0.3s ease forwards;
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .chat-header {
            background: linear-gradient(135deg, #059669 0%, #0f172a 100%);
            color: #ffffff;
            padding: 18px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-header h4 {
            font-size: 16px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }

        .chat-close-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: #ffffff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .chat-close-btn:hover {
            background: rgba(255,255,255,0.4);
        }

        .chat-body {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #f8fafc;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .chat-msg {
            max-width: 85%;
            padding: 10px 14px;
            border-radius: 14px;
            font-size: 14px;
            line-height: 1.5;
            word-wrap: break-word;
        }

        .chat-msg.bot {
            background: #ffffff;
            color: #1e293b;
            align-self: flex-start;
            border: 1px solid #e2e8f0;
            border-bottom-left-radius: 2px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        }

        .chat-msg.user {
            background: #059669;
            color: #ffffff;
            align-self: flex-end;
            border-bottom-right-radius: 2px;
        }

        .chat-footer {
            padding: 12px;
            background: #ffffff;
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 8px;
        }

        .chat-input {
            flex: 1;
            border: 1px solid #cbd5e1;
            padding: 10px 14px;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
        }

        .chat-input:focus {
            border-color: #059669;
        }

        .chat-send-btn {
            background: #059669;
            color: #fff;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .chat-send-btn:hover {
            background: #047857;
        }

        .quick-prompts {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 5px;
        }

        .prompt-chip {
            background: #e2e8f0;
            color: #334155;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 12px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .prompt-chip:hover {
            background: #059669;
            color: #fff;
        }

        @media (max-width: 991px) {
            .footer-grid {
                grid-template-columns: 1fr; /* মোবাইলে ভেঙে পর পর থাকবে */
                gap: 30px;
            }
            .chat-box-container {
                bottom: 180px;
                right: 20px;
                width: calc(100vw - 40px);
            }
            .whatsapp-float {
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 26px;
            }
            .ai-chat-toggle {
                bottom: 85px; /* মোবাইলে গ্যাপ সামঞ্জস্যপূর্ণ */
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 22px;
            }
        }
    </style>

    <!-- Footer Main Markup -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                
                <!-- Column 1: Round Logo & Brand Name perfectly matching Header -->
                <div class="footer-brand">
                    <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
                        <div style="width: 58px; height: 58px; border-radius: 50%; border: 3px solid #10b981; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff;">
                            <img src="https://araihazargeneralhospital.com/software/logo.png" style="width: 100%; height: 100%; object-fit: cover;" alt="Logo">
                        </div>
                        <div>
                            <h3 style="color: #ffffff; font-size: 21px; font-weight: 800; line-height: 1.1; margin: 0;"><?php echo $current_lang === 'bn' ? 'কর্জে হাসানা ফাউন্ডেশন' : 'Qard-e-Hasana Foundation'; ?></h3>
                            <span style="color: #ef4444; font-size: 13px; font-weight: 700; display: block; margin-top: 3px; letter-spacing: 0.5px;"><?php echo $current_lang === 'bn' ? 'ঝুনঝুনিয়া ওয়ার্ড বিএনপি' : 'Jhunjhuniya Ward BNP'; ?></span>
                        </div>
                    </div>
                    <p>
                        <?php echo $current_lang === 'bn' ? 'আমরা একটি অরাজনৈতিক ও সামাজিক সেবা সংস্থা। সম্পূর্ণ সুদমুক্ত অর্থ সহায়তা, ক্ষুদ্র উদ্যোক্তা উন্নয়ন এবং দুস্থ মানুষের সেবায় আমাদের পথচলা।' : 'We are a non-political social welfare organization. Our journey is dedicated to interest-free financial aid and supporting the underprivileged.'; ?>
                    </p>
                </div>

                <!-- Column 2: Quick Links -->
                <div>
                    <h4 class="footer-title"><?php echo $current_lang === 'bn' ? 'দ্রুত লিঙ্ক' : 'Quick Links'; ?></h4>
                    <ul class="footer-links">
                        <li><a href="<?php echo SITE_URL; ?>index.php"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'হোম পেজ' : 'Home'; ?></a></li>
                        <li><a href="<?php echo SITE_URL; ?>apply.php"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'সুদমুক্ত আবেদন' : 'Apply for Aid'; ?></a></li>
                        <li><a href="<?php echo SITE_URL; ?>track.php"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'আবেদন ট্র্যাকিং' : 'Track Status'; ?></a></li>
                        <li><a href="<?php echo SITE_URL; ?>news.php"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'সংবাদ ও কার্যক্রম' : 'Activities'; ?></a></li>
                    </ul>
                </div>

                <!-- Column 3: Legal & Support -->
                <div>
                    <h4 class="footer-title"><?php echo $current_lang === 'bn' ? 'সহায়তা ও শর্তাবলী' : 'Support & Terms'; ?></h4>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'আবেদনের নিয়মাবলী' : 'Rules'; ?></a></li>
                        <li><a href="#"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'জামিনদার নির্দেশিকা' : 'Guarantor Guide'; ?></a></li>
                        <li><a href="#"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'গোপনীয়তা নীতি' : 'Privacy Policy'; ?></a></li>
                        <li><a href="#"><i class="fa-solid fa-chevron-right"></i> <?php echo $current_lang === 'bn' ? 'যোগাযোগের ঠিকানা' : 'Contact'; ?></a></li>
                    </ul>
                </div>

                <!-- Column 4: Contact Info -->
                <div>
                    <h4 class="footer-title"><?php echo $current_lang === 'bn' ? 'যোগাযোগ করুন' : 'Contact Us'; ?></h4>
                    <div class="footer-contact-item">
                        <i class="fa-solid fa-location-dot"></i>
                        <span><?php echo $current_lang === 'bn' ? 'ঝুনঝুনিয়া, টাঙ্গাইল, ঢাকা।' : 'Jhunjhuniya, Araihazar, Narayanganj, Dhaka.'; ?></span>
                    </div>
                    <div class="footer-contact-item">
                        <i class="fa-solid fa-phone"></i>
                        <span>+৮৮০ ১৮৩০-৫১৮৬৯১</span>
                    </div>
                    <div class="footer-contact-item">
                        <i class="fa-solid fa-envelope"></i>
                        <span>info@araihazargeneralhospital.com</span>
                    </div>
                </div>
            </div>

            <!-- Copyright Line -->
            <div class="footer-bottom">
                <div>
                    &copy; <?php echo date('Y'); ?> <?php echo $current_lang === 'bn' ? 'কর্জে হাসানা ফাউন্ডেশন। সর্বস্বত্ব সংরক্ষিত।' : 'Qard-e-Hasana Foundation. All Rights Reserved.'; ?>
                </div>
                <div>
                    <?php echo $current_lang === 'bn' ? 'ঝুনঝুনিয়া ওয়ার্ড বিএনপি-র একটি কল্যাণমুখী উদ্যোগ।' : 'Initiated by Jhunjhuniya Ward BNP.'; ?>
                </div>
            </div>
        </div>
    </footer>

    <!-- 🟢 Floating WhatsApp Direct Click Button (ডান পাশে নিচে) -->
    <a href="https://wa.me/<?php echo $wa_number; ?>?text=আসসালামু%20আলাইকুম,%20আমি%20সুদমুক্ত%20সহায়তা%20সম্পর্কে%20জানতে%20চাই।" target="_blank" class="whatsapp-float" title="WhatsApp এ কথা বলুন">
        <i class="fa-brands fa-whatsapp"></i>
    </a>

    <!-- 🤖 Floating Gemini AI Chatbot (ডান পাশে হোয়াটসঅ্যাপের ঠিক ওপরে) -->
    <button class="ai-chat-toggle" onclick="toggleChatbot()" title="AI চ্যাট সহকারী">
        <i class="fa-solid fa-robot"></i>
    </button>

    <div class="chat-box-container" id="chatbotBox">
        <div class="chat-header">
            <h4><i class="fa-solid fa-brain"></i> ঝুনঝুনিয়া এআই সহায়ক </h4>
            <button class="chat-close-btn" onclick="toggleChatbot()"><i class="fa-solid fa-xmark"></i></button>
        </div>
        
        <div class="chat-body" id="chatBody">
            <div class="chat-msg bot">
                আসসালামু আলাইকুম! আমি কর্জে হাসানা ফাউন্ডেশনের AI সহকারী। আপনাকে কীভাবে সাহায্য করতে পারি?
            </div>

            <div class="quick-prompts">
                <button class="prompt-chip" onclick="sendQuickPrompt('কীভাবে সুদমুক্ত ঋণ পাব?')">সুদমুক্ত ঋণ পাওয়ার উপায়?</button>
                <button class="prompt-chip" onclick="sendQuickPrompt('আবেদনে জামিনদার কেন লাগবে?')">জামিনদার কেন লাগে?</button>
                <button class="prompt-chip" onclick="sendQuickPrompt('টাকা কিসে পাব?')">বিকাশ/নগদে টাকা পাব?</button>
            </div>
        </div>

        <div class="chat-footer">
            <input type="text" id="chatInput" class="chat-input" placeholder="আপনার প্রশ্ন লিখুন..." onkeypress="handleChatEnter(event)">
            <button class="chat-send-btn" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
        </div>
    </div>

    <!-- Dynamic Chatbot Script (AJAX & UI alignment) -->
    <script>
        function toggleChatbot() {
            const chatBox = document.getElementById('chatbotBox');
            if (chatBox.style.display === 'none' || chatBox.style.display === '') {
                chatBox.style.display = 'flex';
            } else {
                chatBox.style.display = 'none';
            }
        }

        function handleChatEnter(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        }

        function sendQuickPrompt(text) {
            document.getElementById('chatInput').value = text;
            sendMessage();
        }

        function sendMessage() {
            const inputField = document.getElementById('chatInput');
            const userText = inputField.value.trim();
            if (!userText) return;

            const chatBody = document.getElementById('chatBody');

            const userMsgDiv = document.createElement('div');
            userMsgDiv.className = 'chat-msg user';
            userMsgDiv.innerText = userText;
            chatBody.appendChild(userMsgDiv);

            inputField.value = '';
            chatBody.scrollTop = chatBody.scrollHeight;

            const botMsgDiv = document.createElement('div');
            botMsgDiv.className = 'chat-msg bot';
            botMsgDiv.innerText = 'চিন্তা করছি...';
            chatBody.appendChild(botMsgDiv);
            chatBody.scrollTop = chatBody.scrollHeight;

            fetch('<?php echo SITE_URL; ?>chatbot_api.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'prompt=' + encodeURIComponent(userText)
            })
            .then(response => response.json())
            .then(data => {
                if(data.status === 'success') {
                    botMsgDiv.innerText = data.reply;
                } else {
                    botMsgDiv.innerText = "দুঃখিত, বর্তমানে এআই সার্ভারে কিছুটা সমস্যা হচ্ছে। অনুগ্রহ করে একটু পর চেষ্টা করুন।";
                }
                chatBody.scrollTop = chatBody.scrollHeight;
            })
            .catch(error => {
                botMsgDiv.innerText = "সুদমুক্ত কর্জে হাসানা ঋণের আবেদন, জামিনদার নিয়ম ও বিস্তারিত তথ্যের জন্য আমাদের মূল পেজে ফর্ম পূরণ করুন অথবা সরাসরি হটলাইনে যোগাযোগ করুন।";
                chatBody.scrollTop = chatBody.scrollHeight;
            });
        }
    </script>

</body>
</html>