// ============ Nav, Footer, FAB ============

const NAV_ITEMS = [
  { id: "home", label: "Home" },
  { id: "specialties", label: "Specialties" },
  { id: "doctors", label: "Doctors" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];

function Navbar({ route, setRoute, onBook }) {
  return (
    <nav className="nav" data-screen-label="Sticky nav">
      <div className="container nav-row">
        <div className="nav-brand" onClick={() => setRoute({ name: "home" })} style={{ cursor: "pointer" }}>
          <BrandMark size={36} />
          <div className="nav-name">
            Euromed
            <small>Clinic Dubai · Since 2010</small>
          </div>
        </div>
        <div className="nav-links">
          {NAV_ITEMS.map((n) => (
            <a
              key={n.id}
              className={"nav-link " + (route.name === n.id || (n.id === "specialties" && (route.name === "treatment")) || (n.id === "doctors" && route.name === "doctor") ? "active" : "")}
              onClick={() => setRoute({ name: n.id })}
            >
              {n.label}
            </a>
          ))}
        </div>
        <div className="nav-cta">
          <div className="lang-switch">
            <span className="on">EN</span>
            <span>عربي</span>
            <span>РУ</span>
            <span>中文</span>
          </div>
          <button className="btn btn-primary btn-sm" onClick={onBook}>
            Book a consultation
            <Icon.Arrow size={14} />
          </button>
        </div>
      </div>
    </nav>
  );
}

function TrustBar() {
  return (
    <div className="trust-bar">
      <div className="container trust-bar-row">
        <div className="trust-bar-items">
          <span><Icon.Shield size={13}/> <b>DHA-licensed</b> · facility & practitioners</span>
          <span><Icon.Pin size={13}/> Villa 611, Jumeirah Beach Road</span>
          <span><Icon.Phone size={13}/> +971 4 394 5422</span>
        </div>
        <div className="trust-bar-items">
          <span>EN · عربي · РУ · 中文</span>
        </div>
      </div>
    </div>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">
              Euromed Clinic
              <small>Dubai · Since 2010</small>
            </div>
            <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.6, maxWidth: 32 + "ch" }}>
              A multi-specialty family medical and cosmetic clinic on Jumeirah Beach Road — under one roof since February 2010.
            </p>
          </div>
          <div className="footer-col">
            <h4>Specialties</h4>
            <ul>
              {EUROMED_DATA.SPECIALTIES.map((s) => (
                <li key={s.id}><a onClick={() => setRoute({ name: "specialties" })}>{s.name}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h4>Clinic</h4>
            <ul>
              <li><a onClick={() => setRoute({ name: "doctors" })}>Our doctors</a></li>
              <li><a onClick={() => setRoute({ name: "about" })}>About Euromed</a></li>
              <li><a onClick={() => setRoute({ name: "contact" })}>Contact & directions</a></li>
              <li><a>Before &amp; after</a></li>
              <li><a>Press</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Visit</h4>
            <ul>
              <li>Villa 611, Jumeirah Beach Road</li>
              <li>Umm Suqeim 1, Dubai</li>
              <li>P.O. Box 57394</li>
              <li style={{ marginTop: 10 }}><a href="tel:+97143945422">+971 4 394 5422</a></li>
              <li><a>info@euromedclinicdubai.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-legal">
          <span>© 2026 Euromed Clinic Center. All rights reserved.</span>
          <span className="dha">DHA Facility ID 0047513 · Licence no. <em style={{ opacity: 0.6, fontStyle: "normal" }}>pending verification</em></span>
          <span>Privacy · Terms · Cookies · Patient consent policy</span>
        </div>
      </div>
    </footer>
  );
}

function FAB({ onBook }) {
  return (
    <div className="fab-stack">
      <a className="fab whatsapp" href="https://api.whatsapp.com/send?phone=97148945000" target="_blank" rel="noreferrer">
        <Icon.WhatsApp size={16} /> <span className="lbl">WhatsApp</span>
      </a>
      <a className="fab" href="tel:+97143945422">
        <Icon.Phone size={14} /> <span className="lbl">+971 4 394 5422</span>
      </a>
      <button className="fab" onClick={onBook} style={{ background: "var(--ink)", color: "white", borderColor: "transparent" }}>
        <Icon.Sparkle size={14} /> <span className="lbl">Book consultation</span>
      </button>
    </div>
  );
}

window.Navbar = Navbar;
window.TrustBar = TrustBar;
window.Footer = Footer;
window.FAB = FAB;