/* Trepa't — Navegación: header sticky (escritorio) + píldora flotante (móvil) */
const { Button, IconButton } = window.TrepaTDesignSystem_f8c9ea;

const LANGS = ["ES", "VAL", "EN"];

function Nav({ page, lang, setLang, go }) {
  const t = window.TPT_I18N[lang];
  const [condensed, setCondensed] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const [sheet, setSheet] = React.useState(false);
  const last = React.useRef(0);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY || 0;
      setCondensed(y > 40);
      if (y > 240 && y > last.current) setHidden(true);
      else setHidden(false);
      last.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  window.useLucide(page + lang + sheet);

  const allLinks = t.nav.concat(t.nav_extra);

  const nav = (id) => { setSheet(false); go(id); };

  return (
    <React.Fragment>
      {/* ---------- ESCRITORIO ---------- */}
      <header className={"nav" + (condensed ? " is-condensed" : "")}>
        <div className="nav__bar">
          <a className="nav__brand" href="#home" onClick={(e) => { e.preventDefault(); nav("home"); }} aria-label="Trepa't · Inicio">
            <img className="nav__seal" src={window.TPT_ASSET + "wordmark-circle-cream.png"} alt="Trepa't Espai d'Escalada" />
          </a>
          <nav className="nav__links">
            {t.nav.map(([label, id]) => (
              <a key={id} href={"#" + id} className={"nav__link" + (page === id ? " is-active" : "")}
                 onClick={(e) => { e.preventDefault(); nav(id); }}>{label}</a>
            ))}
          </nav>
          <div className="nav__actions">
            <div className="nav__lang" role="group" aria-label="ES / VAL / EN">
              {LANGS.map((l) => (
                <button key={l} type="button" className={lang === l ? "is-on" : ""}
                  aria-pressed={lang === l} onClick={() => setLang(l)}>{l}</button>
              ))}
            </div>
            <Button variant="primary" size="sm" onClick={() => {}} title="Próximamente">{t.cta_register}</Button>
          </div>
        </div>
      </header>

      {/* ---------- MÓVIL: píldora flotante + chips ---------- */}
      <div className={"navm" + (condensed ? " is-condensed" : "") + (hidden ? " is-hidden" : "")}>
        <div className="navm__pill">
          <a className="navm__brand" href="#home" onClick={(e) => { e.preventDefault(); nav("home"); }}>
            <img src={window.TPT_ASSET + "wordmark-circle-cream.png"} alt="Trepa't" />
            <b>Trepa't</b>
          </a>
          <button className="navm__reg" onClick={() => {}}>{t.cta_register}</button>
          <button className="navm__toggle" aria-label={t.cta_menu} onClick={() => setSheet(true)}>
            <i data-lucide="menu"></i>
          </button>
        </div>
        <div className="navm__chips">
          {allLinks.map(([label, id]) => (
            <button key={id} className={"navm__chip" + (page === id ? " is-active" : "")} onClick={() => nav(id)}>{label}</button>
          ))}
        </div>
      </div>

      {sheet && (
        <div className="navm__sheet" onClick={() => setSheet(false)}>
          <div className="navm__card" onClick={(e) => e.stopPropagation()}>
            {allLinks.map(([label, id]) => (
              <a key={id} href={"#" + id} className={page === id ? "is-active" : ""}
                 onClick={(e) => { e.preventDefault(); nav(id); }}>
                {label}<i data-lucide="arrow-right"></i>
              </a>
            ))}
            <div className="navm__sheet-foot">
              <div className="nav__lang" role="group" aria-label="ES / VAL / EN" style={{ alignSelf: "center" }}>
                {LANGS.map((l) => (
                  <button key={l} type="button" className={lang === l ? "is-on" : ""}
                    aria-pressed={lang === l} onClick={() => setLang(l)}>{l}</button>
                ))}
              </div>
              <Button variant="primary" size="sm" block onClick={() => setSheet(false)}>{t.cta_register}</Button>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}
window.Nav = Nav;