nav.js

/* nav.js — inject shared nav + footer into every page */
(function () {
  const currentPage = location.pathname.split('/').pop() || 'index.html';

  const links = [
    { href: 'index.html',     icon: '🏠', label: 'Home' },
    { href: 'tools.html',     icon: '🛠️', label: 'Tools' },
    { href: 'articles.html',  icon: '📖', label: 'Articles' },
    { href: 'resources.html', icon: '🆘', label: 'Resources' },
    { href: 'about.html',     icon: '💙', label: 'About' },
  ];

  const navHTML = `
  <a class="skip-link" href="#main">Skip to main content</a>
  <div class="nav-wrapper" role="banner">
    <div class="nav-inner">
      <a class="nav-logo" href="index.html" aria-label="MindLift Home">MindLift</a>
      <ul class="nav-links" role="navigation" aria-label="Main navigation">
        ${links.map(l=>`<li><a href="${l.href}" class="${currentPage===l.href?'active':''}">${l.icon} ${l.label}</a></li>`).join('')}
        <li><a href="tools.html#chat" class="nav-cta">💬 Talk Now</a></li>
      </ul>
      <div class="nav-end">
        <button class="icon-btn" id="themeBtn" onclick="toggleTheme()" aria-label="Toggle light/dark mode">🌙</button>
        <button class="icon-btn nav-toggle" id="navToggle" onclick="toggleMobileNav()" aria-label="Toggle menu" aria-expanded="false">☰</button>
      </div>
    </div>
  </div>
  <nav class="nav-mobile" id="navMobile" aria-label="Mobile navigation">
    ${links.map(l=>`<a href="${l.href}" class="${currentPage===l.href?'active':''}">${l.icon} ${l.label}</a>`).join('')}
    <a href="tools.html#chat" style="background:var(--accent);color:#fff;border-color:var(--accent)">💬 Talk to AI Companion</a>
  </nav>`;

  const footerHTML = `
  <div class="crisis-strip page-wrap reveal">
    <span style="font-size:1.4rem;flex-shrink:0">🆘</span>
    <p>In crisis or having thoughts of self-harm? Call <strong>988</strong> (US) or <strong>116 123</strong> (UK) — free, 24/7, confidential.
    <a href="resources.html" style="color:var(--accent2);margin-left:8px;font-weight:600">All helplines →</a></p>
  </div>
  <footer class="site-footer" role="contentinfo">
    <div class="footer-inner">
      <div class="footer-brand">
        <a class="nav-logo" href="index.html">MindLift</a>
        <p>A safe space to breathe, reflect, and find support. Built with compassion for everyone who is struggling.</p>
      </div>
      <div class="footer-col">
        <h4>Tools</h4>
        <a href="tools.html#breathe">Breathing Exercises</a>
        <a href="tools.html#mood">Mood Tracker</a>
        <a href="tools.html#journal">Gratitude Journal</a>
        <a href="tools.html#quiz">Self-Assessment</a>
        <a href="tools.html#chat">AI Companion</a>
      </div>
      <div class="footer-col">
        <h4>Learn</h4>
        <a href="articles.html">All Articles</a>
        <a href="articles.html#anxiety">Anxiety</a>
        <a href="articles.html#depression">Depression</a>
        <a href="articles.html#selfcare">Self-Care</a>
        <a href="articles.html#therapy">Therapy</a>
      </div>
      <div class="footer-col">
        <h4>Support</h4>
        <a href="resources.html">Crisis Helplines</a>
        <a href="resources.html#find">Find a Therapist</a>
        <a href="resources.html#community">Community</a>
        <a href="about.html">About MindLift</a>
        <a href="about.html#disclaimer">Disclaimer</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© 2026 MindLift — Your mental health matters.</p>
      <p>Not a substitute for professional medical advice. <a href="about.html#disclaimer">Read disclaimer</a></p>
    </div>
  </footer>`;

  // Inject nav before body content
  document.body.insertAdjacentHTML('afterbegin', navHTML);
  document.body.insertAdjacentHTML('beforeend', footerHTML);

  // Theme
  window.toggleTheme = function () {
    const isLight = document.documentElement.getAttribute('data-theme') === 'light';
    document.documentElement.setAttribute('data-theme', isLight ? 'dark' : 'light');
    document.getElementById('themeBtn').textContent = isLight ? '🌙' : '☀️';
    localStorage.setItem('ml_theme', isLight ? 'dark' : 'light');
  };
  const saved = localStorage.getItem('ml_theme');
  if (saved === 'light') {
    document.documentElement.setAttribute('data-theme', 'light');
    setTimeout(() => { const b = document.getElementById('themeBtn'); if (b) b.textContent = '☀️'; }, 0);
  }

  // Mobile nav
  window.toggleMobileNav = function () {
    const m = document.getElementById('navMobile');
    const t = document.getElementById('navToggle');
    const open = m.classList.toggle('open');
    t.textContent = open ? '✕' : '☰';
    t.setAttribute('aria-expanded', open);
  };
  document.addEventListener('click', e => {
    const m = document.getElementById('navMobile');
    const t = document.getElementById('navToggle');
    const w = document.querySelector('.nav-wrapper');
    if (m && m.classList.contains('open') && !m.contains(e.target) && !w.contains(e.target)) {
      m.classList.remove('open');
      t.textContent = '☰';
    }
  });

  // Scroll reveal
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
  }, { threshold: 0.1 });
  const observe = () => document.querySelectorAll('.reveal').forEach(el => io.observe(el));
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', observe);
  else observe();

  // Smooth hash scroll
  document.addEventListener('click', e => {
    const a = e.target.closest('a[href*="#"]');
    if (!a) return;
    const [pagePart, hashPart] = a.getAttribute('href').split('#');
    const currentFile = location.pathname.split('/').pop() || 'index.html';
    if ((!pagePart || pagePart === currentFile) && hashPart) {
      const target = document.getElementById(hashPart);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  });
})();