import React from 'react';

const NAV = [
  { href: '/', label: 'Главная' },
  { href: '/history/', label: 'История' },
  { href: '/news/', label: 'Новости' },
  { href: '/foto/', label: 'Фото' },
  { href: 'https://forum.pushkinohistory.ru/', label: 'Форум', external: true },
];

export default function Header() {
  return (
    <header className="border-b border-rule bg-paper">
      <div
        className="relative overflow-hidden"
        style={{
          backgroundImage:
            'linear-gradient(rgba(248,244,236,0.85), rgba(248,244,236,0.78)), url(/uploads/IMG_2156.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center 60%',
          backgroundColor: '#f8f4ec',
        }}
      >
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
          <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <a href="/" className="block no-underline hover:no-underline">
              <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-ink leading-tight drop-shadow-[0_1px_0_rgba(248,244,236,0.6)]">
                История города Пушкино
              </h1>
              <p className="font-serif italic text-sm sm:text-base text-muted mt-1">
                от давних времён до наших дней
              </p>
            </a>
            <a
              href="/feed/"
              className="text-xs uppercase tracking-wider text-muted hover:text-accent self-start sm:self-end"
              title="RSS-фид"
            >
              RSS
            </a>
          </div>
        </div>
      </div>
      <nav className="border-t border-rule">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-wrap gap-x-6 gap-y-2 py-3 text-sm">
          {NAV.map((n) => (
            <a
              key={n.href}
              href={n.href}
              target={n.external ? '_blank' : undefined}
              rel={n.external ? 'noopener noreferrer' : undefined}
              className="text-ink hover:text-accent no-underline font-medium"
            >
              {n.label}
              {n.external ? ' ↗' : ''}
            </a>
          ))}
        </div>
      </nav>
    </header>
  );
}