<?php
/**
 * Footer Template + Upgraded AI Chatbot
 * No greeting | Training suggestions | Product image cards
 */
require_once 'function.php';

$site_name     = get_site_setting('site_name');
$site_subtitle = get_site_setting('site_subtitle');
$site_logo     = get_site_logo();
$site_phone    = get_site_setting('site_phone');
$site_email    = get_site_setting('site_email');
$site_address  = get_site_setting('site_address');
$site_about    = get_site_setting('site_about');
$training_groups = get_chatbot_training_grouped();
?>

    <footer class="bg-darkBg text-gray-300 pt-16 pb-8 border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">

                <div class="space-y-4">
                    <div class="flex items-center space-x-3 mb-4">
                        <img class="w-16 h-16 rounded-full object-cover border-2 border-white/20 shadow-sm"
                             src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo">
                        <div class="flex flex-col">
                            <span class="text-xl font-black text-white tracking-tight leading-none"><?php echo htmlspecialchars($site_name); ?></span>
                            <?php if (!empty($site_subtitle)): ?>
                            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-1"><?php echo htmlspecialchars($site_subtitle); ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <p class="text-sm text-gray-400 leading-relaxed"><?php echo htmlspecialchars($site_about); ?></p>
                    <div class="flex space-x-4 pt-2">
                        <a href="#" class="hover:text-secondary text-lg transition-colors"><i class="fa-brands fa-facebook"></i></a>
                        <a href="#" class="hover:text-secondary text-lg transition-colors"><i class="fa-brands fa-linkedin"></i></a>
                        <a href="#" class="hover:text-secondary text-lg transition-colors"><i class="fa-brands fa-yelp"></i></a>
                        <a href="#" class="hover:text-secondary text-lg transition-colors"><i class="fa-brands fa-google"></i></a>
                    </div>
                </div>

                <div>
                    <h4 class="text-white text-base font-bold uppercase tracking-wider mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.php" class="hover:text-white hover:underline transition-colors">About Us</a></li>
                        <li><a href="mission.php" class="hover:text-white hover:underline transition-colors">Mission</a></li>
                        <li><a href="vision.php" class="hover:text-white hover:underline transition-colors">Vision</a></li>
                        <li><a href="projects.php" class="hover:text-white hover:underline transition-colors">Projects</a></li>
                        <li><a href="services.php" class="hover:text-white hover:underline transition-colors">Our Services</a></li>
                        <li><a href="products.php" class="hover:text-white hover:underline transition-colors">Products</a></li>
                        <li><a href="reviews.php" class="hover:text-white hover:underline transition-colors">Client Reviews</a></li>
                        <li><a href="contact.php" class="hover:text-white hover:underline transition-colors">Contact Us</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-white text-base font-bold uppercase tracking-wider mb-4">Solutions</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="products.php?cat=1" class="hover:text-white hover:underline transition-colors">Passenger Elevator</a></li>
                        <li><a href="products.php?cat=5" class="hover:text-white hover:underline transition-colors">Diesel Generator</a></li>
                        <li><a href="products.php?cat=6" class="hover:text-white hover:underline transition-colors">Power Transformer</a></li>
                        <li><a href="products.php?cat=7" class="hover:text-white hover:underline transition-colors">Solar System</a></li>
                        <li><a href="faqs.php" class="hover:text-white hover:underline transition-colors">FAQs</a></li>
                    </ul>
                </div>

                <div class="space-y-3">
                    <h4 class="text-white text-base font-bold uppercase tracking-wider mb-4">Contact</h4>
                    <p class="text-sm flex items-start">
                        <i class="fa-solid fa-location-dot mt-1 mr-3 text-secondary"></i>
                        <span><?php echo htmlspecialchars($site_address); ?></span>
                    </p>
                    <p class="text-sm flex items-center">
                        <i class="fa-solid fa-phone mr-3 text-secondary"></i>
                        <a href="tel:<?php echo htmlspecialchars($site_phone); ?>" class="hover:text-white"><?php echo htmlspecialchars($site_phone); ?></a>
                    </p>
                    <p class="text-sm flex items-center">
                        <i class="fa-solid fa-envelope mr-3 text-secondary"></i>
                        <a href="mailto:<?php echo htmlspecialchars($site_email); ?>" class="hover:text-white"><?php echo htmlspecialchars($site_email); ?></a>
                    </p>
                </div>
            </div>

            <!-- ===== Developer Credit: Only visible on Mobile (Sits above horizontal rule) ===== -->
            <div class="flex md:hidden justify-center mb-8">
                <a href="https://wa.me/8801806021433" target="_blank" rel="noopener noreferrer" 
                   class="premium-badge group relative inline-flex items-center gap-2 px-5 py-2.5 rounded-full overflow-hidden">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                    </span>
                    <span class="text-[10px] font-bold text-gray-400 tracking-wider uppercase">Design & Developed By</span>
                    <span class="premium-badge-text font-black text-xs tracking-wider">CodeBari</span>
                    <i class="fa-brands fa-whatsapp text-sm text-green-500 group-hover:scale-125 group-hover:rotate-12 transition-all duration-300"></i>
                </a>
            </div>

            <!-- ===== Copyright and Policy Section ===== -->
            <div class="pt-8 border-t border-gray-800 text-center text-xs text-gray-500 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="order-2 md:order-1">&copy; <?php echo date('Y'); ?> <?php echo htmlspecialchars($site_name); ?>. All rights reserved.</p>
                
                <!-- ===== Developer Credit: Only visible on Desktop (Perfectly centered between Copyright & Policies) ===== -->
                <div class="hidden md:flex justify-center order-1 md:order-2">
                    <a href="https://wa.me/8801806021433" target="_blank" rel="noopener noreferrer" 
                       class="premium-badge group relative inline-flex items-center gap-2 px-5 py-2.5 rounded-full overflow-hidden">
                        <span class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                        </span>
                        <span class="text-[10px] font-bold text-gray-400 tracking-wider uppercase">Design & Developed By</span>
                        <span class="premium-badge-text font-black text-xs tracking-wider">CodeBari</span>
                        <i class="fa-brands fa-whatsapp text-sm text-green-500 group-hover:scale-125 group-hover:rotate-12 transition-all duration-300"></i>
                    </a>
                </div>

                <div class="flex space-x-6 order-3">
                    <a href="privacy-policy.php" class="hover:text-gray-300">Privacy Policy</a>
                    <a href="#" class="hover:text-gray-300">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- ===== AI CHATBOT ===== -->
    <button id="chatbot-toggle" aria-label="Open chat"
        class="fixed bottom-6 right-6 bg-primary hover:bg-secondary text-white w-14 h-14 rounded-full shadow-2xl flex items-center justify-center transition-all z-50 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
        <i class="fa-solid fa-comments text-2xl" id="chat-icon"></i>
    </button>

    <div id="chatbot-box" class="fixed bottom-24 right-6 w-[400px] max-w-[92vw] bg-white rounded-2xl shadow-2xl flex-col hidden z-50 overflow-hidden border border-gray-100" style="height:min(560px,80vh);">

        <!-- Header -->
        <div class="bg-primary text-white p-4 flex justify-between items-center flex-shrink-0">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                    <i class="fa-solid fa-robot"></i>
                </div>
                <div>
                    <h5 class="font-bold text-sm"><?php echo htmlspecialchars($site_name); ?> Assistant</h5>
                    <p class="text-xs text-green-300 flex items-center">
                        <span class="w-2 h-2 bg-green-400 rounded-full mr-1.5 animate-pulse"></span>Online
                    </p>
                </div>
            </div>
            <button id="close-chat" class="text-white/80 hover:text-white transition-colors" aria-label="Close chat">
                <i class="fa-solid fa-xmark text-lg"></i>
            </button>
        </div>

        <!-- Messages — কোনো গ্রিটিং নেই, খালি শুরু -->
        <div id="chat-messages" class="flex-1 p-4 overflow-y-auto space-y-3 bg-gray-50 text-sm min-h-0">
            <p class="text-center text-xs text-gray-400 py-2">প্রশ্ন লিখুন বা নিচের সাজেশন থেকে বেছে নিন</p>
        </div>

        <!-- Training Suggestions — গ্রুপ অনুযায়ী স্ক্রলযোগ্য -->
        <?php if (!empty($training_groups)): ?>
        <div class="border-t border-gray-100 bg-white flex-shrink-0" style="max-height:130px;">
            <div class="overflow-x-auto overflow-y-auto px-3 py-2 space-y-2" style="max-height:130px;">
                <?php foreach ($training_groups as $group_title => $items): ?>
                <div>
                    <p class="text-[10px] font-bold uppercase text-gray-400 tracking-wider mb-1 px-1"><?php echo htmlspecialchars($group_title); ?></p>
                    <div class="flex gap-1.5 overflow-x-auto pb-1 scrollbar-thin">
                        <?php foreach ($items as $item): ?>
                        <button type="button"
                            class="suggestion-btn flex-shrink-0 text-[11px] font-semibold bg-blue-50 hover:bg-primary hover:text-white text-primary border border-blue-100 px-3 py-1.5 rounded-full transition-all whitespace-nowrap"
                            data-id="<?php echo (int)$item['id']; ?>"
                            data-question="<?php echo htmlspecialchars($item['question']); ?>">
                            <?php echo htmlspecialchars($item['question']); ?>
                        </button>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Input -->
        <form id="chat-form" class="p-3 border-t border-gray-100 bg-white flex items-center gap-2 flex-shrink-0">
            <input type="text" id="chat-input" placeholder="আপনার প্রশ্ন লিখুন..." required autocomplete="off"
                class="flex-1 bg-gray-100 border-none rounded-full px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white text-gray-700">
            <button type="submit" class="bg-primary hover:bg-secondary text-white w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 transition-all">
                <i class="fa-solid fa-paper-plane text-sm"></i>
            </button>
        </form>
    </div>

    <style>
        .chat-product-card { display:inline-flex!important; align-items:center; gap:8px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:10px; padding:8px; margin:4px 0; text-decoration:none; color:#1e3a8a; transition:all .2s; }
        .chat-product-card:hover { background:#e0f2fe; transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,58,138,.15); }
        .chat-product-card img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
        .chat-product-card span { font-size:13px; font-weight:700; }
        #chatbot-box.open { display:flex; }

        /* ===== Highly Premium CodeBari Badge Styling ===== */
        .premium-badge {
            background: linear-gradient(135deg, #090d16 0%, #030712 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .premium-badge::before {
            content: '';
            position: absolute;
            top: 0; 
            left: -100%;
            width: 50%; 
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
            transform: skewX(-25deg);
            transition: none;
        }
        .premium-badge:hover {
            border-color: rgba(34, 197, 94, 0.35);
            box-shadow: 0 0 25px rgba(34, 197, 94, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }
        .premium-badge:hover::before {
            left: 150%;
            transition: all 0.9s ease-in-out;
        }
        .premium-badge-text {
            background: linear-gradient(90deg, #ffffff 0%, #4ade80 50%, #22c55e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% auto;
            transition: background-position 0.5s ease;
        }
        .premium-badge:hover .premium-badge-text {
            background-position: right center;
        }
    </style>

    <script>
        const chatbotToggle = document.getElementById('chatbot-toggle');
        const chatbotBox    = document.getElementById('chatbot-box');
        const closeChat     = document.getElementById('close-chat');
        const chatForm      = document.getElementById('chat-form');
        const chatInput     = document.getElementById('chat-input');
        const chatMessages  = document.getElementById('chat-messages');
        const chatIcon      = document.getElementById('chat-icon');

        function openChat() {
            chatbotBox.classList.remove('hidden');
            chatbotBox.classList.add('open');
            chatIcon.className = 'fa-solid fa-chevron-down text-xl';
            chatInput.focus();
        }
        function closeChatbox() {
            chatbotBox.classList.add('hidden');
            chatbotBox.classList.remove('open');
            chatIcon.className = 'fa-solid fa-comments text-2xl';
        }

        chatbotToggle.addEventListener('click', () => {
            chatbotBox.classList.contains('hidden') ? openChat() : closeChatbox();
        });
        closeChat.addEventListener('click', closeChatbox);

        function appendUserMessage(text) {
            const w = document.createElement('div');
            w.className = 'flex justify-end';
            w.innerHTML = `<div class="bg-primary text-white p-3 rounded-2xl rounded-tr-none shadow-sm max-w-[80%] text-sm leading-relaxed">${escapeHtml(text)}</div>`;
            chatMessages.appendChild(w);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function appendBotMessage(text, isHtml = false) {
            const w = document.createElement('div');
            w.className = 'flex items-start gap-2';
            const content = isHtml ? text : escapeHtml(text).replace(/\n/g, '<br>');
            w.innerHTML = `
                <div class="w-7 h-7 bg-gray-200 text-primary rounded-full flex items-center justify-center flex-shrink-0 text-xs">
                    <i class="fa-solid fa-robot"></i>
                </div>
                <div class="bg-white text-gray-800 p-3 rounded-2xl rounded-tl-none shadow-sm max-w-[85%] border border-gray-100 text-sm leading-relaxed bot-msg">${content}</div>`;
            chatMessages.appendChild(w);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function showLoader() {
            const id = 'loader_' + Date.now();
            const w = document.createElement('div');
            w.id = id; w.className = 'flex items-start gap-2';
            w.innerHTML = `<div class="w-7 h-7 bg-gray-200 text-primary rounded-full flex items-center justify-center text-xs"><i class="fa-solid fa-robot"></i></div>
                <div class="bg-white p-3 rounded-2xl border border-gray-100 flex gap-1">
                    <span class="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce"></span>
                    <span class="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style="animation-delay:.15s"></span>
                    <span class="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style="animation-delay:.3s"></span>
                </div>`;
            chatMessages.appendChild(w);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            return id;
        }

        async function sendToBot(body) {
            const loaderId = showLoader();
            try {
                const res = await fetch('chat-ajax.php', { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body });
                const data = await res.json();
                document.getElementById(loaderId)?.remove();
                if (data?.response) appendBotMessage(data.response, data.html === true);
                else appendBotMessage('সংযোগে সমস্যা হচ্ছে। আবার চেষ্টা করুন।');
            } catch(e) {
                document.getElementById(loaderId)?.remove();
                appendBotMessage('নেটওয়ার্ক ত্রুটি। আবার চেষ্টা করুন।');
            }
        }

        chatForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = chatInput.value.trim();
            if (!msg) return;
            appendUserMessage(msg);
            chatInput.value = '';
            await sendToBot('message=' + encodeURIComponent(msg));
        });

        document.querySelectorAll('.suggestion-btn').forEach(btn => {
            btn.addEventListener('click', async () => {
                const question = btn.dataset.question;
                const id       = btn.dataset.id;
                appendUserMessage(question);
                await sendToBot('training_id=' + encodeURIComponent(id));
            });
        });

        function escapeHtml(text) {
            const d = document.createElement('div');
            d.textContent = text;
            return d.innerHTML;
        }
    </script>
</body>
</html>