// Footer

const Footer = ({ go }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer__top">
        <div>
          <Logo />
          <div className="footer__brand-mark">
            BE<em>.</em>
          </div>
          <p style={{ marginTop: 16, color: "rgba(246,245,239,0.6)", maxWidth: 320, fontSize: 14, lineHeight: 1.55 }}>
            Beyond Local. Globally Driven. Capturing Experiences.
          </p>
          <div style={{ marginTop: 24 }}><BELoop /></div>
        </div>
        <div className="footer__col">
          <h5>Services</h5>
          <ul>
            {SERVICES.slice(0, 5).map(s => <li key={s.slug}><a href="#" onClick={(e) => { e.preventDefault(); go({ page: "services" }); }}>{s.name}</a></li>)}
            <li><a href="#" onClick={(e) => { e.preventDefault(); go({ page: "services" }); }} style={{ color: "var(--accent)" }}>All services →</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Sitemap</h5>
          <ul>
            {NAV_ITEMS.map(n => <li key={n.id}><a href="#" onClick={(e) => { e.preventDefault(); go({ page: n.id }); }}>{n.label}</a></li>)}
            <li><a href="#">News &amp; insights</a></li>
            <li><a href="#">Join us</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Offices</h5>
          <ul>
            {OFFICES.map(o => (
              <li key={o.city}>
                <div style={{ fontWeight: 600 }}>{o.city}</div>
                {o.phoneRaw && <a href={`tel:${o.phoneRaw}`} style={{ color: "rgba(246,245,239,0.6)" }}>{o.phone}</a>}
              </li>
            ))}
            <li><a href="mailto:info@blinkexperience.com" style={{ color: "var(--accent)" }}>info@blinkexperience.com</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bot">
        <span>© 2026 Blink Experience FZ-LLC · UAE</span>
        <span>EN · AR · RU* · ZH* &nbsp;<span style={{ opacity: 0.5 }}>*on request</span></span>
        <span style={{ display: "flex", gap: 16 }}>
          <a href="#">Instagram</a>
          <a href="#">LinkedIn</a>
          <a href="#">YouTube</a>
          <a href="#">Facebook</a>
        </span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });