// Header.jsx — AI-forward hero with aurora + rainbow mark
function Header() {
  return (
    <header className="relative overflow-hidden">
      <div className="aurora" aria-hidden="true" />

      <div className="relative max-w-[1440px] mx-auto px-8 pt-8 pb-4">
        {/* top bar */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <img src="assets/reason-blue.png" alt="Reason" className="h-10 w-auto logo-glow" />
            <div className="h-8 w-px bg-[color:var(--line-strong)]" />
            <div className="leading-tight">
              <div className="eyebrow">Reason Consulting</div>
              <a href="https://reason.consulting" target="_blank" rel="noopener noreferrer"
                className="font-mono text-[11px] text-[color:var(--ink-faint)] whitespace-nowrap mt-0.5 hover:underline hover:text-[color:var(--ink-dim)] transition-colors">
                reason.consulting
              </a>
            </div>
          </div>
          <div className="text-right leading-tight">
            <div className="flex items-center gap-3 text-[11px] font-mono uppercase tracking-[0.22em] text-[color:var(--ink-faint)] justify-end">
              <span className="flex items-center gap-1.5"><span className="live-dot" /> Live · v0.1</span>
            </div>
            <div className="eyebrow mt-1">MKS+SDD · Execution Guide</div>
          </div>
        </div>
      </div>

      <div className="relative max-w-[1440px] mx-auto px-8 pt-14">
        <h1
          className="font-display font-medium leading-[0.95] tracking-tight text-[color:var(--ink)]"
          style={{ fontSize: "clamp(52px, 9.2vw, 180px)" }}>
          How work moves
          <br />
          from <span className="font-serif italic font-normal">customer signal</span>
          <br />
          to <span className="spectrum-text">production.</span>
        </h1>
      </div>

      {/* Full-bleed spectrum divider — the separator between hero and system section */}
      <div className="spectrum-rule-thick mt-20 w-full" aria-hidden="true" />
    </header>
  );
}
window.Header = Header;