/* chrome.jsx — navbar, footer, theme toggle, mobile nav */
(function () {
  const { useState } = React;
  const { Wordmark, cx } = window;

  const NAV = [
    { key: "recipes", label: "Recipes" },
    { key: "ingridients", label: "Ingredients" },
    { key: "techniques", label: "Techniques" },
  ];

  function ThemeToggle({ dark, onToggle }) {
    const { Sun, Moon } = window.Icons;
    return (
      <button className="btn btn-ghost btn-icon theme-btn" onClick={onToggle} aria-label="Toggle theme" title="Toggle light / dark">
        {dark ? <Sun size={18} /> : <Moon size={18} />}
      </button>
    );
  }

  function Navbar({ route, go, openCmd, dark, onToggleTheme }) {
    const { Search, Menu, X, Command } = window.Icons;
    const [open, setOpen] = useState(false);
    const active = route.name === "section" ? route.section
      : route.name === "recipe" ? "recipes"
      : route.name === "article" ? route.section
      : route.name;

    return (
      <header className="nav">
        <div className="container">
          <div className="nav-inner">
            <Wordmark onClick={() => go({ name: "home" })} />

            <nav className="row hide-mobile" style={{ gap: "1.4rem", marginLeft: ".6rem" }}>
              {NAV.map((n) => (
                <a key={n.key} className={cx("nav-link", active === n.key && "active")}
                   onClick={() => go({ name: "section", section: n.key })}>{n.label}</a>
              ))}
            </nav>

            <div className="grow" />

            <button className="input hide-mobile" onClick={openCmd}
              style={{ width: 230, height: "2.4rem", cursor: "pointer", color: "hsl(var(--muted-foreground))" }}>
              <Search size={16} />
              <span style={{ flex: 1, textAlign: "left", fontSize: ".88rem" }}>Search recipes…</span>
              <span className="kbd"><Command size={11} />K</span>
            </button>

            <button className="btn btn-ghost btn-icon show-mobile" onClick={openCmd} aria-label="Search">
              <Search size={19} />
            </button>

            <ThemeToggle dark={dark} onToggle={onToggleTheme} />

            <button className="btn btn-ghost btn-icon show-mobile" onClick={() => setOpen((v) => !v)} aria-label="Menu">
              {open ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>
        </div>

        {open && (
          <div className="show-mobile" style={{ borderTop: "1px solid hsl(var(--border))", padding: ".6rem 0", background: "hsl(var(--background))" }}>
            <div className="container col" style={{ gap: ".1rem" }}>
              {NAV.map((n) => (
                <a key={n.key} className="btn btn-ghost" style={{ justifyContent: "flex-start", height: "2.8rem" }}
                   onClick={() => { setOpen(false); go({ name: "section", section: n.key }); }}>{n.label}</a>
              ))}
            </div>
          </div>
        )}
      </header>
    );
  }

  function Footer({ go }) {
    const { Github, Mail, Egg } = window.Icons;
    const { Logo } = window;
    return (
      <footer className="footer">
        <div className="container" style={{ padding: "3rem clamp(1.1rem,4vw,2.2rem) 2.2rem" }}>
          <div className="spread wrap" style={{ alignItems: "flex-start", gap: "2rem" }}>
            <div style={{ maxWidth: 320 }}>
              <div className="row" style={{ gap: ".55rem", marginBottom: ".7rem" }}>
                <Logo size={26} />
                <strong style={{ letterSpacing: "-.02em" }}>AmosCooks</strong>
              </div>
              <p className="muted" style={{ fontSize: ".9rem", lineHeight: 1.6 }}>
                A private cookbook of things worth remembering — shared with friends when they ask.
              </p>
            </div>

            <div className="row wrap" style={{ gap: "3rem", alignItems: "flex-start" }}>
              <div className="col" style={{ gap: ".55rem" }}>
                <span className="eyebrow" style={{ marginBottom: ".2rem" }}>Browse</span>
                {NAV.map((n) => (
                  <a key={n.key} className="muted" style={{ fontSize: ".9rem", cursor: "pointer" }}
                     onClick={() => go({ name: "section", section: n.key })}>{n.label}</a>
                ))}
              </div>
              <div className="col" style={{ gap: ".55rem" }}>
                <span className="eyebrow" style={{ marginBottom: ".2rem" }}>Site</span>
                <a className="muted" style={{ fontSize: ".9rem", cursor: "pointer" }} onClick={() => go({ name: "legal", which: "impressum" })}>Impressum</a>
                <a className="muted" style={{ fontSize: ".9rem", cursor: "pointer" }} onClick={() => go({ name: "legal", which: "privacy" })}>Data protection</a>
              </div>
            </div>
          </div>

          <hr className="sep" style={{ margin: "2rem 0 1.2rem" }} />
          <div className="spread wrap" style={{ gap: ".8rem" }}>
            <span className="muted row" style={{ fontSize: ".82rem", gap: ".4rem" }}>© 2024 Amos</span>
            <div className="row" style={{ gap: ".3rem" }}>
              <a className="btn btn-ghost btn-icon btn-sm" title="GitHub"><Github size={17} /></a>
              <a className="btn btn-ghost btn-icon btn-sm" title="Email"><Mail size={17} /></a>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  Object.assign(window, { Navbar, Footer });
})();