/* global React */
const { useState, useEffect } = React;

function Brand({ onDark = false }) {
  return (
    <a href="index.html" className="brand" aria-label="Society of Digital Psychiatry — home">
      <img
        src="images/sodp-icon.webp"
        alt="Society of Digital Psychiatry"
        style={{ filter: onDark ? "brightness(0) invert(1)" : "none" }}
      />
    </a>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  const links = [
    { to: "index.html", id: "home", label: "Home" },
    { to: "webinars.html", id: "webinars", label: "Webinars" },
    { to: "news.html", id: "news", label: "News" },
    { to: "about.html", id: "about", label: "About" },
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <Brand />
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            <a key={l.id} href={l.to} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
          <a href="apply.html" className="nav-cta">Apply to Join</a>
        </nav>
        <button
          className="nav-toggle"
          data-open={open}
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span /><span /><span />
        </button>
      </div>
      <div className="nav-mobile" data-open={open}>
        {links.map(l => (
          <a key={l.id} href={l.to} className={active === l.id ? "active" : ""}>{l.label}</a>
        ))}
        <a href="apply.html" className="cta">Apply to Join</a>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <span className="name">Society of Digital Psychiatry</span>
            <p>An international community linking clinicians, researchers, and technologists at the frontier of digital mental health.</p>
          </div>
          <div>
            <h4>Pages</h4>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="webinars.html">Webinars</a></li>
              <li><a href="news.html">News</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="apply.html">Apply to Join</a></li>
            </ul>
          </div>
          <div>
            <h4>Journal</h4>
            <ul>
              <li><a href="https://mental.jmir.org" target="_blank" rel="noreferrer">JMIR Mental Health</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:info@sodpsych.com">info@sodpsych.com</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Society of Digital Psychiatry</span>
          <span>sodpsych.com</span>
        </div>
      </div>
    </footer>
  );
}

function Tag({ children, kind = "violet" }) {
  return <span className={`tag tag-${kind}`}>{children}</span>;
}

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