Initial Paprika Next.js implementation

components/SiteHeader.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { navItems, resourceItems } from "@/lib/navigation";
+
+export function SiteHeader() {
+  const pathname = usePathname();
+  const current = pathname === "/" ? "home" : pathname.split("/")[1];
+  const resourcesActive = current === "faq" || current === "resources";
+
+  return (
+    <header className="site-header">
+      <Link className="brand" href="/">
+        <div className="brand-name">Paprika</div>
+        <div className="brand-tag">Attorney Curated Evidence Building for O-1 Talent</div>
+      </Link>
+      <nav className="nav" id="nav">
+        {navItems.map((item) => (
+          <Link
+            key={item.key}
+            href={item.href}
+            data-page={item.key}
+            className={current === item.key ? "active" : undefined}
+          >
+            {item.label}
+          </Link>
+        ))}
+        <div className="nav-dropdown">
+          <Link
+            href="/resources"
+            className={`nav-trigger${resourcesActive ? " active" : ""}`}
+            data-page="resources"
+          >
+            Resources <span className="nav-chevron">⌄</span>
+          </Link>
+          <div className="resources-menu" aria-label="Resources menu">
+            {resourceItems.map((item) => (
+              <Link key={item.key} href={item.href} data-page={item.key}>
+                <strong>{item.label}</strong>
+                <span>{item.description}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+        <Link
+          href="/start"
+          className={`start${current === "start" ? " active" : ""}`}
+          data-page="start"
+        >
+          Start Here <span className="button-arrow">→</span>
+        </Link>
+      </nav>
+    </header>
+  );
+}