"use client";

import { useState } from "react";
import { Menu, X } from "lucide-react";

const navLinks = [
  { href: "#features", label: "Возможности" },
  { href: "#roles", label: "Для кого" },
  { href: "#pricing", label: "Тарифы" },
  { href: "#integrations", label: "Интеграции" },
  { href: "#faq", label: "FAQ" },
];

export default function Header() {
  const [open, setOpen] = useState(false);

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
      <div className="mx-auto max-w-7xl flex items-center justify-between px-4 sm:px-6 lg:px-8 h-16">
        <a href="#" className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
            <span className="text-white font-bold text-sm">MF</span>
          </div>
          <span className="text-xl font-bold text-gray-900">
            My<span className="text-primary">Fit</span>CRM
          </span>
        </a>

        <nav className="hidden md:flex items-center gap-8">
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="text-sm font-medium text-gray-600 hover:text-primary transition-colors"
            >
              {link.label}
            </a>
          ))}
        </nav>

        <div className="hidden md:flex items-center gap-3">
          <a
            href="https://app.myfitcrm.ru/login"
            className="text-sm font-medium text-gray-700 hover:text-primary transition-colors"
          >
            Войти
          </a>
          <a
            href="#demo"
            className="inline-flex items-center justify-center rounded-xl bg-primary px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark transition-colors"
          >
            Попробовать бесплатно
          </a>
        </div>

        <button
          onClick={() => setOpen(!open)}
          className="md:hidden p-2 text-gray-600"
          aria-label="Меню"
        >
          {open ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {open && (
        <div className="md:hidden bg-white border-t border-gray-100 px-4 pb-4">
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              onClick={() => setOpen(false)}
              className="block py-3 text-sm font-medium text-gray-600 hover:text-primary"
            >
              {link.label}
            </a>
          ))}
          <a
            href="https://app.myfitcrm.ru/login"
            onClick={() => setOpen(false)}
            className="block py-3 text-sm font-medium text-gray-600 hover:text-primary"
          >
            Войти
          </a>
          <a
            href="#demo"
            onClick={() => setOpen(false)}
            className="mt-2 block w-full text-center rounded-xl bg-primary px-5 py-2.5 text-sm font-semibold text-white"
          >
            Попробовать бесплатно
          </a>
        </div>
      )}
    </header>
  );
}
