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

    // 1. Smooth Scroll for Navigation
    const navLinks = document.querySelectorAll("header ul li a");
    navLinks.forEach(link => {
      link.addEventListener("click", (e) => {
        e.preventDefault();
        const targetId = link.getAttribute("href").substring(1);
        const targetSection = document.getElementById(targetId);
        if (targetSection) {
          window.scrollTo({
            top: targetSection.offsetTop - 70, // Adjust for header
            behavior: "smooth"
          });
        }
      });
    });
  
    // 2. Hero Section Interactivity
    const tryButton = document.querySelector(".hero-info button");
    tryButton.addEventListener("click", () => {
      const modal = document.createElement("div");
      modal.innerHTML = `
        <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 50, 0.9); padding: 20px; border-radius: 10px; color: #fff; z-index: 1000;">
          <h2>Try Keylo Now!</h2>
          <p>Coming soon—stay tuned!</p>
          <button onclick="this.parentElement.parentElement.remove()">Close</button>
        </div>
      `;
      document.body.appendChild(modal);
    });
  
    window.addEventListener("scroll", () => {
      const heroVid = document.querySelector(".hero-vid-box");
      const scrollPos = window.scrollY;
      heroVid.style.transform = `translateY(${scrollPos * 0.2}px)`;
    });
  
    // 3. Info Section Card Animations
    const infoCards = document.querySelectorAll(".info-cards .card");
    infoCards.forEach(card => {
      card.addEventListener("mousemove", (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const tiltX = (y - centerY) / 20;
        const tiltY = (centerX - x) / 20;
        card.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
      });
      card.addEventListener("mouseleave", () => {
        card.style.transform = "rotateX(0) rotateY(0)";
      });
  
      const video = card.querySelector("video");
      if (video) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) video.play();
            else video.pause();
          });
        }, { threshold: 0.5 });
        observer.observe(card);
      }
    });
  
    // 4. Projects Section Video Controls (Your Code + Fade-In)
    const v1 = document.getElementById("p1");
    const v2 = document.getElementById("p2");
    const v3 = document.getElementById("p3");
    const v4 = document.getElementById("p4");
    const videoList = [v1, v2, v3, v4];
  
    videoList.forEach(v => {
      v.addEventListener("mouseover", () => v.play());
      v.addEventListener("mouseout", () => v.pause());
    });
  
    
  
  
    
    // 6. Guides Section Button Action
    const guidesButton = document.querySelector(".guides-button");
    guidesButton.addEventListener("click", () => {
      const guidesContent = document.querySelector(".guides-content");
      guidesContent.innerHTML += `
        <p>Extra tip: Ask Keylo to analyze your data—just upload and say “break it down!”</p>
      `;
      guidesButton.style.display = "none";
    });
  
    const guideParas = document.querySelectorAll(".guides-text p");
    guideParas.forEach((p, index) => {
      const text = p.textContent;
      p.textContent = "";
      let i = 0;
      const type = () => {
        if (i < text.length) {
          p.textContent += text.charAt(i);
          i++;
          setTimeout(type, 50);
        }
      };
      setTimeout(type, index * 1000);
    });
  
   
  
    // 8. More Features Bubble Effects
    const bubbles = document.querySelectorAll(".feature-bubble");
    bubbles.forEach(bubble => {
      const randomDelay = Math.random() * 2;
      bubble.style.animationDelay = `${randomDelay}s`;
      bubble.addEventListener("click", () => {
        bubble.style.width = "30%";
        bubble.style.height = "35vh";
        bubble.style.transition = "width 0.3s ease, height 0.3s ease";
        bubble.querySelector("p").textContent ;
      });
    });
  
  });