// ============== nav + footer ==============

function ThemeToggle({ light, onToggle }) {
  return (
    <button
      type="button"
      className="theme-toggle"
      onClick={onToggle}
      aria-label={light ? "Switch to dark mode" : "Switch to light mode"}
      title={light ? "Switch to dark" : "Switch to light"}
    >
      {light ? <Icon.Moon size={16} /> : <Icon.Sun size={16} />}
    </button>
  );
}

function SocialLink({ href, label, children }) {
  return (
    <a className="social-link" href={href} target="_blank" rel="noopener noreferrer" aria-label={label} title={label}>
      {children}
    </a>
  );
}

function UserMenu({ user, go }) {
  const { logout } = useAuth();
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const dashTarget = user.role === "candidate" ? "dashboard" : "admin";
  const initials = (user.email || "").slice(0, 2).toUpperCase();

  return (
    <div ref={ref} className="user-menu">
      <button className="user-trigger" onClick={() => setOpen((o) => !o)} aria-haspopup="menu" aria-expanded={open}>
        <span className="user-ava">{initials}</span>
      </button>
      {open && (
        <div className="user-pop" role="menu">
          <div className="user-pop-head">
            <div className="user-pop-email">{user.email}</div>
            <div className="user-pop-role mono">{user.role}</div>
          </div>
          <button className="user-pop-item" onClick={() => { setOpen(false); go(dashTarget); }}>
            {user.role === "candidate" ? "Dashboard" : "Control room"}
          </button>
          <button className="user-pop-item" onClick={() => { setOpen(false); logout(); go("home"); }}>Sign out</button>
        </div>
      )}
    </div>
  );
}

function Nav({ route, go, light, onToggleTheme, user }) {
  const links = [
    { id: "home", label: "Home" },
    { id: "jobs", label: "Roles" },
    { id: "companies", label: "Companies" },
    { id: "candidates", label: "Candidates" },
    { id: "events", label: "Events", external: "https://lu.ma/web3joe" },
    { id: "about", label: "About" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="logo" href="#home" onClick={(e) => { e.preventDefault(); go("home"); }} aria-label="Web3JOE">
          <img src="assets/web3joe-logo-white.png" alt="Web3JOE" />
        </a>
        <div className="nav-links">
          {links.map((l) => (
            l.external ? (
              <a key={l.id} href={l.external} target="_blank" rel="noopener noreferrer" className="nav-link">{l.label}</a>
            ) : (
              <a key={l.id} href={`#${l.id}`}
                className={`nav-link ${route === l.id ? "is-active" : ""}`}
                onClick={(e) => { e.preventDefault(); go(l.id); }}>{l.label}</a>
            )
          ))}
        </div>
        <div className="nav-cta">
          <div className="nav-socials">
            <SocialLink href="https://x.com/Web3jobopps" label="X / Twitter"><Icon.X size={14} /></SocialLink>
            <SocialLink href="https://www.linkedin.com/company/web3joe/" label="LinkedIn"><Icon.LinkedIn size={14} /></SocialLink>
            <SocialLink href="https://t.me/web3jobopps" label="Telegram"><Icon.Telegram size={14} /></SocialLink>
          </div>
          <ThemeToggle light={light} onToggle={onToggleTheme} />
          {user ? (
            <UserMenu user={user} go={go} />
          ) : (
            <>
              <a href="#login" className="btn btn--quiet" onClick={(e) => { e.preventDefault(); go("login"); }}>Sign in</a>
              <a href="#companies" className="btn btn--primary" onClick={(e) => { e.preventDefault(); go("companies"); }}>
                Start hiring <Icon.Arrow />
              </a>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <img className="footer-logo" src="assets/web3joe-logo-white.png" alt="Web3JOE" style={{ height: 56, width: "auto", marginLeft: -4 }} />
            <div className="body" style={{ marginTop: 20, maxWidth: 360 }}>
              Caffeinate Your Web3 Talent or Job Search.
            </div>
          </div>
          <div className="footer-col">
            <h5>Platform</h5>
            <ul>
              <li><a href="#jobs" onClick={(e) => { e.preventDefault(); go("jobs"); }}>Open roles</a></li>
              <li><a href="#companies" onClick={(e) => { e.preventDefault(); go("companies"); }}>For companies</a></li>
              <li><a href="#candidates" onClick={(e) => { e.preventDefault(); go("candidates"); }}>For candidates</a></li>
              <li><a href="https://lu.ma/web3joe" target="_blank" rel="noopener noreferrer">Events</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Account</h5>
            <ul>
              <li><a href="#login" onClick={(e) => { e.preventDefault(); go("login"); }}>Sign in</a></li>
              <li><a href="#register" onClick={(e) => { e.preventDefault(); go("register"); }}>Create account</a></li>
              <li><a href="#dashboard" onClick={(e) => { e.preventDefault(); go("dashboard"); }}>Dashboard</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); go("about"); }}>About</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Connect</h5>
            <ul>
              <li><a href="https://x.com/Web3jobopps" target="_blank" rel="noopener noreferrer">X</a></li>
              <li><a href="https://www.linkedin.com/company/web3joe/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
              <li><a href="https://t.me/web3jobopps" target="_blank" rel="noopener noreferrer">Telegram</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 HEXACO LLC · ALL RIGHTS RESERVED</span>
          <span>NEW YORK · LISBON · SINGAPORE</span>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Footer = Footer;