// Footer with marble texture, big "WE ARE DIGIT ESTATE" mark
function Footer({ onNavigate }) {
  const ref = useReveal();
  return (
    <footer className="de-footer" ref={ref}>
      <img className="de-footer__bg" src="assets/imagery/marble-brass-texture.png" alt=""/>
      <div className="de-footer__overlay"></div>

      <div className="de-container">
        <div className="de-footer__top de-reveal is-in">
          <h2 className="de-footer__display">
            We are <em>Digit Estate.</em>
          </h2>
          <a className="de-btn de-btn--ghost-light" onClick={() => onNavigate('contact')}>
            Got a project in mind? <span className="arrow"></span>
          </a>
        </div>

        <div className="de-footer__grid">
          <div>
            <div className="de-eyebrow" style={{color:'var(--de-gold)'}}>Navigate</div>
            <ul className="de-footer__list">
              <li><a onClick={() => onNavigate('home')}>Home</a></li>
              <li><a onClick={() => onNavigate('about')}>About</a></li>
              <li><a onClick={() => onNavigate('portfolio')}>Portfolio</a></li>
              <li><a>Atelier</a></li>
              <li><a>Journal</a></li>
            </ul>
          </div>
          <div>
            <div className="de-eyebrow" style={{color:'var(--de-gold)'}}>Contact</div>
            <ul className="de-footer__list">
              <li><a>info@digit.estate</a></li>
              <li><a>+971 02 — 44 88 991</a></li>
              <li><a>www.digit.estate</a></li>
            </ul>
          </div>
          <div>
            <div className="de-eyebrow" style={{color:'var(--de-gold)'}}>Atelier</div>
            <ul className="de-footer__list">
              <li>Al Otaibah Building</li>
              <li>Hamdan Street</li>
              <li>Abu Dhabi · UAE</li>
              <li>Office 404</li>
            </ul>
          </div>
          <div>
            <div className="de-eyebrow" style={{color:'var(--de-gold)'}}>Social</div>
            <div className="de-footer__social">
              <a><Icon name="instagram"/></a>
              <a><Icon name="linkedin"/></a>
              <a><Icon name="facebook"/></a>
            </div>
            <p className="de-footer__careers">
              Apply at <span className="de-footer__careers-link">careers@digit.estate</span>
            </p>
          </div>
        </div>

        <div className="de-footer__legal">
          <div>© 2026 Digit Estate. All Rights Reserved.</div>
          <div className="de-footer__legal-right">
            <a>Privacy Policy</a><span>·</span><a>Terms</a>
            <button className="de-footer__top-btn" onClick={() => window.scrollTo({top:0, behavior:'smooth'})}>
              <Icon name="arrowUp" size={16}/> Back to top
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;