const headerStyles = {
  wrap: {
    position: 'sticky', top: 0, zIndex: 30,
    backdropFilter: 'blur(14px) saturate(140%)',
    WebkitBackdropFilter: 'blur(14px) saturate(140%)',
    background: 'linear-gradient(180deg, rgba(14,11,22,0.85), rgba(14,11,22,0.55))',
    borderBottom: '1px solid rgba(42,34,56,0.7)',
  },
  row: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    height: 64,
  },
  brand: { display: 'flex', alignItems: 'center', gap: 12 },
  mark: {
    width: 26, height: 26, borderRadius: 8,
    background: 'conic-gradient(from 220deg, #8B5CF6, #B49AFF, #5B3BA8, #8B5CF6)',
    boxShadow: '0 0 0 1px rgba(180,154,255,0.25), 0 6px 18px -6px rgba(139,92,246,0.7)',
    position: 'relative', overflow: 'hidden'
  },
  markInner: {
    position: 'absolute', inset: 4, borderRadius: 5,
    background: 'radial-gradient(circle at 30% 30%, rgba(245,241,255,0.9), rgba(139,92,246,0.2) 60%, rgba(14,11,22,0.9))',
  },
  brandText: { fontFamily: "'Instrument Serif', serif", fontSize: 22, letterSpacing: 0.2 },
  brandDot: { color: '#B49AFF', marginLeft: 2 },
  nav: { display: 'flex', alignItems: 'center', gap: 4 },
  link: {
    fontSize: 13, color: '#A8A0BC', padding: '8px 14px', borderRadius: 999,
    transition: 'color .18s ease, background .18s ease',
    fontWeight: 500, letterSpacing: 0.1
  },
  rss: {
    display:'inline-flex', alignItems:'center', gap:6,
    fontSize: 12, color: '#A8A0BC', padding: '7px 12px', borderRadius: 999,
    border:'1px solid #2A2238', marginLeft: 8,
    fontFamily: "'JetBrains Mono', monospace"
  },
  subscribe: {
    fontSize: 13, padding: '8px 16px', borderRadius: 999,
    background: 'linear-gradient(180deg, #A78BFA, #7C3AED)',
    color: '#fff', fontWeight: 600, marginLeft: 8,
    boxShadow: '0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -8px rgba(139,92,246,0.7)'
  }
};

function Header({ onNav }){
  const items = [
    { id: 'about',   label: 'About' },
    { id: 'series',  label: 'Series' },
    { id: 'journal', label: 'Journal' },
    { id: 'notes',   label: 'Notes' },
    { id: 'contact', label: 'Contact' },
  ];
  const [hover, setHover] = React.useState(null);

  return (
    <header style={headerStyles.wrap}>
      <div className="inner" style={headerStyles.row}>
        <a href="#top" style={headerStyles.brand} onClick={(e)=>{e.preventDefault(); onNav('top');}}>
          <div style={headerStyles.mark}><div style={headerStyles.markInner}/></div>
          <div style={headerStyles.brandText}>
            Minato<span style={headerStyles.brandDot}>.</span>
            <span style={{fontFamily:"'JetBrains Mono',monospace", fontSize:11, color:'#6E6782', marginLeft:10, letterSpacing:1.5}}>FIELD·NOTES</span>
          </div>
        </a>

        <nav style={headerStyles.nav}>
          {items.map(it=>(
            <a key={it.id} href={`#${it.id}`}
               onClick={(e)=>{e.preventDefault(); onNav(it.id);}}
               onMouseEnter={()=>setHover(it.id)}
               onMouseLeave={()=>setHover(null)}
               style={{
                 ...headerStyles.link,
                 color: hover===it.id ? '#F5F1FF' : headerStyles.link.color,
                 background: hover===it.id ? 'rgba(139,92,246,0.10)' : 'transparent'
               }}>
              {it.label}
            </a>
          ))}
          <a href="#rss" onClick={(e)=>e.preventDefault()} style={headerStyles.rss}>
            <span style={{width:6,height:6,borderRadius:999,background:'#B49AFF',boxShadow:'0 0 10px #B49AFF'}}/>
            RSS
          </a>
          <a href="#contact" onClick={(e)=>{e.preventDefault(); onNav('contact');}} style={headerStyles.subscribe}>
            Subscribe →
          </a>
        </nav>
      </div>
    </header>
  );
}

window.Header = Header;