// Nav.jsx — Sticky pill nav + mobile drawer

function TgNav({ view, setView, city, setCity, onOpenQuiz, openCityPicker, setOpenCityPicker }) {
  const [drawer, setDrawer] = React.useState(false);
  const links = [
    { id: "home",      label: "Home" },
    { id: "about",     label: "About" },
    { id: "events",    label: "Events" },
    { id: "community", label: "Community" },
    { id: "merch",     label: "Merch" },
  ];
  const cityObj = window.TG_CITIES.find(c => c.id === city) || window.TG_CITIES[0];

  return (
    <React.Fragment>
      <nav className="tg-nav">
        <button className="tg-nav__brand" onClick={() => setView("home")}>
          <img src="assets/logos/primary.png" alt="Team Girl" />
        </button>
        <div className="tg-nav__links">
          {links.map(l => (
            <button key={l.id}
              className={view === l.id ? "is-active" : ""}
              onClick={() => setView(l.id)}>{l.label}</button>
          ))}
        </div>
        <div className="tg-nav__right">
          <button className="tg-nav__city" onClick={() => setOpenCityPicker(true)}>
            <span className="dot" style={{ background: cityObj.color }}></span>
            {cityObj.name}
          </button>
          <button className="tg-nav__cta" onClick={onOpenQuiz}>Take the quiz →</button>
          <button className="tg-nav__menu" onClick={() => setDrawer(true)}>Menu</button>
        </div>
      </nav>

      {drawer && (
        <div className="tg-drawer">
          <div className="tg-drawer__top">
            <img src="assets/logos/primary.png" alt="Team Girl" />
            <button className="tg-drawer__close" onClick={() => setDrawer(false)}>✕</button>
          </div>
          <div className="tg-drawer__links">
            {links.map(l => (
              <button key={l.id}
                className={view === l.id ? "is-active" : ""}
                onClick={() => { setView(l.id); setDrawer(false); }}>{l.label}</button>
            ))}
            <button onClick={() => { onOpenQuiz(); setDrawer(false); }} style={{ color: "var(--tg-magenta)" }}>
              Take the Quiz <span style={{ fontFamily: "var(--font-script)", textTransform: "none", fontWeight: 400, fontSize: 32 }}>→</span>
            </button>
          </div>
          <div className="tg-drawer__foot">
            <button className="btn btn--ink btn--sm" onClick={() => { setOpenCityPicker(true); setDrawer(false); }}>City: {cityObj.name}</button>
          </div>
        </div>
      )}

      {openCityPicker && <CityPickerModal city={city} setCity={setCity} onClose={() => setOpenCityPicker(false)} />}
    </React.Fragment>
  );
}

function CityPickerModal({ city, setCity, onClose }) {
  return (
    <div className="tg-modal-bg" onClick={onClose}>
      <div className="tg-modal" style={{ gridTemplateColumns: "1fr", maxWidth: 720 }} onClick={(e) => e.stopPropagation()}>
        <div className="tg-modal__body" style={{ padding: 36 }}>
          <button className="tg-modal__close" style={{ position: "absolute", top: 16, right: 16 }} onClick={onClose}>✕</button>
          <div className="tg-modal__cat">✦ Pick your city</div>
          <h2 className="tg-modal__title">Where are <span style={{ fontFamily: "var(--font-script)", textTransform: "none", color: "var(--tg-magenta)", fontWeight: 400, fontSize: "0.7em" }}>you</span> based?</h2>
          <p>Pick a city and we'll show you what's on this week — and let you know first when we land somewhere new.</p>
          <div className="tg-prefs" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {window.TG_CITIES.map(c => (
              <button key={c.id}
                className={city === c.id ? "is-selected" : ""}
                onClick={() => { setCity(c.id); onClose(); }}>
                <span className="emoji" style={{ width: 14, height: 14, borderRadius: 999, background: c.color, display: "inline-block" }}></span>
                {c.name}
                <span style={{ display: "block", fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: 11, textTransform: "none", letterSpacing: 0, marginTop: 6, opacity: 0.7 }}>{c.count} on this month</span>
              </button>
            ))}
            <button onClick={() => { onClose(); }}>
              <span className="emoji">+</span>
              Other city
              <span style={{ display: "block", fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: 11, textTransform: "none", letterSpacing: 0, marginTop: 6, opacity: 0.7 }}>We'll holler when we land.</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TgNav = TgNav;