"use client";

import Link from "next/link";
import { Button } from "ikoncomponents";
import { useRouter } from "next/dist/client/components/navigation";
import { Brain, Menu, X } from "lucide-react";
import { useState } from "react";

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

  const handleStartTrial = () => {
    router.push("/main/overview/dashboard");
  };

  return (
    <header className="w-full">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
        {/* Logo */}
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 font-bold">
            <Brain size={20} />
          </div>
          <span className="text-lg font-semibold">ProjectAI</span>
        </div>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-8 text-sm text-gray-400">
          <Link href="#features" className="hover:text-gray-500 transition">
            Features
          </Link>
          <Link href="#methodology" className="hover:text-gray-500 transition">
            Methodology
          </Link>
          <Link href="#integrations" className="hover:text-gray-500 transition">
            Integrations
          </Link>
          <Link href="#security" className="hover:text-gray-500 transition">
            Security
          </Link>
        </nav>

        {/* Right Actions (Desktop) */}
        <div className="hidden md:flex items-center gap-4">
          <Button
            className="bg-indigo-600 hover:bg-indigo-700"
            onClick={handleStartTrial}
          >
            Get Started →
          </Button>
        </div>

        {/* Mobile Menu Button */}
        <button
          className="md:hidden text-gray-300"
          onClick={() => setOpen(!open)}
        >
          {open ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Mobile Navigation */}
      {open && (
        <div className="md:hidden border-t backdrop-blur">
          <nav className="flex flex-col gap-4 px-6 py-4 text-sm text-gray-400">
            <Link href="#features" onClick={() => setOpen(false)}>
              Features
            </Link>
            <Link href="#methodology" onClick={() => setOpen(false)}>
              Methodology
            </Link>
            <Link href="#integrations" onClick={() => setOpen(false)}>
              Integrations
            </Link>
            <Link href="#security" onClick={() => setOpen(false)}>
              Security
            </Link>

            <Button
              className="mt-2 bg-indigo-600 hover:bg-indigo-700"
              onClick={handleStartTrial}
            >
              Get Started →
            </Button>
          </nav>
        </div>
      )}
    </header>
  );
}