/* footer.jsx — wordmark, nav, contact, discreet Management link */
function Footer({ onStaff }) {
  const riad = window.RIAD.riad;
  const c = riad.contact;
  const go = (id) => window.scrollToId(id);
  return (
    <footer className="ftr" data-screen-label="Footer">
      <div className="wrap">
        <div className="ftr-grid">
          <div>
            <span className="wordmark"><span className="star" style={{ color: "var(--brass)" }}>&#9733;</span> {riad.wordmark}</span>
            <p className="tag">{riad.blurb}</p>
          </div>
          <div>
            <h5>The House</h5>
            <div className="ftr-col">
              <a href="#rooms" onClick={(e) => { e.preventDefault(); go("rooms"); }}>Rooms &amp; Suites</a>
              <a href="#meals" onClick={(e) => { e.preventDefault(); go("meals"); }}>The Table</a>
              <a href="#gallery" onClick={(e) => { e.preventDefault(); go("gallery"); }}>Gallery</a>
              <a href="#story" onClick={(e) => { e.preventDefault(); go("story"); }}>Our story</a>
              <a href="#reservation" onClick={(e) => { e.preventDefault(); go("reservation"); }}>Reserve</a>
            </div>
          </div>
          <div>
            <h5>Find us</h5>
            <div className="ftr-col">
              <a href={"https://wa.me/" + c.whatsappNumber} target="_blank" rel="noreferrer">{c.whatsappLabel}</a>
              <a href={"tel:" + c.phoneNumber}>{c.phoneLabel}</a>
              <a href={"mailto:" + c.email}>{c.email}</a>
              <a>{c.instagram}</a>
              <a style={{ color: "var(--faint)", cursor: "default" }}>{riad.location}</a>
            </div>
          </div>
        </div>
        <div className="ftr-bottom">
          <span className="fine">&copy; {new Date().getFullYear()} {riad.name}. {riad.languages}.</span>
          <button className="staff-link" onClick={onStaff}><span className="k"></span> Staff &middot; Management</button>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;