/* shell — Header (nav + lang + Mr. Wing + Trips/Admin) and Footer + mobile tab bar */

function Header() {
  const { t, toggle, lang } = useLang();
  const { nav, route, setWingOpen, user, logout } = useStore();
  const [scrolled, setScrolled] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", h, { passive: true }); h();
    return () => window.removeEventListener("scroll", h);
  }, []);
  const onHome = route === "home";
  const solid = scrolled || !onHome;

  const links = [
    { id: "flights", label: t("nav.flights") },
    { id: "hotels", label: t("nav.hotels") },
    { id: "corporate", label: t("nav.corporate") },
    { id: "about", label: t("nav.about") },
    { id: "support", label: t("nav.support") },
  ];

  return (
    <>
    <header style={{
      position: "fixed", top: 0, insetInline: 0, zIndex: 100, transition: "all .3s ease",
      background: solid ? "rgba(250,247,240,.9)" : "transparent",
      backdropFilter: solid ? "blur(16px)" : "none",
      borderBottom: "1px solid " + (solid ? "var(--line)" : "transparent"),
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
        <button onClick={() => nav("home")} aria-label="Thirdwing — home" style={{ background: "none", border: "none", cursor: "pointer", padding: 0 }}>
          <Logo size={21} dark={!solid} />
        </button>

        <nav className="hide-mobile" aria-label="Main navigation" style={{ display: "flex", gap: 2 }}>
          {links.map(l => (
            <button key={l.id} onClick={() => nav(l.id)}
              style={{
                background: "none", border: "none", cursor: "pointer", padding: "8px 14px", borderRadius: 100,
                fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 500, transition: "color .2s",
                color: route === l.id ? "var(--gold-d)" : (solid ? "var(--ink-2)" : "rgba(255,255,255,.92)"),
              }}>
              {l.label}
            </button>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <button onClick={toggle} aria-label="Switch language" title="Language"
            style={{ background: "none", border: "1px solid " + (solid ? "var(--line-2)" : "rgba(255,255,255,.4)"), color: solid ? "var(--ink)" : "#fff", borderRadius: 100, padding: "7px 13px", cursor: "pointer", fontFamily: lang === "en" ? "var(--arabic)" : "var(--sans)", fontWeight: 600, fontSize: 13.5 }}>
            {t("lang.toggle")}
          </button>
          <button className="btn btn-primary btn-sm hide-mobile" onClick={() => setWingOpen(true)} style={{ background: solid ? "var(--emerald)" : "rgba(255,255,255,.16)", border: solid ? "none" : "1px solid rgba(255,255,255,.35)" }}>
            <Icon name="chat" size={16} /> {t("wing.name")}
          </button>
          <button className="hide-mobile" onClick={() => nav("trips")} aria-label={t("nav.trips")} title={t("nav.trips")}
            style={{ background: "none", border: "none", cursor: "pointer", color: route === "trips" ? "var(--gold-d)" : (solid ? "var(--ink-3)" : "rgba(255,255,255,.7)"), display: "grid", placeItems: "center", padding: 6 }}>
            <Icon name="bag" size={18} />
          </button>
          <AccountMenu solid={solid} />
          <button className="show-mobile" onClick={() => setMobile(m => !m)} aria-label="Menu" aria-expanded={mobile} style={{ display: "none", background: "none", border: "none", cursor: "pointer", color: solid ? "var(--ink)" : "#fff" }}>
            <Icon name={mobile ? "x" : "menu"} size={24} />
          </button>
        </div>
      </div>
      {mobile && (
        <div className="show-mobile" style={{ display: "none", flexDirection: "column", padding: "8px 20px 18px", background: "var(--paper)", borderTop: "1px solid var(--line)" }}>
          {[...links, { id: "packages", label: t("nav.packages") }, { id: "trips", label: t("nav.trips") }].map(l => (
            <button key={l.id} onClick={() => { nav(l.id); setMobile(false); }} style={{ textAlign: "start", background: "none", border: "none", padding: "12px 4px", fontSize: 16, color: "var(--ink)", fontFamily: "var(--sans)", borderBottom: "1px solid var(--line)" }}>{l.label}</button>
          ))}
          {user
            ? <>
                <button onClick={() => { nav("profile"); setMobile(false); }} style={{ textAlign: "start", background: "none", border: "none", padding: "12px 4px", fontSize: 16, color: "var(--ink)", fontFamily: "var(--sans)", borderBottom: "1px solid var(--line)" }}>{t("nav.profile")}</button>
                <button onClick={() => { logout(); setMobile(false); }} style={{ textAlign: "start", background: "none", border: "none", padding: "12px 4px", fontSize: 16, color: "var(--danger)", fontFamily: "var(--sans)" }}>{t("nav.signout")}</button>
              </>
            : <button onClick={() => { nav("auth"); setMobile(false); }} style={{ textAlign: "start", background: "none", border: "none", padding: "12px 4px", fontSize: 16, color: "var(--emerald)", fontWeight: 600, fontFamily: "var(--sans)" }}>{t("nav.signin")}</button>}
        </div>
      )}
    </header>
    <style>{`@media (max-width:760px){.show-mobile{display:flex !important}}`}</style>
    </>
  );
}

function Footer() {
  const { t } = useLang();
  const { nav } = useStore();
  const cols = [
    { h: t("footer.col.book"), links: [["flights", {}, t("nav.flights")], ["hotels", {}, t("nav.hotels")], ["packages", {}, t("nav.packages")]] },
    { h: t("footer.col.company"), links: [["corporate", {}, t("nav.corporate")], ["about", {}, t("nav.about")], ["support", {}, t("nav.support")]] },
    { h: t("footer.col.legal"), links: [["legal", { tab: "cancellation" }, t("footer.cancelRefunds")], ["legal", { tab: "privacy" }, t("footer.privacy")], ["legal", { tab: "terms" }, t("footer.terms")], ["legal", { tab: "cookies" }, t("footer.cookies")], ["legal", { tab: "accessibility" }, t("footer.accessibility")]] },
  ];
  return (
    <footer style={{ background: "var(--ink)", color: "rgba(255,255,255,.7)", paddingTop: 76 }}>
      <div className="wrap">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr 1fr 1fr", gap: 40, paddingBottom: 56 }}>
          <div style={{ maxWidth: 320 }}>
            <Logo size={22} dark={true} />
            <p style={{ marginTop: 18, fontSize: 14.5, lineHeight: 1.65, color: "rgba(255,255,255,.6)" }}>{t("brand.tag")}. {t("hero.sub").slice(0, 96)}…</p>
            <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 9, fontSize: 12.5, color: "var(--gold-l)" }}>
              <Icon name="shield" size={16} /> {t("iata")}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold-l)", fontWeight: 600, marginBottom: 18 }}>{c.h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {c.links.map((l, i) => (
                  <button key={i} onClick={() => nav(l[0], l[1])} style={{ textAlign: "start", background: "none", border: "none", cursor: "pointer", color: "rgba(255,255,255,.7)", fontSize: 14.5, fontFamily: "var(--sans)", padding: 0, transition: "color .2s" }}
                    onMouseEnter={e => e.currentTarget.style.color = "#fff"} onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,.7)"}>{l[2]}</button>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="hr" style={{ background: "rgba(255,255,255,.12)" }}></div>
        <div className="footer-meta" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, padding: "26px 0 40px", fontSize: 13, color: "rgba(255,255,255,.5)" }}>
          <span>© 2026 Thirdwing. {t("footer.rights")}</span>
          <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon name="pin" size={14} /> {t("footer.address")}</span>
            <span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon name="mail" size={14} /> info@thirdwing.sa</span>
            <span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon name="phone" size={14} /> +966 59 702 3357</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function MobileTabBar() {
  const { route, nav, setWingOpen, isMobile } = useStore();
  const { t } = useLang();
  React.useEffect(() => {
    document.body.classList.toggle("has-tabbar", isMobile);
    return () => document.body.classList.remove("has-tabbar");
  }, [isMobile]);
  if (!isMobile) return null;
  const tabs = [
    { id: "home", icon: "globe", label: t("nav.home") },
    { id: "flights", icon: "plane", label: t("nav.flights") },
    { id: "wing", icon: "chat", label: t("wing.name"), fab: true },
    { id: "hotels", icon: "hotel", label: t("nav.hotels") },
    { id: "trips", icon: "bag", label: t("nav.trips") },
  ];
  return (
    <nav className="tabbar show" aria-label="Mobile navigation">
      {tabs.map(tb => {
        const active = route === tb.id;
        if (tb.fab) {
          return (
            <button key={tb.id} onClick={() => setWingOpen(true)} aria-label={tb.label}>
              <span className="tab-fab"><WingMark size={26} dark={true} /></span>
              <span style={{ marginTop: 2 }}>{tb.label}</span>
            </button>
          );
        }
        return (
          <button key={tb.id} className={active ? "active" : ""} onClick={() => nav(tb.id)} aria-current={active ? "page" : undefined}>
            <Icon name={tb.icon} size={21} stroke={active ? 2 : 1.7} />
            <span>{tb.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

Object.assign(window, { Header, Footer, MobileTabBar });