<script>
  // Feature Toggles & Initial State
  const isUserLoggedIn = false; // Set to true after successful login

  // DOM Elements
  const heroSection = document.getElementById('hero');
  const dashboardSection = document.getElementById('dashboard');
  const identitySection = document.getElementById('identity');
  const tourPopup = document.getElementById('tour-popup');
  const closeTourButton = document.getElementById('close-tour');
  const skipTourButton = document.getElementById('skip-tour');
  const nextTourButton = document.getElementById('next-tour');
  const tourContent = document.getElementById('tour-content');
  const toastContainer = document.getElementById('toast-container');
  const copyrightYearSpan = document.querySelector('.copyright-year');
  const lastUpdatedSpan = document.getElementById('last-updated');

  // Tour Steps
  const tourSteps = [
    { element: '.integration-card:first-child', title: 'Integrations', description: 'Connect your SaaS tools here.' },
    { element: '#dashboard .bg-white:nth-of-type(2)', title: 'SaaS Discovery', description: 'Find new tools to boost your productivity.' },
    { element: '#dashboard .bg-white:nth-of-type(3)', title: 'Plan Management', description: 'Manage your subscription and billing.' },
    { element: '#dashboard .bg-white:nth-of-type(4)', title: 'Profile Settings', description: 'Update your personal information and avatar.' }
  ];
  let currentTourStep = 0;

  // Initialize Copyright Year
  copyrightYearSpan.textContent = new Date().getFullYear();

  // Update Last Updated Timestamp
  const updateLastUpdated = () => {
    const now = new Date();
    const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
    lastUpdatedSpan.textContent = now.toLocaleDateString('en-US', options);
  };
  updateLastUpdated();
  setInterval(updateLastUpdated, 60000);

  // Show/Hide Sections based on login status
  const toggleSections = () => {
    if (isUserLoggedIn) {
      heroSection.classList.add('hidden');
      identitySection.classList.add('hidden');
      dashboardSection.classList.remove('hidden');
      // Check if tour should be shown
      if (!localStorage.getItem('tourCompleted')) {
        startTour();
      }
    } else {
      heroSection.classList.remove('hidden');
      identitySection.classList.remove('hidden');
      dashboardSection.classList.add('hidden');
    }
  };

  // Tour Functionality
  const startTour = () => {
    tourPopup.classList.remove('hidden');
    currentTourStep = 0;
    showTourStep();
  };

  const showTourStep = () => {
    if (currentTourStep < tourSteps.length) {
      const step = tourSteps[currentTourStep];
      const element = document.querySelector(step.element);
      if (element) {
        // Highlight the element
        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        tourContent.innerHTML = `<h3>${step.title}</h3><p>${step.description}</p>`;
        nextTourButton.textContent = 'Next';
      } else {
        console.error('Tour element not found:', step.element);
        tourContent.innerHTML = '<p>Error loading tour step.</p>';
        nextTourButton.textContent = 'Next';
      }
    } else {
      tourPopup.classList.add('hidden');
      localStorage.setItem('tourCompleted', 'true');
    }
  };

  closeTourButton.addEventListener('click', () => {
    tourPopup.classList.add('hidden');
  });

  skipTourButton.addEventListener('click', () => {
    tourPopup.classList.add('hidden');
    localStorage.setItem('tourCompleted', 'true');
  });

  nextTourButton.addEventListener('click', () => {
    currentTourStep++;
    if (currentTourStep === tourSteps.length) {
      tourPopup.classList.add('hidden');
      localStorage.setItem('tourCompleted', 'true');
    } else {
      showTourStep();
    }
  });

  // Toast Notification Function
  const showToast = (message, type = 'info') => {
    const toastElement = document.createElement('div');
    toastElement.className = `bg-${type}-500 text-white p-4 rounded-lg shadow-lg flex items-center justify-between transition duration-300`;
    toastElement.innerHTML = `<span>${message}</span><button class="ml-4 text-white font-bold" onclick="this.parentElement.remove()">&times;</button>`;
    toastContainer.appendChild(toastElement);
    setTimeout(() => {
      toastElement.remove();
    }, 5000);
  };

  // Initial Call to Toggle Sections
  toggleSections();

  // Example of showing a toast on successful login (replace with actual login logic)
  // document.querySelector('#identity form').addEventListener('submit', (e) => {
  //   e.preventDefault();
  //   // Simulate login
  //   setTimeout(() => {
  //     isUserLoggedIn = true;
  //     toggleSections();
  //     showToast('Welcome back!', 'success');
  //   }, 1000);
  // });

</script>