document.addEventListener('DOMContentLoaded', function () {
  // Ensure viewport meta tag exists
  if (!document.querySelector('meta[name="viewport"]')) {
    const meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width, initial-scale=1.0';
    document.head.appendChild(meta);
  }

  // Add CSS styles
  const style = document.createElement('style');
  style.textContent = `
    html, body {
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }

    footer {
      background-color: #ffffff;
      border-top: 1px solid #e5e7eb;
      padding: 12px 0;
      width: 100%;
      font-family: sans-serif;
      font-size: 12px;
      color: #6b7280;
    }
	
	.heart-icon {
  height: 16px;
  width: 16px;
  vertical-align: middle;
  margin: 0 4px;
}

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      flex-wrap: wrap;
      gap: 8px;
    }

    .footer-left,
    .footer-center,
    .footer-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .footer-left img {
      height: 24px;
      width: 24px;
      display: none;
    }

    .footer-center {
      font-style: italic;
    }

    .footer-center svg {
      height: 12px;
      width: 12px;
      fill: #16a34a;
    }

    .footer-right a {
      color: #6b7280;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-right a:hover {
      color: #16a34a;
    }

    .footer-right svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    @media (min-width: 640px) {
      footer {
        padding: 16px 0;
        font-size: 14px;
      }

      .footer-container {
        flex-direction: row;
        justify-content: space-between;
      }

      .footer-left img {
        display: block;
        height: 28px;
        width: 28px;
      }

      .footer-center svg {
        height: 16px;
        width: 16px;
      }

      .footer-right svg {
        width: 20px;
        height: 20px;
      }
    }
  `;
  document.head.appendChild(style);

  // Footer HTML
  const year = new Date().getFullYear();
  const footerHTML = `
    <footer>
      <div class="footer-container">
        <div class="footer-left">
          <img src="https://www.sys-metrics.com/views/imgs/logo/sys-metrics.svg" alt="Logo">
          <span>&copy; ${year} Sys-Metrics</span>
        </div>
        <div class="footer-center">
          <span>— Made with</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="heart-icon">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 
              2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 
              14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 
              6.86-8.55 11.54L12 21.35z"
              fill="transparent"
              stroke="#16a34a"
              stroke-width="3"
              stroke-linejoin="round"
            />
          </svg>
          <span>to empower your workflow</span>
        </div>
        <div class="footer-right">
          <a href="http://www.sys-metrics.com/privacy" target="_parent">Privacy</a>
          <a href="http://www.sys-metrics.com/terms" target="_parent">Terms</a>
          <a href="http://www.sys-metrics.com/faq" target="_parent">FAQs</a>
          <a href="mailto:contact@sys-metrics.com" aria-label="Email" target="_parent">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 
              2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 
              2-2zm8 7.5L20 6H4l8 5.5zm0 2.1L4 
              8v10h16V8l-8 5.6z"/>
            </svg>
          </a>
          <a href="https://github.com/mujtaba989" aria-label="GitHub" target="_parent">
            <svg viewBox="0 0 24 24">
              <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 
                3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
                1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 
                2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604
                -2.665-.305-5.467-1.334-5.467-5.931 
                0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176
                0 0 1.008-.322 3.301 1.23.957-.266 
                1.983-.399 3.003-.404 1.02.005 2.047.138 
                3.006.404 2.291-1.552 3.297-1.23 
                3.297-1.23.653 1.653.242 2.874.118 
                3.176.77.84 1.235 1.911 1.235 
                3.221 0 4.609-2.807 5.624-5.479 
                5.921.43.372.823 1.102.823 2.222v3.293c0 
                .319.192.694.801.576C20.565 21.796 24 
                17.299 24 12c0-6.627-5.373-12-12-12z"/>
            </svg>
          </a>
        </div>
      </div>
    </footer>
  `;

  document.body.insertAdjacentHTML('beforeend', footerHTML);
});