"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { LogIn } from "lucide-react";
import { useState } from "react";

export function HomeNavbar() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="py-4 px-6 md:px-10 flex items-center justify-between border-b border-gray-800 bg-black text-white">
      <div className="flex items-center gap-2">
        <span className="font-bold text-2xl">Ember</span>
      </div>
      <nav className="hidden md:flex gap-6 items-center">
        <Link href="#features" className="text-sm text-gray-400 hover:text-white transition-colors">
          Features
        </Link>
        <Link href="#benefits" className="text-sm text-gray-400 hover:text-white transition-colors">
          Benefits
        </Link>
        <Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">
          <Button variant="ghost" className="text-gray-400 hover:text-white hover:bg-gray-900">
            <LogIn className="h-4 w-4 mr-2" />
            Log In
          </Button>
        </Link>
        <Link href="/dashboard">
          <Button className="bg-indigo-600 hover:bg-indigo-700 text-white border-0">Get Started</Button>
        </Link>
      </nav>
      <div className="md:hidden">
        <Button variant="ghost" size="icon" onClick={() => setMenuOpen(!menuOpen)} className="text-white hover:bg-gray-900">
          <span className="sr-only">Toggle menu</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <line x1="4" x2="20" y1="12" y2="12" />
            <line x1="4" x2="20" y1="6" y2="6" />
            <line x1="4" x2="20" y1="18" y2="18" />
          </svg>
        </Button>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div className="md:hidden absolute top-16 left-0 right-0 bg-[#1C1C1C] border-b border-gray-800 p-4 z-50">
          <div className="flex flex-col gap-4">
            <Link
              href="#features"
              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
              onClick={() => setMenuOpen(false)}
            >
              Features
            </Link>
            <Link
              href="#benefits"
              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
              onClick={() => setMenuOpen(false)}
            >
              Benefits
            </Link>
            <Link
              href="/auth/login"
              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
              onClick={() => setMenuOpen(false)}
            >
              Log In
            </Link>
            <Link
              href="/dashboard"
              className="text-sm p-2 hover:bg-gray-900 rounded-md text-gray-300"
              onClick={() => setMenuOpen(false)}
            >
              Get Started
            </Link>
          </div>
        </div>
      )}
    </header>
  );
}