function Footer() {
  const y = new Date().getFullYear();

  // Same page-aware logic as the header
  const isHome = window.location.pathname.endsWith('index.html') ||
                 window.location.pathname === '/' ||
                 window.location.pathname.endsWith('/');

  const navHref = (hash) => isHome ? hash : 'index.html' + hash;

  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr-grid">
          <div className="ftr-brand">
            <a href="index.html">
              <img src="assets/logo-worldliness-footer.png" alt="Worldliness Construction" />
            </a>
            <p>Vancouver's full-service renovation specialists. Expert craftsmanship, every project.</p>
          </div>
          <div>
            <h4>Navigation</h4>
            <ul>
              <li><a href={navHref('#services')}>Services</a></li>
              <li><a href={navHref('#work')}>Our Work</a></li>
              <li><a href={navHref('#process')}>Process</a></li>
              <li><a href={navHref('#testimonials')}>Reviews</a></li>
              <li><a href={navHref('#contact')}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href={navHref('#services')}>Home Renovations</a></li>
              <li><a href={navHref('#services')}>Kitchen Remodels</a></li>
              <li><a href={navHref('#services')}>Bathroom Suites</a></li>
              <li><a href={navHref('#services')}>New Construction</a></li>
              <li><a href={navHref('#services')}>Roofing</a></li>
              <li><a href={navHref('#services')}>Landscaping</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li className="contact-item"><Icon name="phone" size={14}/> <a href={window.CONTACT.phoneHref}>{window.CONTACT.phone}</a></li>
              <li className="contact-item"><Icon name="mail" size={14}/> <a href={window.CONTACT.emailHref}>{window.CONTACT.email}</a></li>
              <li className="contact-item"><Icon name="pin" size={14}/> {window.CONTACT.address}</li>
            </ul>
          </div>
        </div>
        <div className="ftr-bar">
          <p>© {y} Worldliness Construction. All rights reserved.</p>
          <p>Licensed & Insured · Vancouver, BC</p>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;