/* global React */

function Footer({ onNavigate }) {
  const c = window.SITE_CONTACT;
  const hrefFor = (id) => id === "home" ? "/" : `/${id}`;
  const go = (event, id) => {
    event.preventDefault();
    onNavigate(id);
  };
  return (
    <footer className="ws-footer">
      <div className="ws-container">
        <div className="ws-footer__cols">
          <div className="ws-footer__brand">
            <Monogram variant="full" size="lg" />
          </div>

          <div>
            <div className="ws-footer__col-title">Quick Links</div>
            <ul className="ws-footer__list">
              <li><a href={hrefFor("home")} onClick={(event) => go(event, "home")}>Home</a></li>
              <li><a href={hrefFor("house")} onClick={(event) => go(event, "house")}>The House</a></li>
              <li><a href={hrefFor("gallery")} onClick={(event) => go(event, "gallery")}>Gallery</a></li>
              <li><a href={hrefFor("listowel")} onClick={(event) => go(event, "listowel")}>Listowel</a></li>
              <li><a href={hrefFor("wedding-accommodation-listowel")} onClick={(event) => go(event, "wedding-accommodation-listowel")}>Weddings</a></li>
              <li><a href={hrefFor("photo-shoot-location-listowel")} onClick={(event) => go(event, "photo-shoot-location-listowel")}>Photo Shoots</a></li>
              <li><a href={hrefFor("book")} onClick={(event) => go(event, "book")}>Book</a></li>
              <li><a href={hrefFor("contact")} onClick={(event) => go(event, "contact")}>Contact</a></li>
            </ul>
          </div>

          <div>
            <div className="ws-footer__col-title">Get In Touch</div>
            <div className="ws-footer__contact">
              <div className="row"><Icon name="phone" size={14} /> <a href={c.phoneHref}>{c.phone}</a></div>
              <div className="row"><Icon name="mail"  size={14} /> <a href={c.emailHref}>{c.email}</a></div>
              <div className="row"><Icon name="map-pin" size={14} /> {c.addressLines[0]},<br />{c.addressLines[1]}<br />{c.addressLines[2]}</div>
            </div>
          </div>

          <div>
            <div className="ws-footer__col-title">Local Guides</div>
            <ul className="ws-footer__list">
              <li><a href="/listowel-accommodation" onClick={(event) => go(event, "listowel-accommodation")}>Listowel Accommodation</a></li>
              <li><a href="/wedding-accommodation-listowel" onClick={(event) => go(event, "wedding-accommodation-listowel")}>Wedding Accommodation</a></li>
              <li><a href="/photo-shoot-location-listowel" onClick={(event) => go(event, "photo-shoot-location-listowel")}>Photo Shoot Location</a></li>
              <li><a href="/things-to-do-in-listowel" onClick={(event) => go(event, "things-to-do-in-listowel")}>Things to Do in Listowel</a></li>
              <li><a href="/wild-atlantic-way-base-listowel" onClick={(event) => go(event, "wild-atlantic-way-base-listowel")}>Wild Atlantic Way Base</a></li>
              <li><a href="/ballybunion-golf-accommodation" onClick={(event) => go(event, "ballybunion-golf-accommodation")}>Ballybunion Golf Stay</a></li>
            </ul>
          </div>

          <div>
            <div className="ws-footer__col-title">Follow</div>
            <div className="ws-footer__socials">
              <a href={c.instagramUrl} target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
              <a href={c.facebookUrl} target="_blank" rel="noopener noreferrer" aria-label="Facebook"><Icon name="facebook"  size={16} /></a>
              <a href={c.airbnbUrl} target="_blank" rel="noopener noreferrer" aria-label="Airbnb listing"><Icon name="external-link" size={16} /></a>
            </div>
          </div>
        </div>

        <div className="ws-footer__bottom">
          <div>© 2026 59 William Street. Guest enquiries managed by {c.hostedBy}.</div>
          <div className="legal">
            <a href={hrefFor("privacy")} onClick={(event) => go(event, "privacy")}>Privacy Policy</a>
            <a href={hrefFor("terms")} onClick={(event) => go(event, "terms")}>Terms & Conditions</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;