script.js

// let loginForm = document.querySelector('.Login-form-container');
// document.querySelector('#Login-btn').onclick = () => {
//     loginForm.classList.toggle('active');
// }
// document.querySelector('#close-login-btn').onclick = () => {
//     loginForm.classList.remove('active');
// }
let loginForm = document.querySelector('.Login-form-container');

// Open form
document.querySelector('#Login-btn').onclick = () => {
    loginForm.classList.toggle('active');
}

// Close form
document.querySelector('#close-login-btn').onclick = () => {
    loginForm.classList.remove('active');
}

// Handle form submit
let form = loginForm.querySelector("form");
form.onsubmit = (e) => {
    e.preventDefault(); // prevent page reload

    let username = form.querySelector('input[type="text"]').value;
    let password = form.querySelector('input[type="password"]').value;

    if(username.trim() === "" || password.trim() === ""){
        alert("Please enter both username and password.");
        return;
    }

    let saveData = confirm("Do you want to save login data?");
    if(saveData){
        // store locally (for demo, real apps use backend)
        localStorage.setItem("username", username);
        localStorage.setItem("password", password);
        alert("Login data saved successfully!");
    } else {
        alert("Login without saving data.");
    }

    // close login form
    loginForm.classList.remove('active');
}

// Forgot password
document.querySelector('.forgot-password').onclick = (e) => {
    e.preventDefault();
    alert("Redirecting to Forgot Password page...");
    window.location.href = "forgot-password.html"; // use actual page
}

// Create account
document.querySelector('.create-account').onclick = (e) => {
    e.preventDefault();
    alert("Redirecting to Signup page...");
    window.location.href = "signup.html"; // use actual page
}

// FORGOT PASSWORD PAGE
// ==========================
const forgotForm = document.querySelector('#forgot-form');
if (forgotForm) {
    forgotForm.onsubmit = (e) => {
        e.preventDefault();
        let email = forgotForm.querySelector('input[type="email"]').value.trim();
        if (email === "") {
            alert("Please enter your email address.");
            return;
        }
        alert("A password reset link has been sent to " + email);
        window.location.href = "index.html"; // Redirect back to login
    };
}

// ==========================
// SIGNUP PAGE
// ==========================
const signupForm = document.querySelector('#signup-form');
if (signupForm) {
    signupForm.onsubmit = (e) => {
        e.preventDefault();

        let username = signupForm.querySelector('input[type="text"]').value.trim();
        let email = signupForm.querySelector('input[type="email"]').value.trim();
        let password = signupForm.querySelector('input[type="password"]').value.trim();

        if (username === "" || email === "" || password === "") {
            alert("Please fill all fields.");
            return;
        }

        // For demo purposes — storing locally
        localStorage.setItem("username", username);
        localStorage.setItem("email", email);
        localStorage.setItem("password", password);

        alert("Account created successfully!");
        window.location.href = "index.html"; // Go back to login
    };
}

// features

const cards = document.querySelectorAll('.feature-card');

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'scale(1.05)';
    card.style.boxShadow = '0 20px 40px rgba(255,0,110,0.4)'; // glow effect
  });

  card.addEventListener('mouseleave', () => {
    card.style.transform = 'scale(1)'; // reset scale
    card.style.boxShadow = '0 8px 20px rgba(0,0,0,0.2)'; // reset shadow
  });
});

//Arrivals
const arrivalCards = document.querySelectorAll('.arrival-card');

function showArrivalCards() {
    const trigger = window.innerHeight * 0.85;

    arrivalCards.forEach(card => {
        const cardTop = card.getBoundingClientRect().top;
        if(cardTop < trigger) {
            card.classList.add('show');
        } else {
            card.classList.remove('show');
        }
    });
}
window.addEventListener('scroll', showArrivalCards);
showArrivalCards(); // run on page load


//popup 
// const buyButton = document.querySelectorAll('.buy-btn');
// buyButton.forEach(button => {
//   button.addEventListener('click',() =>{
//      const cards = button.closest('.arrival-card');
//      const booktitle = cards.querySelector('h3').innerText;
//     //  const author = cards.querySelector('p').innerText;
//      const price = cards.querySelector('.price').innerText;

//      alert(`${booktitle} has been added to your cart.\n price:${price}`)
//   })

// });

//add to cart
// const buybutton = document.querySelectorAll('.buy-btn');
// const cartlist = document.getElementById('cart-items');
// const emptyMsg = document.getElementById('empty-cart');
// const cartIcon = document.querySelector('.fa-shopping-cart');
// const cartBox = document.getElementById('cart-box');

// buybutton.forEach(button =>{
//   button.addEventListener('click', () =>{
//     const arrivalcards = button.closest('.arrival-card');
//     const title = arrivalcards.querySelector('h3').innerText;
//     const price = arrivalcards.querySelector('.price').innerText;

//     const li = document.createElement('li');
//     li.textContent = `${title}-${price}`;
//     cartlist.appendChild(li);

//     emptyMsg.style.display = 'none';
//   })
// });

// cartIcon.addEventListener('click',(e) =>{
//   e.preventDefault();
//   cartBox.classList.toggle('active');
// });

// Add to cart
const buyButtons = document.querySelectorAll('.buy-btn');
const cartList = document.getElementById('cart-items');
const emptyMsg = document.getElementById('empty-cart');
const cartIcon = document.querySelector('.fa-shopping-cart'); // FIXED
const cartBox = document.getElementById('cart-box');

buyButtons.forEach(button => {
  button.addEventListener('click', () => {
    const arrivalCard = button.closest('.arrival-card');
    const title = arrivalCard.querySelector('h3').innerText;
    const price = arrivalCard.querySelector('.price').innerText; // FIXED

    const li = document.createElement('li');
    li.textContent = `${title} - ${price}`;
    cartList.appendChild(li);
    alert(`${title} added to cart!`);

    emptyMsg.style.display = 'none';
  });
});

// Toggle cart display
cartIcon.addEventListener('click', (e) => {
  e.preventDefault();
  cartBox.classList.toggle('active');
});

//Add to wishlist
const wishlistButton = document.querySelectorAll('.wishlist-btn');
const wishlistList = document.getElementById('wishlist-items');
const emptyWishlist = document.getElementById('empty-wishlist');
const wishlistIcon = document.getElementById('wishlist-icon');
const wishlistBox = document.getElementById('wishlist-box');

wishlistButton.forEach(button =>{
  button.addEventListener('click',() =>{
    const arrivalCard = button.closest('.arrival-card');
    const title = arrivalCard.querySelector('h3').innerText;
    const price = arrivalCard.querySelector('.price').innerText;

    const li = document.createElement('li');
    li.textContent = `${title} - ${price}`;
    wishlistList.appendChild(li);
    alert(`${title} added to wishlist!`);

    emptyWishlist.style.display ='none';
  })

});

//Toggle wishlist display
wishlistIcon.addEventListener('click',(e) =>{
  e.preventDefault();
  wishlistBox.classList.toggle('active');
});

// More Info button functionality
const moreInfoButtons = document.querySelectorAll('.info-btn');

moreInfoButtons.forEach(button => {
  button.addEventListener('click', () => {
    const bookId = button.dataset.id; 
    window.location.href = `moreinfo.html?id=${bookId}`;
  });
});

// CONTACT
document.getElementById("contactForm").addEventListener("submit", function(e) {
  e.preventDefault();

  const name = document.getElementById("name").value.trim();
  const email = document.getElementById("email").value.trim();
  const subject = document.getElementById("subject").value.trim();
  const message = document.getElementById("message").value.trim();

  if (!name || !email || !subject || !message) {
    alert("Please fill all fields.");
    return;
  }
  alert("Thank you " + name + "! Your message has been sent.");
  document.getElementById("contactForm").reset();
});