<button id="chatBtn" title="Live Chat Support" aria-label="Live Chat Support">
    <i class="bi bi-chat-dots-fill"></i>
</button>

<div id="chatBox">
    <div class="chat-header">
        <div class="chat-title">
            <img src="./assets/images/ilampirai.webp" alt="Ilampirai">
            <span>ILAMPIRAI CHAT</span>
        </div>
        <button id="closeChat">✕</button>
    </div>

    <div id="messages"></div>
    <div id="options" class="faq"></div>

    <div class="chat-input">
        <input type="text" id="userInput" placeholder="Type your message here…" />
        <button id="sendBtn">➤</button>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {

    const chatBtn = document.getElementById("chatBtn");
    const chatBox = document.getElementById("chatBox");
    const closeChat = document.getElementById("closeChat");
    const messages = document.getElementById("messages");
    const optionsBox = document.getElementById("options");
    const userInput = document.getElementById("userInput");
    const sendBtn = document.getElementById("sendBtn");

    chatBtn.onclick = () => {
        chatBox.style.display = "flex";
        if (messages.innerHTML === "") startChat();
    };

    closeChat.onclick = () => chatBox.style.display = "none";

    function bot(msg) {
        messages.innerHTML += `<div class="msg bot">${msg}</div>`;
        messages.scrollTop = messages.scrollHeight;
    }

    function user(msg) {
        messages.innerHTML += `<div class="msg user">${msg}</div>`;
        messages.scrollTop = messages.scrollHeight;
    }

    // ✅ FIXED OPTIONS FUNCTION (NO SCROLL - JS ONLY)
    function options(arr) {
        optionsBox.innerHTML = "";

        // 🔥 remove scroll dynamically
        optionsBox.style.maxHeight = "none";
        optionsBox.style.overflow = "visible";

        arr.forEach(text => {
            const btn = document.createElement("button");
            btn.innerText = text;
            btn.onclick = () => flow(text);
            optionsBox.appendChild(btn);
        });
    }

    function startChat() {
        bot("👋 <b>Welcome to Ilampirai!</b><br>Do you want to participate in any of the following events?");
        options([
            "Ideas Competition",
            "5K Entrepreneurs Award",
            "Entrepreneurs Phoenix Award",
            "Phoenix Awards 2026"
        ]);
    }

    let currentEvent = "";

    function flow(choice) {
        user(choice);
        optionsBox.innerHTML = "";

        if (choice === "Ideas Competition") {
            currentEvent = "ideas";
            bot("✨ Great choice! What would you like to know?");
            options([
                "About the Competition",
                "Who is Eligible?",
                "Last Date to Register",
                "Register Now"
            ]);
        } 
        else if (choice === "About the Competition") {
            bot("💡 A platform to present innovative ideas creating social, technological, or business impact.");
            options(["Who is Eligible?", "Last Date to Register", "Register Now"]);
        } 
        else if (choice === "Who is Eligible?" && currentEvent === "ideas") {
            bot("✅ Open to all. Anyone with an innovative idea can participate.");
            options(["Last Date to Register", "Register Now"]);
        } 
        else if (choice === "Last Date to Register" && currentEvent === "ideas") {
            bot("🗓️ Last date to register is <b>January 31st</b>.");
            options(["Register Now"]);
        }

        else if (choice === "5K Entrepreneurs Award") {
            currentEvent = "5k";
            bot("🏆 Excellent choice! What would you like to know?");
            options(["About the Award", "Who is Eligible?", "Register Now"]);
        } 
        else if (choice === "About the Award" && currentEvent === "5k") {
            bot("🌟 Recognizes 5K Entrepreneurs for excellence.<br>🗓️ Ceremony: January 26th");
            options(["Who is Eligible?", "Register Now"]);
        } 
        else if (choice === "Who is Eligible?" && currentEvent === "5k") {
            bot("✅ If you are holding a 5K franchise, you are eligible to apply.");
            options(["Register Now"]);
        }

        else if (choice === "Entrepreneurs Phoenix Award") {
            currentEvent = "phoenix";
            bot("🔥 Wonderful choice! What would you like to know?");
            options([
                "About the Award",
                "Who is Eligible?",
                "Last Date to Register",
                "Register Now"
            ]);
        } 
        else if (choice === "About the Award" && currentEvent === "phoenix") {
            bot("🚀 Honors entrepreneurs who show leadership, resilience, and impact.<br>🗓️ Ceremony: February 28th");
            options(["Who is Eligible?", "Last Date to Register", "Register Now"]);
        } 
        else if (choice === "Who is Eligible?" && currentEvent === "phoenix") {
            bot("✅ If you are an entrepreneur or founder, you are eligible.");
            options(["Last Date to Register", "Register Now"]);
        } 
        else if (choice === "Last Date to Register" && currentEvent === "phoenix") {
            bot("🗓️ Last date to register is <b>January 31st</b>.");
            options(["Register Now"]);
        }

        else if (choice === "Phoenix Awards 2026") {
            currentEvent = "phoenix2026";
            bot("🔥 <b>Phoenix Awards 2026</b><br>What would you like to know?");
            options([
                "About the Event",
                "Event Date & Venue",
                "Highlights",
                "Register Now"
            ]);
        } 
        else if (choice === "About the Event" && currentEvent === "phoenix2026") {
            bot("🏆 Honors tomorrow’s game changers in entrepreneurship.");
            options(["Event Date & Venue", "Highlights", "Register Now"]);
        } 
        else if (choice === "Event Date & Venue" && currentEvent === "phoenix2026") {
            bot("📅 <b>May 23 (Saturday)</b><br>📍 Jenneys Residency, Avinashi Rd, Coimbatore");
            options(["Highlights", "Register Now"]);
        } 
        else if (choice === "Highlights" && currentEvent === "phoenix2026") {
            bot("✨ <b>Highlights:</b><br>\
            • Red carpet ceremony<br>\
            • Live music<br>\
            • Fine dining<br>\
            • Celebrity guests<br>\
            • Luxury experience");
            options(["Register Now"]);
        }

        else if (choice === "Register Now") {
            let link = "";

            if (currentEvent === "ideas") {
                link = "https://www.ilampirai.in/college-seminar-&-business-ideas-competition-invitation.php";
            } else if (currentEvent === "5k") {
                link = "https://www.ilampirai.in/Ilampirai/phoenix-awards-franchise.php";
            } else if (currentEvent === "phoenix") {
                link = "https://docs.google.com/forms/d/e/1FAIpQLScvGKvSlIsCaGbCXd0tgupNoZmr6G0wRKGb_iQZaxJv2zBUxQ/viewform";
            } else if (currentEvent === "phoenix2026") {
                link = "https://icloudcs.in/Ilampirai/phoenix-award-2026.php";
            }

            bot(`📝 Register here:<br><a href="${link}" target="_blank">${link}</a>`);
            support();
        }
    }

    function support() {
        bot("❓ Need help?<br>📞 +91 70944 42665<br>📧 info@ilampirai.in");
    }

    sendBtn.onclick = sendTypedMessage;

    userInput.addEventListener("keypress", e => {
        if (e.key === "Enter") sendTypedMessage();
    });

    function sendTypedMessage() {
        const text = userInput.value.trim().toLowerCase();
        if (!text) return;

        user(userInput.value);
        userInput.value = "";

        setTimeout(() => {

            if (text.includes("idea")) flow("Ideas Competition");
            else if (text.includes("5k")) flow("5K Entrepreneurs Award");
            else if (text.includes("2026")) flow("Phoenix Awards 2026");
            else if (text.includes("phoenix")) flow("Entrepreneurs Phoenix Award");
            else if (text.includes("about")) {
                if (currentEvent === "ideas") flow("About the Competition");
                else flow("About the Award");
            }
            else if (text.includes("eligible")) flow("Who is Eligible?");
            else if (text.includes("last date")) flow("Last Date to Register");
            else if (text.includes("register")) flow("Register Now");
            else if (text.includes("help") || text.includes("contact")) support();
            else bot("🤖 I couldn’t understand that");

        }, 300);
    }

});
</script>