"use client";
import { DesktopNavbar } from "./desktop-navbar";
import { MobileNavbar } from "./mobile-navbar";
import { motion } from "framer-motion";

interface NavItem {
  title: string;
  link: string;
}

// Navigation items - updated for smooth scrolling
const navItems: NavItem[] = [
  {
    title: "Home",
    link: "/",
  },
  {
    title: "Services",
    link: "#services",
  },
  {
    title: "Results",
    link: "#results",
  },
  {
    title: "Book a Call",
    link: "#book",
  },
];

export function NavBar() {
  return (
    <motion.nav
      initial={{
        y: -80,
      }}
      animate={{
        y: 0,
      }}
      transition={{
        ease: [0.6, 0.05, 0.1, 0.9],
        duration: 0.8,
      }}
      className="max-w-7xl fixed top-6 mx-auto inset-x-0 z-50 w-[95%] lg:w-full"
    >
      <div className="hidden lg:block w-full bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl rounded-full border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl shadow-neutral-200/20 dark:shadow-black/40 px-4 py-2">
        <DesktopNavbar navItems={navItems} />
      </div>
      <div className="flex h-full w-full items-center lg:hidden bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl rounded-2xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-xl px-4 py-3">
        <MobileNavbar navItems={navItems} />
      </div>
    </motion.nav>
  );
}