First commit

components/SiteHeader.tsx

@@ -0,0 +1,87 @@
+import type { MouseEventHandler } from "react";
+
+type Theme = "dark" | "light";
+
+type SiteHeaderProps = {
+  menuOpen: boolean;
+  theme: Theme;
+  onMenuToggle: () => void;
+  onThemeToggle: () => void;
+  onNavClick: MouseEventHandler<HTMLElement>;
+};
+
+export default function SiteHeader({ menuOpen, theme, onMenuToggle, onThemeToggle, onNavClick }: SiteHeaderProps) {
+  return (
+    <header className="site-header" aria-label="Primary navigation">
+      <a className="brand" href="#top" aria-label="Bay Area Email Services home">
+        <span className="brand-mark" aria-hidden="true">
+          <svg viewBox="0 0 40 32" role="img">
+            <path d="M3 5.5h34v21H3z"></path>
+            <path d="m4.5 7 15.5 11.5L35.5 7"></path>
+            <path d="m4.5 25 11.2-9.2"></path>
+            <path d="m35.5 25-11.2-9.2"></path>
+          </svg>
+        </span>
+        <span>
+          <strong>Bay Area</strong>
+          <span>Email Services</span>
+        </span>
+      </a>
+
+      <button
+        className="menu-toggle"
+        type="button"
+        aria-expanded={menuOpen}
+        aria-controls="nav-menu"
+        onClick={onMenuToggle}
+      >
+        <span></span>
+        <span></span>
+        <span></span>
+        <b>Menu</b>
+        <span className="sr-only">Open menu</span>
+      </button>
+
+      <nav id="nav-menu" className={`nav-menu${menuOpen ? " is-open" : ""}`} onClick={onNavClick}>
+        <a href="#services">Services</a>
+        <a href="#infrastructure">Infrastructure</a>
+        <a href="#pricing">Pricing</a>
+        <a href="#migration">Migration</a>
+        <a href="#faq">Resources</a>
+        <a href="#assessment">Support</a>
+      </nav>
+
+      <div className="header-actions">
+        <a className="phone-link" href="tel:+13617658400" aria-label="Call Bay Area Email Services at 361 765 8400">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"></path>
+          </svg>
+          Call (361) 765-8400
+        </a>
+        <button
+          className="theme-toggle"
+          type="button"
+          aria-pressed={theme === "light"}
+          aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+          onClick={onThemeToggle}
+        >
+          <svg className="theme-icon theme-icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="4"></circle>
+            <path d="M12 2v2.5"></path>
+            <path d="M12 19.5V22"></path>
+            <path d="m4.9 4.9 1.8 1.8"></path>
+            <path d="m17.3 17.3 1.8 1.8"></path>
+            <path d="M2 12h2.5"></path>
+            <path d="M19.5 12H22"></path>
+            <path d="m4.9 19.1 1.8-1.8"></path>
+            <path d="m17.3 6.7 1.8-1.8"></path>
+          </svg>
+          <svg className="theme-icon theme-icon-moon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"></path>
+          </svg>
+        </button>
+        <a className="button button-primary" href="#assessment">Book a 20-minute email assessment</a>
+      </div>
+    </header>
+  );
+}