JavaScript Landing Page

// Burger Menu Popup
document.addEventListener('DOMContentLoaded', () => {
    const burgerMenu = document.querySelector('.burger-menu');
    const popup = document.getElementById('popup');
    const closePopupButton = document.querySelector('.close-popup-button');

    // Show popup when burger menu is clicked
    burgerMenu.addEventListener('click', () => {
        popup.style.display = 'flex'; // Show popup
    });

    // Close popup when the "X" button is clicked
    closePopupButton.addEventListener('click', () => {
        popup.style.display = 'none'; // Hide popup
    });

    // Close popup when clicking outside the content area
    popup.addEventListener('click', (event) => {
        if (event.target === popup) {
            popup.style.display = 'none'; // Hide popup
        }
    });
});

// Button Actions
const browseButton = document.querySelector('.browse-button');
browseButton.addEventListener('click', () => {
    window.location.href = 'https://codepen.io/Alyssa-Andrino/full/gbYaPRW';
});

const chatButton = document.querySelector('.chat-button');
const chatbotOverlay = document.getElementById('chatbotOverlay');

// Show chatbot popup when the button is clicked
chatButton.addEventListener('click', () => {
    chatbotOverlay.style.display = 'flex'; // Display the popup
});

// Close chatbot popup when clicking outside the content
chatbotOverlay.addEventListener('click', (e) => {
    if (e.target === chatbotOverlay) {
        chatbotOverlay.style.display = 'none'; // Hide the popup
    }
});

// Carousel Functionality
document.addEventListener('DOMContentLoaded', () => {
    const carousel = document.querySelector('.carousel');

    if (carousel) {
        let isDown = false;
        let startX;
        let scrollLeft;

        // Mouse Events for Carousel Scrolling
        carousel.addEventListener('mousedown', (e) => {
            isDown = true;
            carousel.classList.add('active');
            startX = e.pageX - carousel.offsetLeft;
            scrollLeft = carousel.scrollLeft;
        });

        carousel.addEventListener('mouseleave', () => {
            isDown = false;
            carousel.classList.remove('active');
        });

        carousel.addEventListener('mouseup', () => {
            isDown = false;
            carousel.classList.remove('active');
        });

        carousel.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - carousel.offsetLeft;
            const walk = (x - startX) * 2; // Scroll sensitivity
            carousel.scrollLeft = scrollLeft - walk;
        });

        // Touch Events for Carousel Scrolling (Mobile)
        carousel.addEventListener('touchstart', (e) => {
            isDown = true;
            startX = e.touches[0].pageX - carousel.offsetLeft;
            scrollLeft = carousel.scrollLeft;
        });

        carousel.addEventListener('touchend', () => {
            isDown = false;
        });

        carousel.addEventListener('touchmove', (e) => {
            if (!isDown) return;
            const x = e.touches[0].pageX - carousel.offsetLeft;
            const walk = (x - startX) * 2; // Scroll sensitivity
            carousel.scrollLeft = scrollLeft - walk;
        });
    }
});

// Chatbot Functionality
const chatbotInput = document.getElementById('chatbotInput');
const chatbotMessages = document.getElementById('chatbotMessages');
const sendMessageButton = document.getElementById('sendMessage');

// Replace this with your actual API key
const API_KEY = 'YOUR_API_KEY_HERE'; // Replace this with your API key
const API_ENDPOINT = 'https://api.openai.com/v1/chat/completions'; // OpenAI API endpoint

// Event listener for the send button
sendMessageButton.addEventListener('click', () => {
    const userMessage = chatbotInput.value.trim();

    if (userMessage) {
        // Add user message to the chat
        const userMessageElement = document.createElement('div');
        userMessageElement.classList.add('chatbot-message', 'user-message');
        userMessageElement.textContent = userMessage;
        chatbotMessages.appendChild(userMessageElement);
        chatbotInput.value = ''; // Clear input field

        // Check if API key is valid
        if (API_KEY === 'YOUR_API_KEY_HERE') {
            const errorElement = document.createElement('div');
            errorElement.classList.add('chatbot-message', 'bot-message');
            errorElement.textContent = 'Error: Please replace "YOUR_API_KEY_HERE" in Javascript with your own API key.';
            chatbotMessages.appendChild(errorElement);
            return;
        }

        // Send the user's message to the API
        fetch(API_ENDPOINT, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${API_KEY}`,
            },
            body: JSON.stringify({
                model: 'gpt-3.5-turbo',
                messages: [{ role: 'user', content: userMessage }],
            }),
        })
        .then(response => response.json())
        .then(data => {
            // Add bot response to the chat
            const botMessage = data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content
                ? data.choices[0].message.content
                : 'No response from AI.';
            const botMessageElement = document.createElement('div');
            botMessageElement.classList.add('chatbot-message', 'bot-message');
            botMessageElement.textContent = botMessage;
            chatbotMessages.appendChild(botMessageElement);
        })
        .catch(() => {
            // Show error message
            const errorElement = document.createElement('div');
            errorElement.classList.add('chatbot-message', 'bot-message');
            errorElement.textContent = 'Error: Unable to fetch response.';
            chatbotMessages.appendChild(errorElement);
        });
    }
});

// Form Validation
document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('#contactForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault(); // Prevent form submission

    // Get form values
    const firstName = document.querySelector('#firstName').value.trim();
    const email = document.querySelector('#email').value.trim();
    const message = document.querySelector('#form-message');

    // Clear previous messages
    message.textContent = "";

    // Validate fields
    if (firstName === '' || email === '') {
      message.textContent = "Please fill in all fields.";
      return;
    }

    // Email validation: check for '@' and '.'
    if (!email.includes('@') || !email.includes('.')) {
      message.textContent = "Please enter a valid email address.";
      return;
    }

    // Success Message
    message.textContent = "Thank you for signing up!";
    message.style.color = "#FFFFFF";

    // Reset form
    form.reset();
  });
});