/* Sentosa Marketplace - Buyer Portal chrome: TopBar + Footer */

function TopBar({ itinCount, onNav, onLogout, query, setQuery, active }) {
  const { t } = useLang();
  const links = [["catalogue", t("nav_catalogue")], ["ai", t("nav_ai")],
                 ["mice", t("nav_mice")], ["bookings", t("nav_bookings")]];
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 20 }}>
      <GovBand />
      <header style={{ background: "var(--black)", color: "#fff" }}>
        <div className="sm-topbar" style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "0 24px", height: 68, display: "flex", alignItems: "center", gap: 24 }}>
          {/* Brand lockup: the Sentosa mark carries the masterbrand, the chip says which
              surface you are on. Seller and admin use the same pattern. */}
          <div style={{ display: "flex", alignItems: "center", gap: 10, flex: "none" }}>
            <button onClick={() => onNav("catalogue")}
              style={{ background: "none", border: 0, cursor: "pointer", padding: 0, display: "flex" }}
              aria-label="Sentosa B2B Marketplace home">
              <Logo height={26} href={null} />
            </button>
            <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".04em", color: "var(--orange-300)",
              border: "1px solid #3a3a3a", borderRadius: "var(--radius-sm)", padding: "2px 6px" }}>BUYER</span>
          </div>
          <div className="sm-search" style={{ position: "relative", flex: 1, maxWidth: 460 }}>
            <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", display: "flex" }}><Icon name="search" size={18} color="#9A9A9A" /></span>
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder={t("search")}
              style={{ width: "100%", boxSizing: "border-box", height: 42, padding: "0 12px 0 38px", borderRadius: "var(--radius-md)",
                border: "1.5px solid #3a3a3a", background: "#262626", color: "#fff", fontSize: 14.5, fontFamily: "var(--font-sans)", outline: "none" }} />
          </div>
          <nav style={{ display: "flex", gap: 4, marginLeft: "auto" }}>
            {links.map(([k, label]) => (
              <button key={k} onClick={() => onNav(k)} style={{ background: "none", border: 0, cursor: "pointer", color: active === k ? "#fff" : "#C9C9C9",
                fontFamily: "var(--font-sans)", fontSize: 14.5, fontWeight: active === k ? 600 : 500, padding: "8px 12px", borderRadius: "var(--radius-sm)",
                borderBottom: active === k ? "2px solid var(--orange-500)" : "2px solid transparent" }}>{label}</button>
            ))}
          </nav>
          <LangMenu />
          <button onClick={() => onNav("itinerary")} aria-label={`${t("cart")}, ${itinCount}`}
            style={{ position: "relative", background: "#262626", border: "1.5px solid #3a3a3a", borderRadius: "var(--radius-md)", width: 44, height: 44, cursor: "pointer", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="shopping-cart" size={20} />
            {itinCount > 0 && <span style={{ position: "absolute", top: -7, right: -7, background: "var(--action)", color: "#fff", fontSize: 11, fontWeight: 700, minWidth: 20, height: 20, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 5px", border: "2px solid var(--black)" }}>{itinCount}</span>}
          </button>
          <div style={{ display: "flex", alignItems: "center", gap: 9, paddingLeft: 6, borderLeft: "1px solid #3a3a3a" }}>
            <div style={{ width: 34, height: 34, borderRadius: 999, background: "var(--action)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>WT</div>
            <div style={{ lineHeight: 1.25 }}>
              <div className="sm-account-name" style={{ fontSize: 13, fontWeight: 600 }}>Wanderlust Travel</div>
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                <a href="../../index.html" style={{ color: "#9A9A9A", fontSize: 12, textDecoration: "none" }}>{t("home")}</a>
                <span aria-hidden="true" style={{ color: "#9A9A9A", fontSize: 11 }}>·</span>
                <button onClick={onLogout} style={{ background: "none", border: 0, padding: 0, color: "#9A9A9A", fontSize: 12, cursor: "pointer", fontFamily: "var(--font-sans)" }}>{t("signout")}</button>
              </div>
            </div>
          </div>
        </div>
      </header>
    </div>
  );
}

function Footer() {
  const cols = [
    ["Marketplace", ["Catalogue", "MICE venues", "Trade rates", "New products"]],
    ["Support", ["Help centre", "Contact SDC", "Accessibility", "Service status"]],
    ["Legal", ["Terms of use", "Privacy policy", "Personal data protection", "Image credits"]],
  ];
  return (
    <footer style={{ background: "var(--black)", color: "#C9C9C9", marginTop: 48 }}>
      <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "40px 24px 28px", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 32 }}>
        <div>
          <Logo height={24} />
          <p style={{ fontSize: 13, lineHeight: 1.6, marginTop: 14, maxWidth: 260 }}>The official B2B trade marketplace for Sentosa island products, operated by Sentosa Development Corporation.</p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#fff", marginBottom: 12 }}>{h}</div>
            {items.map(i => <div key={i} style={{ fontSize: 13.5, padding: "5px 0" }}><a href="#" onClick={e=>e.preventDefault()} style={{ color: "#C9C9C9", textDecoration: "none" }}>{i}</a></div>)}
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid #333", padding: "16px 24px", maxWidth: "var(--maxw)", margin: "0 auto", display: "flex", justifyContent: "space-between", fontSize: 12.5, flexWrap: "wrap", gap: 8 }}>
        <span>© 2026 Sentosa Development Corporation. All rights reserved.</span>
        <span style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="shield-check" size={14} color="#9A9A9A" />WCAG 2.1 AA · Hosted in Singapore (AWS)</span>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Footer });