"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { Menu, X } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import { useAuth } from "@/context/auth-context"

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const { isAuthenticated } = useAuth()
  const router = useRouter()

  return (
    <nav className="fixed top-0 w-full bg-background/95 backdrop-blur-sm border-b border-border z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2">
            <Image src="/logo.png" alt="DhanFin" width={40} height={40} className="h-10 w-auto" />
          </Link>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center gap-8">
            <Link href="#features" className="text-foreground hover:text-amber-500 transition">
              Features
            </Link>
            <Link href="#gold" className="text-foreground hover:text-amber-500 transition">
              Gold Trading
            </Link>
            <Link href="#global" className="text-foreground hover:text-amber-500 transition">
              Global Presence
            </Link>
            {isAuthenticated ? (
              <Button
                onClick={() => router.push("/dashboard")}
                className="bg-amber-500 hover:bg-amber-600 text-black font-semibold"
              >
                Dashboard
              </Button>
            ) : (
              <Button
                onClick={() => router.push("/login")}
                className="bg-amber-500 hover:bg-amber-600 text-black font-semibold"
              >
                Login / Launch App
              </Button>
            )}
          </div>

          {/* Mobile Menu Button */}
          <button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {/* Mobile Menu */}
        {isOpen && (
          <div className="md:hidden pb-4 border-t border-border">
            <Link href="#features" className="block py-2 text-foreground hover:text-amber-500">
              Features
            </Link>
            <Link href="#gold" className="block py-2 text-foreground hover:text-amber-500">
              Gold Trading
            </Link>
            <Link href="#global" className="block py-2 text-foreground hover:text-amber-500">
              Global Presence
            </Link>
            {isAuthenticated ? (
              <Button
                onClick={() => router.push("/dashboard")}
                className="w-full mt-4 bg-amber-500 hover:bg-amber-600 text-black font-semibold"
              >
                Dashboard
              </Button>
            ) : (
              <Button
                onClick={() => router.push("/login")}
                className="w-full mt-4 bg-amber-500 hover:bg-amber-600 text-black font-semibold"
              >
                Login / Launch App
              </Button>
            )}
          </div>
        )}
      </div>
    </nav>
  )
}