import { Link } from 'react-router-dom'
import MoonDot from './MoonDot.jsx'

const NAV = {
  website: [
    { label: 'News', to: '/site/news' },
    { label: 'Screenshots', to: '/site/screenshots' },
    { label: 'Five on Friday', to: '/site/five-on-friday' },
    { label: 'Newsletter', to: '/site/newsletter' },
    { label: 'About', to: '/site/about' },
    { label: 'Wiki', to: '/wiki' },
  ],
  wiki: [
    { label: 'Website', to: '/site' },
    { label: 'New Player Guide', to: '/wiki/new-player-guide' },
    { label: 'Maps & Atlas', to: '/wiki/maps-atlas' },
    { label: 'Systems', to: '/wiki/systems' },
    { label: 'Rules', to: '/wiki/rules' },
  ],
}

export default function SiteHeader({ section = 'website' }) {
  const links = NAV[section] || NAV.website
  return (
    <header
      style={{
        borderBottom: '1px solid var(--line)',
        background: 'rgba(9,13,18,0.86)',
        backdropFilter: 'blur(8px)',
        position: 'sticky',
        top: 0,
        zIndex: 30,
      }}
    >
      <div
        className="shell"
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 20,
          padding: '14px 0',
          flexWrap: 'wrap',
        }}
      >
        <Link
          to="/"
          className="display"
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 10,
            fontSize: '1.2rem',
            letterSpacing: '0.05em',
            color: 'var(--accent-bright)',
            textDecoration: 'none',
            fontWeight: 600,
          }}
        >
          <MoonDot />
          UOMysticmoon
        </Link>
        <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          {links.map((l) => (
            <Link key={l.to + l.label} to={l.to} className="pill">
              {l.label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  )
}