function SunIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="4"/>
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
    </svg>
  );
}
function MoonIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
    </svg>
  );
}

function Toolbar({ theme, onToggleTheme }) {
  return (
    <div className="toolbar">
      <div className="toolbar__inner">
        <a href="https://spencervoorhees.com" className="toolbar__brand topnav-brand">
          <span className="toolbar__brand-mark" aria-hidden="true">
            <svg width="28" height="28" viewBox="3 0.5 14 14" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges" aria-hidden="true">
              <g fill="var(--accent)">
                <rect width="1" height="1" x="7" y="2"/><rect width="1" height="1" x="12" y="2"/>
                <rect width="1" height="1" x="4" y="3"/><rect width="1" height="1" x="8" y="3"/><rect width="1" height="1" x="11" y="3"/><rect width="1" height="1" x="15" y="3"/>
                <rect width="1" height="1" x="5" y="4"/><rect width="1" height="1" x="8" y="4"/><rect width="1" height="1" x="11" y="4"/><rect width="1" height="1" x="14" y="4"/>
                <rect width="1" height="1" x="5" y="5"/><rect width="1" height="1" x="6" y="5"/><rect width="1" height="1" x="7" y="5"/><rect width="1" height="1" x="8" y="5"/><rect width="1" height="1" x="9" y="5"/><rect width="1" height="1" x="10" y="5"/><rect width="1" height="1" x="11" y="5"/><rect width="1" height="1" x="12" y="5"/><rect width="1" height="1" x="13" y="5"/><rect width="1" height="1" x="14" y="5"/>
                <rect width="1" height="1" x="3" y="6"/><rect width="1" height="1" x="6" y="6"/><rect width="1" height="1" x="7" y="6"/><rect width="1" height="1" x="8" y="6"/><rect width="1" height="1" x="9" y="6"/><rect width="1" height="1" x="10" y="6"/><rect width="1" height="1" x="11" y="6"/><rect width="1" height="1" x="12" y="6"/><rect width="1" height="1" x="13" y="6"/><rect width="1" height="1" x="16" y="6"/>
                <rect width="1" height="1" x="4" y="7"/><rect width="1" height="1" x="5" y="7"/><rect width="1" height="1" x="6" y="7"/><rect width="1" height="1" x="8" y="7"/><rect width="1" height="1" x="9" y="7"/><rect width="1" height="1" x="10" y="7"/><rect width="1" height="1" x="11" y="7"/><rect width="1" height="1" x="13" y="7"/><rect width="1" height="1" x="14" y="7"/><rect width="1" height="1" x="15" y="7"/>
                <rect width="1" height="1" x="6" y="8"/><rect width="1" height="1" x="7" y="8"/><rect width="1" height="1" x="8" y="8"/><rect width="1" height="1" x="9" y="8"/><rect width="1" height="1" x="10" y="8"/><rect width="1" height="1" x="11" y="8"/><rect width="1" height="1" x="12" y="8"/><rect width="1" height="1" x="13" y="8"/>
                <rect width="1" height="1" x="6" y="9"/><rect width="1" height="1" x="7" y="9"/><rect width="1" height="1" x="8" y="9"/><rect width="1" height="1" x="9" y="9"/><rect width="1" height="1" x="10" y="9"/><rect width="1" height="1" x="11" y="9"/><rect width="1" height="1" x="12" y="9"/><rect width="1" height="1" x="13" y="9"/>
                <rect width="1" height="1" x="5" y="10"/><rect width="1" height="1" x="6" y="10"/><rect width="1" height="1" x="7" y="10"/><rect width="1" height="1" x="8" y="10"/><rect width="1" height="1" x="9" y="10"/><rect width="1" height="1" x="10" y="10"/><rect width="1" height="1" x="11" y="10"/><rect width="1" height="1" x="12" y="10"/><rect width="1" height="1" x="13" y="10"/><rect width="1" height="1" x="14" y="10"/>
                <rect width="1" height="1" x="5" y="11"/><rect width="1" height="1" x="7" y="11"/><rect width="1" height="1" x="12" y="11"/><rect width="1" height="1" x="14" y="11"/>
                <rect width="1" height="1" x="5" y="12"/><rect width="1" height="1" x="7" y="12"/><rect width="1" height="1" x="12" y="12"/><rect width="1" height="1" x="14" y="12"/>
              </g>
            </svg>
          </span>
          <span className="toolbar__brand-name">Spencer Voorhees</span>
        </a>
        <nav style={{ display: "flex", gap: 16, marginLeft: 8 }}>
          <a href="https://blog.spencervoorhees.com" className="topnav-link">Writing</a>
          <span className="topnav-link topnav-link--active">Résumé</span>
        </nav>
        <div style={{ display: "flex", gap: 8, alignItems: "center", marginLeft: "auto" }}>
          <button
            className="btn btn--ghost btn--sm no-print"
            onClick={onToggleTheme}
            aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
            style={{ padding: "0 8px" }}
          >
            {theme === "dark" ? <SunIcon /> : <MoonIcon />}
          </button>
          <a
            className="btn btn--secondary btn--sm no-print"
            href="Spencer-Voorhees-resume.pdf"
            download
          >
            <i data-lucide="download" style={{ width: 14, height: 14 }}></i>
            <span style={{ marginLeft: 4 }}>Download PDF</span>
          </a>
        </div>
      </div>
    </div>
  );
}

window.Toolbar = Toolbar;