/* Industrial Union UI Kit — chrome: Nav, CartDrawer, Newsletter, Footer */
const { Label: LC, Bracket: BC, BracketRow: BRC, ArrowLink: ALC, Pill: PC, Figure: FC, Wordmark: WMC, Brand: BRAND, Money: MNY, useState: uSC } = window;

function Nav({ view, onNav, onSearch, searchOpen }) {
  const [menuOpen, setMenuOpen] = uSC(false);
  const links = [
    { id: "shop", label: "SHOP" },
    { id: "workshop", label: "WORKSHOP" },
    { id: "about", label: "ABOUT" },
  ];
  const goAndClose = (id) => { setMenuOpen(false); onNav(id); };
  return (
    <header className="sk-nav">
      <div className="sk-nav-inner">
        <BRAND onClick={() => goAndClose("home")} size={30} />
        <nav className="sk-nav-links">
          {links.map((l) => (
            <button key={l.id}
              className={"iu-label sk-nav-link sk-linkbtn" + (view === l.id ? " is-active" : "")}
              onClick={() => onNav(l.id)}>{l.label}</button>
          ))}
        </nav>
        <div className="sk-nav-right">
          <button className="iu-label sk-nav-link sk-linkbtn" onClick={onSearch}>
            {searchOpen ? "CLOSE" : "SEARCH"}
          </button>
          <a className="iu-label sk-nav-link sk-linkbtn sk-nav-inquire" href="mailto:contact@industrialunion.com?subject=Inquiry">
            INQUIRE
          </a>
          <button className="iu-label sk-nav-link sk-linkbtn sk-nav-menu-btn" onClick={() => setMenuOpen((s) => !s)}
                  aria-label="Menu">
            {menuOpen ? "CLOSE" : "MENU"}
          </button>
        </div>
      </div>
      {menuOpen && (
        <nav className="sk-nav-mobile">
          {links.map((l) => (
            <button key={l.id}
              className={"iu-label sk-nav-mobile-link sk-linkbtn" + (view === l.id ? " is-active" : "")}
              onClick={() => goAndClose(l.id)}>{l.label}</button>
          ))}
          <a className="iu-label sk-nav-mobile-link" href="mailto:contact@industrialunion.com?subject=Inquiry">
            INQUIRE
          </a>
        </nav>
      )}
      {searchOpen && (
        <div className="sk-search">
          <BRC cols="minmax(150px,1fr) 3fr">
            <LC soft>SEARCH</LC>
            <input className="iu-field sk-search-input" autoFocus
                   placeholder="SEARCH — DOUBLE KNEE, TYPE 2 JACKET, CHAMBRAY…" />
          </BRC>
        </div>
      )}
    </header>
  );
}

function Newsletter() {
  const [done, setDone] = uSC(false);
  const [email, setEmail] = uSC("");
  return (
    <section className="sk-section sk-newsletter">
      <BRC cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BC /><BC /></BRC>
      <BRC cols="minmax(150px,1fr) 3fr" className="sk-section-head">
        <LC style={{ textAlign: "center" }}>{"     STAY ON THE TOOLS"}</LC>
        <div>
          <LC style={{ display: "block", marginBottom: 28 }}>JOIN THE UNION — RELEASES &amp; RESTOCKS</LC>
          {done ? (
            <p className="iu-body sk-news-thanks"><span className="sk-arrow">↳</span>You're on the roster. Welcome to the Union.</p>
          ) : (
            <form className="sk-news-form" onSubmit={(e) => {
              e.preventDefault();
              const subject = "Newsletter Signup";
              const body = "New mailing list signup:\n\nEmail: " + email;
              window.location.href = "mailto:contact@industrialunion.com?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
              setDone(true);
            }}>
              <input className="iu-field sk-news-input" placeholder="EMAIL" type="email" required
                     value={email} onChange={(e) => setEmail(e.target.value)} />
              <button type="submit" className="iu-link iu-link--underline sk-news-ok">
                <span className="sk-arrow">→</span><span>SIGN UP</span>
              </button>
            </form>
          )}
        </div>
      </BRC>
    </section>
  );
}

function Footer({ onNav, onCategory }) {
  return (
    <footer className="sk-footer iu-invert">
      <BRC cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 26 }}>
        <div className="iu-bracket sk-foot-bracket" />
        <div className="iu-bracket sk-foot-bracket" />
      </BRC>
      <div className="sk-footer-top">
        <div className="sk-footer-brandcol">
          <WMC light variant="lockup" style={{ width: 200, height: 165 }} />
          <p className="iu-label sk-footer-tag">ONE SHOP, ONE UNION</p>
        </div>
        <div className="sk-footer-cols">
          <div className="sk-footer-col">
            <span className="iu-label iu-label--soft sk-footer-h">SHOP</span>
            {window.CATEGORIES.map((c) => (
              <button key={c.id} className="iu-label sk-foot-link sk-linkbtn" onClick={() => onCategory(c.id)}>{c.short}</button>
            ))}
          </div>
          <div className="sk-footer-col">
            <span className="iu-label iu-label--soft sk-footer-h">WORKSHOP</span>
            <button className="iu-label sk-foot-link sk-linkbtn" onClick={() => onNav("workshop")}>OUR STORY</button>
            <button className="iu-label sk-foot-link sk-linkbtn" onClick={() => onNav("about")}>MADE IN L.A.</button>
            <a className="iu-label sk-foot-link sk-linkbtn" href="#" onClick={(e) => { e.preventDefault(); onNav("about"); }}>REPAIRS</a>
          </div>
        </div>
      </div>
      <div className="sk-footer-mid">
        <a className="iu-link sk-foot-contact" href="mailto:contact@industrialunion.com"><span className="sk-arrow">↘</span>CONTACT@INDUSTRIALUNION.COM</a>
        <a className="iu-link sk-foot-contact" href="https://instagram.com/industrialunion" target="_blank" rel="noopener noreferrer">
          <span className="sk-arrow">↘</span>@INDUSTRIALUNION
        </a>
        <span className="iu-label sk-foot-soft sk-foot-addr">LOS ANGELES, CA · EST. 2026</span>
      </div>
      <div className="sk-footer-bot">
        <span className="iu-label sk-foot-soft">© 2026 INDUSTRIAL UNION.</span>
        <span className="sk-foot-legal">
          <a className="iu-label sk-foot-soft sk-foot-link" href="#">TERMS</a>
          <a className="iu-label sk-foot-soft sk-foot-link" href="#">SHIPPING &amp; RETURNS</a>
          <a className="iu-label sk-foot-soft sk-foot-link" href="#">PRIVACY</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Newsletter, Footer });