import Link from 'next/link';
import { Sparkles } from 'lucide-react';
import ThemeToggle from './ThemeToggle';

export default function Header() {
  return (
    <header className="sticky top-0 z-20 border-b-soft" style={{ background: 'rgb(var(--bg) / 0.85)', backdropFilter: 'saturate(180%) blur(12px)' }}>
      <div className="container-wide flex items-center justify-between py-4">
        <Link href="/" className="flex items-center gap-2 group">
          <div className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" style={{ background: 'rgb(var(--accent) / 0.12)' }}>
            <Sparkles className="w-4 h-4 accent" />
          </div>
          <span className="font-bold text-lg tracking-tight ink">ZeroPost</span>
        </Link>
        <nav className="flex items-center gap-1 sm:gap-2 text-sm">
          <Link href="/" className="btn btn-ghost text-sm py-1.5">Статьи</Link>
          <Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>
          <a href="https://app.zeropost.ru" className="btn btn-primary text-sm py-1.5 ml-1">
            Кабинет
          </a>
          <div className="ml-1">
            <ThemeToggle />
          </div>
        </nav>
      </div>
    </header>
  );
}