"use client";

import Link from "next/link";
import Image from "next/image";
import { Menu } from "lucide-react";
import { useState } from "react";
import { HelpSidebar } from "./help-sidebar";

export function HelpHeader() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      <header className="sticky top-0 z-50 bg-[#FAFAF7]/80 backdrop-blur-xl border-b border-[#E8E3DC]/60">
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between h-16">
          <div className="flex items-center gap-3">
            <button
              onClick={() => setMobileOpen(true)}
              className="lg:hidden p-2 -ml-2 rounded-lg hover:bg-[#F2EFE9] transition-colors"
              aria-label="Open navigation"
            >
              <Menu className="size-5 text-[#2D3436]" />
            </button>
            <Link href="/" className="flex items-center gap-2.5">
              <Image
                src="/logo.png"
                alt="honeyDue"
                width={32}
                height={32}
                className="rounded-lg"
              />
              <span className="font-heading text-xl font-bold tracking-tight text-[#2D3436]">
                honeyDue
              </span>
            </Link>
            <span className="text-[#E8E3DC] mx-1 hidden sm:inline">/</span>
            <Link
              href="/help"
              className="font-heading text-sm font-semibold text-[#6B8F71] hidden sm:inline"
            >
              Help Center
            </Link>
          </div>

          <div className="hidden md:flex items-center gap-6">
            <Link
              href="/#features"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
            >
              Features
            </Link>
            <Link
              href="/demo"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
            >
              Demo
            </Link>
            <Link
              href="/login"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
            >
              Sign In
            </Link>
          </div>
        </div>
      </header>

      {/* Mobile sidebar overlay */}
      {mobileOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div
            className="absolute inset-0 bg-black/30"
            onClick={() => setMobileOpen(false)}
          />
          <div className="absolute left-0 top-0 bottom-0 w-72 bg-[#FAFAF7] border-r border-[#E8E3DC] p-6 overflow-y-auto">
            <div className="flex items-center justify-between mb-6">
              <span className="font-heading text-sm font-semibold text-[#6B8F71]">
                Help Center
              </span>
              <button
                onClick={() => setMobileOpen(false)}
                className="p-1 rounded-lg hover:bg-[#F2EFE9] text-[#8A8F87]"
              >
                &times;
              </button>
            </div>
            <div onClick={() => setMobileOpen(false)}>
              <HelpSidebar />
            </div>
          </div>
        </div>
      )}
    </>
  );
}