import React from 'react';

export const Header: React.FC = () => {
  return (
    <header className="sticky top-0 z-50 bg-[rgba(247,245,240,0.92)] backdrop-blur border-b hairline px-6 py-4">
      <div className="max-w-6xl mx-auto flex justify-between items-center">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-md border hairline bg-white flex items-center justify-center font-extrabold text-slate-900 text-sm">
            IF
          </div>
          <div className="leading-tight">
            <div className="text-sm font-semibold text-slate-900">InfraFabric Red Team</div>
            <div className="mono text-[11px] text-slate-500">Shadow Dossiers</div>
          </div>
        </div>

        <nav className="flex items-center gap-6">
          <div className="hidden md:flex gap-6 text-sm text-slate-700">
            <a href="#dossiers" className="hover:text-slate-900">Dossiers</a>
            <a href="#editions" className="hover:text-slate-900">Editions</a>
            <a href="#dossiers" target="_blank" rel="noopener noreferrer" className="hover:text-slate-900">Evidence (staged)</a>
            <a href="mailto:dave@infrafabric.io" className="hover:text-slate-900">Contact</a>
          </div>
          <a href="https://x.com/ShadowDossierRT" target="_blank" rel="noopener noreferrer" className="mono text-[11px] text-slate-500 hover:text-slate-800">@ShadowDossierRT</a>
        </nav>
      </div>
    </header>
  );
};
