script.js

document.addEventListener('DOMContentLoaded', () => {
  // Enhanced mindmap interactivity
  const mindmap = document.getElementById('mindmap');
  
  if (mindmap) {
    // Scale mindmap to fit container
    const updateMindmapSize = () => {
      const container = mindmap.parentElement;
      const aspectRatio = 1200 / 700;
      const containerWidth = container.clientWidth;
      const containerHeight = container.clientHeight;
      
      let newWidth, newHeight;
      
      if (containerWidth / containerHeight > aspectRatio) {
        newHeight = containerHeight;
        newWidth = newHeight * aspectRatio;
      } else {
        newWidth = containerWidth;
        newHeight = newWidth / aspectRatio;
      }
      
      mindmap.style.width = `${newWidth}px`;
      mindmap.style.height = `${newHeight}px`;
    };
    
    window.addEventListener('resize', updateMindmapSize);
    updateMindmapSize();
    
    // Add hover effects to all clickable elements
    const clickableElements = mindmap.querySelectorAll('[id^="block"]');
    clickableElements.forEach(el => {
      el.addEventListener('mouseenter', () => {
        el.querySelector('rect').classList.add('stroke-orange-500');
      });
      
      el.addEventListener('mouseleave', () => {
        if (!el.classList.contains('active')) {
          el.querySelector('rect').classList.remove('stroke-orange-500');
        }
      });
    });
  }
  
  // Initialize tooltips for mindmap elements
  tippy('[data-tippy-content]', {
    placement: 'top',
    theme: 'light',
    animation: 'scale',
    duration: 200,
    arrow: true
  });
});