// Shared chrome: NavBar + Footer. Exports to window.
(function () {
  const { Icon } = window.PROTO;

  function NavBar({ brand, go, onJoin }) {
    const [scrolled, setScrolled] = React.useState(false);
    const [open, setOpen] = React.useState(false);
    const [progOpen, setProgOpen] = React.useState(false);
    const PROGRAMS = window.PROTO.PROGRAMS;
    React.useEffect(() => {
      const el = document.getElementById("scroller") || window;
      const onScroll = () => {
        const y = el === window ? window.scrollY : el.scrollTop;
        setScrolled(y > 12);
      };
      el.addEventListener("scroll", onScroll);
      return () => el.removeEventListener("scroll", onScroll);
    }, []);
    const nav = (target) => { setOpen(false); setProgOpen(false); go(target); };
    return (
      <nav className="nav" style={scrolled ? { boxShadow: "0 8px 30px rgba(0,0,0,.35)" } : null}>
        <div className="wrap nav-in">
          <div className="wm" onClick={() => nav({ view: "home" })}>{brand}</div>
          <div className="nav-links">
            <a onClick={() => nav({ view: "home", anchor: "takken" })}>Programma's</a>
            <a onClick={() => nav({ view: "home", anchor: "rooster" })}>Rooster</a>
            <a onClick={() => nav({ view: "home", anchor: "over" })}>Over ons</a>
            <a onClick={() => nav({ view: "home", anchor: "kosten" })}>Kosten</a>
          </div>
          <div className="nav-cta">
            <a className="btn btn-pri" onClick={onJoin}>Word lid</a>
            <button className="nav-burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
              <Icon name={open ? "close" : "menu"} size={22} />
            </button>
          </div>
        </div>
        {open && (
          <div className="nav-mobile">
            <button className="nm-row" onClick={() => setProgOpen((o) => !o)}>
              Programma's
              <Icon name="chev" size={18} style={{ transform: progOpen ? "rotate(180deg)" : "none", transition: "transform .2s" }} />
            </button>
            {progOpen && (
              <div className="nm-sub">
                {PROGRAMS.map((p) => (
                  <a key={p.key} onClick={() => nav({ view: "program", key: p.key })}>
                    <span className="dot" style={{ background: p.accent }}></span>{p.name}
                  </a>
                ))}
              </div>
            )}
            <a onClick={() => nav({ view: "home", anchor: "rooster" })}>Rooster</a>
            <a onClick={() => nav({ view: "home", anchor: "over" })}>Over ons</a>
            <a onClick={() => nav({ view: "home", anchor: "kosten" })}>Kosten</a>
          </div>
        )}
      </nav>
    );
  }

  function Footer({ brand, go }) {
    const PROGRAMS = window.PROTO.PROGRAMS;
    return (
      <footer className="foot">
        <div className="wrap">
          <div className="foot-grid">
            <div>
              <div className="wm" style={{ fontSize: 30, marginBottom: 14 }}>{brand}</div>
              <p style={{ color: "var(--mut)", maxWidth: "34ch", margin: "0 0 18px" }}>
                Eén beweegclub voor elk lijf en elke leeftijd. Van Hyrox tot yoga, van kracht & balans tot fitness.
              </p>
              <div style={{ display: "flex", gap: 10, alignItems: "center", color: "var(--mut)", fontSize: 15 }}>
                <Icon name="pin" size={18} /> De Langer Ring 10, Anna Paulowna
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center", color: "var(--mut)", fontSize: 15, marginTop: 8 }}>
                <Icon name="phone" size={18} /> David Roovers · 06-22233658
              </div>
            </div>
            <div>
              <h4>Programma's</h4>
              {PROGRAMS.map((p) => (
                <a className="fl" key={p.key} onClick={() => go({ view: "program", key: p.key })}>{p.name}</a>
              ))}
            </div>
            <div>
              <h4>Info</h4>
              <a className="fl" onClick={() => go({ view: "home", anchor: "rooster" })}>Rooster</a>
              <a className="fl" onClick={() => go({ view: "home", anchor: "over" })}>Over ons</a>
              <a className="fl" onClick={() => go({ view: "home", anchor: "kosten" })}>Kosten & lidmaatschap</a>
              <a className="fl" href="https://ftf.wodup.nl" target="_blank">Online inschrijven ↗</a>
              <a className="fl" onClick={() => go({ view: "home", anchor: "contact" })}>Contact</a>
            </div>
          </div>
          <div className="foot-bottom">
            <span>© {new Date().getFullYear()} {brand} — voorheen Fit To Fight</span>
            <span>Anna Paulowna · Noord-Holland</span>
          </div>
        </div>
      </footer>
    );
  }

  window.PROTO.NavBar = NavBar;
  window.PROTO.Footer = Footer;

  // Treated image: applies the unified duotone + grain + shade.
  function Media({ id, w = 1200, alt = "", className = "", style, zoom = false }) {
    return (
      <div className={"media" + (zoom ? " zoom" : "") + (className ? " " + className : "")} style={style}>
        <img src={window.PROTO.img(id, w)} alt={alt} />
        <div className="duo"></div>
        <div className="grain"></div>
        <div className="shade"></div>
      </div>
    );
  }
  window.PROTO.Media = Media;
})();