components.js

/* ============================================================
   Sahyog – components.js
   Shared Navbar & Footer injected into every page
   ============================================================ */

/** Inject the navbar into the page */
function renderNavbar() {
  const session = getSession();
  const loggedIn = !!session;
  const currentPage = window.location.pathname.split("/").pop() || "index.html";

  const nav = document.createElement("nav");
  nav.className = "navbar";
  nav.id = "navbar";
  nav.innerHTML = `
    <div class="nav-container">
      <a href="index.html" class="nav-logo" id="nav-logo">
        <div class="logo-emblem">
          <svg viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="2"/><path d="M20 6L20 34M12 10L12 30M28 10L28 30M8 20L32 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="20" cy="20" r="4" fill="currentColor"/></svg>
        </div>
        <div class="logo-text">
          <span class="logo-main">Sahyog</span>
          <span class="logo-sub">Citizen Support Platform</span>
        </div>
      </a>
      <ul class="nav-links" id="nav-links">
        <li><a href="index.html" class="nav-link ${currentPage === 'index.html' ? 'active' : ''}">Home</a></li>
        <li><a href="schemes.html" class="nav-link ${currentPage === 'schemes.html' ? 'active' : ''}">Schemes</a></li>
        <li><a href="eligibility.html" class="nav-link ${currentPage === 'eligibility.html' ? 'active' : ''}">Eligibility</a></li>
        <li><a href="compare.html" class="nav-link ${currentPage === 'compare.html' ? 'active' : ''}">Compare</a></li>
        ${loggedIn ? `<li><a href="documents.html" class="nav-link ${currentPage === 'documents.html' ? 'active' : ''}">Documents</a></li>
        <li><a href="applications.html" class="nav-link ${currentPage === 'applications.html' ? 'active' : ''}">Applications</a></li>` : ''}
        <li><a href="about.html" class="nav-link ${currentPage === 'about.html' ? 'active' : ''}">About</a></li>
        <li><a href="contact.html" class="nav-link ${currentPage === 'contact.html' ? 'active' : ''}">Contact</a></li>
      </ul>
      <div class="nav-actions">
        ${loggedIn
          ? `<a href="dashboard.html" class="btn btn-outline btn-sm ${currentPage === 'dashboard.html' ? 'active' : ''}">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
              Dashboard
            </a>
            <button class="btn btn-ghost btn-sm" onclick="logout()" id="logout-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
              Logout
            </button>`
          : `<a href="login.html" class="btn btn-primary btn-sm nav-cta">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
              Login
            </a>`
        }
        <button class="hamburger" id="hamburger" aria-label="Toggle Menu"><span></span><span></span><span></span></button>
      </div>
    </div>`;

  document.body.prepend(nav);

  // Scroll effect
  window.addEventListener("scroll", () => {
    nav.classList.toggle("scrolled", window.scrollY > 30);
  });

  // Hamburger
  const hamburger = document.getElementById("hamburger");
  const navLinks = document.getElementById("nav-links");
  hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navLinks.classList.toggle("active");
  });
  // Close on link click
  navLinks.querySelectorAll(".nav-link").forEach(link => {
    link.addEventListener("click", () => {
      hamburger.classList.remove("active");
      navLinks.classList.remove("active");
    });
  });
}

/** Inject the footer into the page */
function renderFooter() {
  const footer = document.createElement("footer");
  footer.className = "footer";
  footer.innerHTML = `
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <div class="nav-logo">
            <div class="logo-emblem">
              <svg viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="2"/><path d="M20 6L20 34M12 10L12 30M28 10L28 30M8 20L32 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="20" cy="20" r="4" fill="currentColor"/></svg>
            </div>
            <div class="logo-text">
              <span class="logo-main">Sahyog</span>
              <span class="logo-sub">Citizen Support Platform</span>
            </div>
          </div>
          <p>Empowering Indian citizens with intelligent, data-driven access to government welfare schemes.</p>
        </div>
        <div class="footer-links">
          <h4>Quick Links</h4>
          <a href="index.html">Home</a>
          <a href="schemes.html">Browse Schemes</a>
          <a href="eligibility.html">Check Eligibility</a>
          <a href="compare.html">Compare Schemes</a>
        </div>
        <div class="footer-links">
          <h4>Categories</h4>
          <a href="schemes.html?cat=housing">Housing</a>
          <a href="schemes.html?cat=health">Health</a>
          <a href="schemes.html?cat=education">Education</a>
          <a href="schemes.html?cat=agriculture">Agriculture</a>
          <a href="schemes.html?cat=finance">Finance</a>
        </div>
        <div class="footer-links">
          <h4>Resources</h4>
          <a href="about.html">About Sahyog</a>
          <a href="contact.html">Contact & Help</a>
          <a href="login.html">Login</a>
          <a href="register.html">Register</a>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2026 Sahyog – Citizen Support Platform. Built for citizens of India.</p>
        <p class="footer-disclaimer">Disclaimer: This is a prototype tool for educational purposes. Always verify scheme details on official government portals.</p>
      </div>
    </div>`;
  document.body.appendChild(footer);
}

/** Scroll to top button */
function renderScrollTop() {
  const btn = document.createElement("button");
  btn.className = "scroll-top";
  btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>`;
  btn.setAttribute("aria-label", "Scroll to top");
  document.body.appendChild(btn);
  window.addEventListener("scroll", () => btn.classList.toggle("visible", window.scrollY > 500));
  btn.addEventListener("click", () => window.scrollTo({ top: 0, behavior: "smooth" }));
}

/** Initialize shared components on every page */
function initSharedComponents() {
  renderNavbar();
  renderFooter();
  renderScrollTop();
}

// Auto-init on DOM ready
document.addEventListener("DOMContentLoaded", initSharedComponents);