// Initialize Lucide Icons
// @ts-ignore
lucide.createIcons();

document.addEventListener('DOMContentLoaded', () => {
  // 1. Handle URL Parameter for Name
  const params = new URLSearchParams(window.location.search);
  const nameParam = params.get('name');
  if (nameParam) {
    const nameElement = document.getElementById('recipient-name');
    if (nameElement) {
      nameElement.textContent = nameParam;
    }
    // Update Page Title
    document.title = `For ${nameParam}`;
  }

  // 2. Scroll Button Logic
  const scrollBtn = document.getElementById('scroll-btn');
  const mainContent = document.getElementById('main-content');
  
  if (scrollBtn && mainContent) {
    scrollBtn.addEventListener('click', () => {
      mainContent.scrollIntoView({ behavior: 'smooth' });
    });
  }

  // 3. Floating Hearts Background Generator
  const createHeart = () => {
    const heart = document.createElement('div');
    heart.classList.add('floating-heart');
    heart.innerHTML = '♥';
    
    // Random Properties
    const startLeft = Math.random() * 100;
    const duration = 15 + Math.random() * 20; // 15s to 35s
    const size = 1 + Math.random() * 3; // 1rem to 4rem
    const colorOpacity = 0.2 + Math.random() * 0.3;

    heart.style.left = `${startLeft}vw`;
    heart.style.animationDuration = `${duration}s`;
    heart.style.fontSize = `${size}rem`;
    heart.style.color = `rgba(255, 179, 193, ${colorOpacity})`; // love-200 color

    const container = document.getElementById('heart-container');
    if (container) {
      container.appendChild(heart);

      // Cleanup
      setTimeout(() => {
        heart.remove();
      }, duration * 1000);
    }
  };

  // Create initial hearts
  for(let i=0; i<15; i++) {
    setTimeout(createHeart, Math.random() * 3000);
  }
  // Create continuous hearts
  setInterval(createHeart, 800);

  // 4. Scroll Intersection Observer for "Reveal" Animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: "0px 0px -50px 0px"
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
        observer.unobserve(entry.target); // Only animate once
      }
    });
  }, observerOptions);

  document.querySelectorAll('.reveal').forEach(el => {
    observer.observe(el);
  });
});