/* ============ FOOTER ============ */
function Footer() {
  const S = window.SITE;
  const NAV_MAP2 = { Home: "hero", About: "about", Rooms: "rooms", Cafe: "cafe", Gallery: "gallery", Experiences: "experiences", Reviews: "reviews", Contact: "contact" };
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: "smooth" });
  };
  return (
    <footer className="footer">
      <div className="container footer-top">
        <div className="footer-brand">
          <a href="#hero" onClick={go("hero")} className="brand serif">The Last Stop<sup>®</sup></a>
          <p>{S.tagline} in the heart of {S.location}. Stay. Explore. Connect.</p>
          <div className="footer-social">
            {S.social.map((s) => (
              <a key={s.label} href={s.href} aria-label={s.label} className="fsoc"><Icon name={s.icon} /></a>
            ))}
          </div>
        </div>

        <div className="footer-col">
          <h4>Explore</h4>
          {["Home","About","Rooms","Cafe","Gallery"].map((n) => (
            <a key={n} href={`#${NAV_MAP2[n]}`} onClick={go(NAV_MAP2[n])}>{n}</a>
          ))}
        </div>
        <div className="footer-col">
          <h4>Visit</h4>
          {["Experiences","Reviews","Contact"].map((n) => (
            <a key={n} href={`#${NAV_MAP2[n]}`} onClick={go(NAV_MAP2[n])}>{n}</a>
          ))}
        </div>
        <div className="footer-col">
          <h4>Reach us</h4>
          <a href={`tel:${S.contact.phone.replace(/\s/g, "")}`}>{S.contact.phone}</a>
          <a href={`mailto:${S.contact.email}`}>{S.contact.email}</a>
          <a href={`https://wa.me/${S.contact.whatsapp}`} target="_blank" rel="noreferrer">WhatsApp</a>
        </div>
      </div>
      <div className="container footer-bot">
        <span>© {new Date().getFullYear()} {S.brandFull}. All rights reserved.</span>
        <span>Made for wanderers · Bir Billing, India</span>
      </div>

      <style>{`
        .footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-top: 64px; }
        .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; }
        .footer-brand .brand { font-size: 1.7rem; color: var(--text); }
        .footer-brand p { color: var(--text-2); font-size: 14px; margin-top: 14px; max-width: 32ch; }
        .footer-social { display: flex; gap: 12px; margin-top: 20px; }
        .fsoc { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: all .3s var(--ease); }
        .fsoc:hover { color: var(--on-primary); background: var(--primary); border-color: var(--primary); transform: translateY(-3px); }
        html[data-theme="dark"] .fsoc:hover { box-shadow: 0 0 20px -4px var(--glow); }
        .footer-col h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
        .footer-col a { display: block; color: var(--text-2); font-size: 14px; padding: 5px 0; transition: color .25s; }
        .footer-col a:hover { color: var(--primary); }
        .footer-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 22px 28px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
        @media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });