// Shared header + footer + small primitives. Loaded on every page.

const NAV_ITEMS = [
  { label: "Research", href: "research.html" },
  { label: "Team", href: "team.html" },
  { label: "Publications", href: "#publications" },
  { label: "News", href: "#news" },
  { label: "Partners", href: "#partners" },
];

function LabMark({ size = 32 }) {
  // Custom mark: stylized double-helix dot pattern that reads as "Y" + DNA
  return (
    <div className="brand__mark" style={{ width: size, height: size }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 16 16" aria-hidden="true">
        <g fill="currentColor">
          <circle cx="3" cy="3" r="1.4" />
          <circle cx="13" cy="3" r="1.4" />
          <circle cx="8" cy="8" r="1.6" />
          <circle cx="3" cy="13" r="1.4" />
          <circle cx="13" cy="13" r="1.4" />
        </g>
        <g stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.55">
          <path d="M3 3 L8 8 L13 3" />
          <path d="M3 13 L8 8 L13 13" />
        </g>
      </svg>
    </div>
  );
}

function Brand() {
  return (
    <a href="index.html" className="brand">
      <LabMark />
      <span className="brand__name">
        <strong>BioAI Lab</strong>
        <em>Yan · UofG</em>
      </span>
    </a>
  );
}

function SiteHeader({ active }) {
  return (
    <header className="site-header">
      <div className="site-header__inner">
        <Brand />
        <nav className="nav" aria-label="Primary">
          {NAV_ITEMS.map(item => (
            <a
              key={item.label}
              href={item.href}
              className={active === item.label.toLowerCase() ? "active" : ""}
            >
              {item.label}
            </a>
          ))}
          <a href="mailto:yyan15@uoguelph.ca" className="nav__cta">Join us →</a>
        </nav>
      </div>
    </header>
  );
}

function SiteFooter() {
  return (
    <>
      <footer className="site-footer">
        <div className="site-footer__inner">
          <div className="site-footer__brand">
            <div className="brand" style={{ color: 'var(--cream-50)' }}>
              <LabMark />
              <span className="brand__name">
                <strong>BioAI Lab</strong>
                <em style={{ color: 'var(--moss-200)' }}>Yan · UofG</em>
              </span>
            </div>
            <p style={{ marginTop: 16 }}>
              Bioinformatics &amp; AI research at the School of Computer Science,
              University of Guelph. Genomics, healthcare, responsible AI.
            </p>
          </div>
          <div>
            <h4>Explore</h4>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="research.html">Research</a></li>
              <li><a href="team.html">Team</a></li>
              <li><a href="index.html#publications">Publications</a></li>
            </ul>
          </div>
          <div>
            <h4>Engage</h4>
            <ul>
              <li><a href="mailto:yyan15@uoguelph.ca">Join the lab</a></li>
              <li><a href="index.html#partners">Partner with us</a></li>
              <li><a href="index.html#news">News</a></li>
            </ul>
          </div>
          <div>
            <h4>Find us</h4>
            <ul>
              <li>School of Computer Science</li>
              <li>University of Guelph</li>
              <li>Reynolds Building, Guelph ON</li>
              <li><a href="mailto:yyan15@uoguelph.ca">yyan15@uoguelph.ca</a></li>
            </ul>
          </div>
        </div>
        <div className="site-footer__bottom">
          <span>© 2026 Bioinformatics &amp; AI Lab</span>
          <span>Designed for prospective students, collaborators &amp; partners.</span>
        </div>
      </footer>
    </>
  );
}

function ThemeBadge({ theme, active, onClick }) {
  const t = window.LAB.THEMES[theme];
  if (!t) return null;
  return (
    <button
      type="button"
      onClick={onClick}
      className={`tag tag--theme-${theme} ${active ? 'tag--active' : ''}`}
      style={{ cursor: onClick ? 'pointer' : 'default' }}
    >
      {t.short}
    </button>
  );
}

function MethodTag({ children, active, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`tag ${active ? 'tag--active' : ''}`}
    >
      {children}
    </button>
  );
}

Object.assign(window, { LabMark, Brand, SiteHeader, SiteFooter, ThemeBadge, MethodTag });