contact.js

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Basic form validation
    let fullname = document.getElementById('fullname').value;
    let email = document.getElementById('email').value;
    let phone = document.getElementById('phone').value;
    let message = document.getElementById('message').value;

    // Error elements
    let nameError = document.getElementById('nameError');
    let emailError = document.getElementById('emailError');
    let phoneError = document.getElementById('phoneError');
    let messageError = document.getElementById('messageError');

    // Clear previous error messages
    nameError.textContent = '';
    emailError.textContent = '';
    phoneError.textContent = '';
    messageError.textContent = '';

    let hasError = false;

    // Validate name (must be more than 1 character and contain letters only)
    if (fullname.length < 2 || !/^[a-zA-Z\s]+$/.test(fullname)) {
        nameError.textContent = 'Name must be at least 2 characters long and contain only letters.';
        nameError.style.display = 'block';
        hasError = true;
    }

    // Validate email format

    if (!isValidEmail(email)) {
        emailError.textContent = 'Please enter a valid email address.';
        emailError.style.display = 'block';
        hasError = true;
    }

    if (!isValidPhone(phone)) {
        phoneError.textContent = 'Please enter a valid phone number (e.g., +1234567890).';
        phoneError.style.display = 'block';
        hasError = true;
    }
     // Validate message (must be more than 1 character)
     if (message.length < 2) {
        messageError.textContent = 'Message must be at least 2 characters long.';
        messageError.style.display = 'block';
        hasError = true;
    }

    // If there are no errors, proceed with form submission
    if (!hasError) {

    // If validation passes, you can submit the form data to your server here
    console.log('Form submitted:', { fullname, email, phone, message });
    alert('Thank you for your message. We will get back to you soon!');
    this.reset();
    }
});

function isValidEmail(email) {
    // Regular expression for stricter email validation
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    // Check for the basic format
    if (!emailRegex.test(email)) {
        return false;
    }

    // Split the email into local part and domain part
    const [localPart, domainPart] = email.split('@');

    // Ensure local part and domain part exist and aren't too long
    if (localPart.length > 64 || domainPart.length > 255) {
        return false;
    }

    // Ensure domain part has a valid format
    const domainParts = domainPart.split('.');
    if (domainParts.some(part => part.length > 63)) {
        return false;
    }

    // Additional checks for edge cases
    if (localPart.startsWith('.') || localPart.endsWith('.') || localPart.includes('..')) {
        return false;
    }

    return true;
}


function isValidPhone(phone) {
    return /^\+?[1-9]\d{1,14}$/.test(phone); // e.g., +1234567890
}

document.addEventListener('DOMContentLoaded', function() {
    const modeToggle = document.getElementById('modeToggle');
    const sunIcon = document.querySelector('.sun-icon');
    const moonIcon = document.querySelector('.moon-icon');

    // Check if the user has a saved mode preference
    const currentMode = localStorage.getItem('mode');
    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        moonIcon.style.display = 'block';
        sunIcon.style.display = 'none';
    }

    // Toggle the mode when the button is clicked
    modeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');
        if (document.body.classList.contains('dark-mode')) {
            moonIcon.style.display = 'block';
            sunIcon.style.display = 'none';
            localStorage.setItem('mode', 'dark'); // Save the user's preference
        } else {
            moonIcon.style.display = 'none';
            sunIcon.style.display = 'block';
            localStorage.setItem('mode', 'light'); // Save the user's preference
        }
    });
});