"use client";
import { ChevronDown } from "lucide-react";
import Link from "next/link";
import type { ReactNode } from "react";
import { useState } from "react";
import { Icons } from "@/components/icons";
// import Banner from "@/components/ui/banner";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuTrigger } from "@/components/ui/menu";
const Navbar = () => {
const [isMobileProductOpen, setIsMobileProductOpen] = useState(false);
const categories = [
{
description:
"Crystal-clear HD video with AI-powered features for modern remote teams.",
icon: "archive",
title: "HD Video Meetings",
},
{
description:
"Messaging, file sharing, and smart search all in one unified hub.",
icon: "targetArrow",
title: "Team Messaging Hub",
},
{
description:
"AI scheduling, cross-platform sync, and one-link booking made simple.",
icon: "gauge",
title: "Smart Scheduling",
},
];
const solutions = [
{ icon: "thumbUp", title: "Remote Teams" },
{ icon: "clipboard", title: "Hybrid Workplaces" },
{ icon: "toggle", title: "Startups & Scale-ups" },
{ icon: "browser", title: "Enterprise Organizations" },
];
const useCases = [
{ icon: "inbox", title: "Engineering Teams" },
{ icon: "document", title: "Sales & Customer Success" },
{ icon: "alert", title: "Design & Creative" },
{ icon: "bank", title: "Finance & Legal" },
];
const iconMap: Record<string, ReactNode> = {
alert: <Icons.alert className="size-5" />,
archive: <Icons.archive className="size-5" />,
bank: <Icons.bank className="size-5" />,
briefcase: <Icons.cursor className="size-5" />,
browser: <Icons.browser className="size-5" />,
building: <Icons.cursor className="size-5" />,
clipboard: <Icons.clipboard className="size-5" />,
document: <Icons.document className="size-5" />,
gauge: <Icons.gauge className="size-5" />,
globe: <Icons.cursor className="size-5" />,
inbox: <Icons.inbox className="size-5" />,
monitor: <Icons.cursor className="size-5" />,
refresh: <Icons.cursor className="size-5" />,
targetArrow: <Icons.targetArrow className="size-5" />,
thumbsUp: <Icons.cursor className="size-5" />,
thumbUp: <Icons.thumbsUp className="size-5" />,
toggle: <Icons.chat className="size-5" />,
users: <Icons.cursor className="size-5" />,
wrench: <Icons.cursor className="size-5" />,
zap: <Icons.zap className="size-5" />,
};
const getIcon = (iconName: keyof typeof iconMap) =>
iconMap[iconName] || <Icons.cursor className="size-5" />;
return (
<nav className="w-full border-neutral-200 border-b bg-white dark:border-neutral-800 dark:bg-background">
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-6 sm:gap-8">
<Link
className="flex items-center gap-2 font-bold text-neutral-900 text-xl dark:text-neutral-100"
href="/"
>
VoxFlow
</Link>
<div className="hidden items-center gap-6 md:flex">
<Menu>
<MenuTrigger render={<Button variant="ghost" />}>
Product
<ChevronDown className="in-data-popup-open:rotate-180 transition-transform duration-200 ease-in-out" />
</MenuTrigger>
<MenuPopup
align="start"
className="max-h-[75vh] w-full min-w-max overflow-y-auto rounded-2xl border border-none bg-[#eeeef0] p-2 dark:bg-neutral-800"
>
<div className="grid grid-cols-12 px-6 py-5">
<div className="col-span-4 font-semibold text-neutral-700 text-xs uppercase tracking-wide dark:text-neutral-400">
Categories
</div>
<div className="col-span-8 pl-4 font-semibold text-neutral-700 text-xs uppercase tracking-wide dark:text-neutral-400">
Solutions VoxFlow
</div>
</div>
<div className="flex w-full gap-5 rounded-2xl bg-white px-6 py-8 dark:bg-neutral-900">
<div className="w-fit">
<div className="flex h-full flex-col justify-between space-y-3">
{categories.map((category, _index) => (
<div
className="group flex cursor-pointer gap-3 rounded-2xl border border-gray-200 px-4 py-4 transition-colors duration-300 ease-in-out hover:border-gray-100 hover:bg-[#eeeef0] dark:border-neutral-700 dark:hover:border-neutral-600 dark:hover:bg-neutral-800"
key={category.title}
>
<div className="mt-1 h-fit shrink-0 rounded-xl bg-[#eeeef0] p-2 text-black group-hover:bg-white group-hover:text-blue-600 group-hover:transition-colors dark:bg-neutral-800 dark:text-neutral-100 dark:group-hover:bg-neutral-700">
{getIcon(category.icon)}
</div>
<div>
<h4 className="font-medium text-neutral-900 text-sm dark:text-neutral-100">
{category.title}
</h4>
<p className="mt-1 text-neutral-600 text-xs dark:text-neutral-400">
{category.description}
</p>
</div>
</div>
))}
</div>
</div>
<div className="flex w-full flex-col">
<div className="flex">
<div className="grid w-1/2 grid-cols-1 gap-6">
{solutions.map((solution, _index) => (
<div
className="flex cursor-pointer items-center gap-3 transition-opacity"
key={solution.title}
>
<div className="relative text-blue-600">
<span className="relative z-10">
{getIcon(solution.icon)}
</span>
<div className="absolute top-0 -left-0.5 text-blue-100">
<svg
className="size-4"
fill="none"
height="27"
viewBox="0 0 27 27"
width="27"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_444_3357)">
<path
d="M21.6667 0.333338C24.6123 0.333338 27.0537 2.74441 26.4685 5.63122C26.1288 7.30722 25.6278 8.95069 24.9702 10.5382C23.6301 13.7736 21.6658 16.7133 19.1896 19.1895C16.7134 21.6657 13.7737 23.63 10.5383 24.9701C8.95076 25.6277 7.3073 26.1287 5.63129 26.4684C2.74449 27.0536 0.333413 24.6122 0.333413 21.6667L0.333413 15.1888C0.333414 12.8754 2.27808 11.0733 4.41537 10.1881V10.1881C5.70951 9.652 6.88539 8.8663 7.87589 7.87581C8.86638 6.88532 9.65208 5.70943 10.1881 4.41529V4.41529C11.0734 2.278 12.8755 0.333338 15.1888 0.333338H21.6667Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_444_3357">
<rect
fill="white"
height="27"
width="27"
/>
</clipPath>
</defs>
</svg>
</div>
</div>
<span className="font-medium text-neutral-900 text-sm hover:text-blue-600 dark:text-neutral-100">
{solution.title}
</span>
</div>
))}
</div>
<div className="w-1/2">
<div className="grid grid-cols-1 gap-6">
{useCases.map((useCase, _index) => (
<div
className="flex cursor-pointer items-center gap-3 transition-opacity hover:opacity-70"
key={useCase.title}
>
<div className="relative text-blue-600">
<span className="relative z-10">
{getIcon(useCase.icon)}
</span>
<div className="absolute top-0 -left-0.5 text-blue-100 hover:text-blue-600">
<svg
className="size-4"
fill="none"
height="27"
viewBox="0 0 27 27"
width="27"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_444_3357)">
<path
d="M21.6667 0.333338C24.6123 0.333338 27.0537 2.74441 26.4685 5.63122C26.1288 7.30722 25.6278 8.95069 24.9702 10.5382C23.6301 13.7736 21.6658 16.7133 19.1896 19.1895C16.7134 21.6657 13.7737 23.63 10.5383 24.9701C8.95076 25.6277 7.3073 26.1287 5.63129 26.4684C2.74449 27.0536 0.333413 24.6122 0.333413 21.6667L0.333413 15.1888C0.333414 12.8754 2.27808 11.0733 4.41537 10.1881V10.1881C5.70951 9.652 6.88539 8.8663 7.87589 7.87581C8.86638 6.88532 9.65208 5.70943 10.1881 4.41529V4.41529C11.0734 2.278 12.8755 0.333338 15.1888 0.333338H21.6667Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_444_3357">
<rect
fill="white"
height="27"
width="27"
/>
</clipPath>
</defs>
</svg>
</div>
</div>
<span className="font-medium text-neutral-900 text-sm dark:text-neutral-100">
{useCase.title}
</span>
</div>
))}
</div>
</div>
</div>
<div className="col-span-2 mt-auto flex w-full items-end justify-between border-neutral-200 border-t pt-6 dark:border-neutral-700">
<div className="w-full">
<p className="mb-3 font-medium text-neutral-900 text-xs dark:text-neutral-100">
Need different solutions?
</p>
<p className="mb-3 w-60 text-neutral-700 text-xs dark:text-neutral-400">
For teams of 250+ with advanced security, control,
and priority support
</p>
</div>
<Button className="ml-auto w-fit rounded-lg bg-linear-to-t from-neutral-900 to-neutral-600 px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-neutral-200 dark:border-neutral-900 dark:to-neutral-800">
Talk to Sales
</Button>
</div>
</div>
</div>
</MenuPopup>
</Menu>
<Link
className="font-medium text-neutral-700 text-sm hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
href="/"
>
Home
</Link>
<Link
className="font-medium text-neutral-700 text-sm hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
href="/"
>
About
</Link>
<Link
className="font-medium text-neutral-700 text-sm hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
href="/"
>
Contact
</Link>
</div>
</div>
<Menu>
<MenuTrigger
render={<Button className="block md:hidden" variant="ghost" />}
>
Menu
</MenuTrigger>
<MenuPopup
align="end"
className="max-h-[75vh] w-72 overflow-y-auto rounded-2xl border border-neutral-100 bg-white p-2 md:hidden dark:border-neutral-800 dark:bg-neutral-900"
>
<div className="flex flex-col gap-1">
<button
aria-expanded={isMobileProductOpen}
className="flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 font-medium text-neutral-700 text-sm hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800"
onClick={() => setIsMobileProductOpen((prev) => !prev)}
>
<span>Product</span>
</button>
{isMobileProductOpen && (
<div className="mt-1 space-y-4 rounded-lg bg-neutral-50 p-3 text-neutral-700 text-xs dark:bg-neutral-800 dark:text-neutral-400">
<div>
<p className="mb-2 font-semibold text-[10px] text-neutral-500 uppercase">
Categories
</p>
<div className="space-y-2">
{categories.map((category) => (
<div
className="flex gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2 dark:border-neutral-700 dark:bg-neutral-900"
key={category.title}
>
<div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#eeeef0] text-black dark:bg-neutral-700 dark:text-neutral-100">
{getIcon(category.icon)}
</div>
<div>
<p className="font-medium text-neutral-900 text-xs dark:text-neutral-100">
{category.title}
</p>
<p className="mt-0.5 text-[11px] text-neutral-600 dark:text-neutral-400">
{category.description}
</p>
</div>
</div>
))}
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="mb-2 font-semibold text-[10px] text-neutral-500 uppercase">
Solutions
</p>
<div className="space-y-2">
{solutions.map((solution) => (
<div
className="flex items-center gap-2 rounded-lg bg-white px-3 py-2 dark:bg-neutral-900"
key={solution.title}
>
<span className="text-blue-600">
{getIcon(solution.icon)}
</span>
<span className="font-medium text-[11px] text-neutral-900 dark:text-neutral-100">
{solution.title}
</span>
</div>
))}
</div>
</div>
<div>
<p className="mb-2 font-semibold text-[10px] text-neutral-500 uppercase">
Use cases
</p>
<div className="space-y-2">
{useCases.map((useCase) => (
<div
className="flex items-center gap-2 rounded-lg bg-white px-3 py-2 dark:bg-neutral-900"
key={useCase.title}
>
<span className="text-blue-600">
{getIcon(useCase.icon)}
</span>
<span className="font-medium text-[11px] text-neutral-900 dark:text-neutral-100">
{useCase.title}
</span>
</div>
))}
</div>
</div>
</div>
<Button className="mt-1 w-full rounded-lg bg-neutral-900 px-4 py-2 font-medium text-white text-xs hover:bg-neutral-800">
Talk to Sales
</Button>
</div>
)}
<Link
className="rounded-lg px-3 py-2 font-medium text-neutral-700 text-sm hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800"
href="/"
>
Home
</Link>
<Link
className="rounded-lg px-3 py-2 font-medium text-neutral-700 text-sm hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800"
href="/"
>
About
</Link>
<Link
className="rounded-lg px-3 py-2 font-medium text-neutral-700 text-sm hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-800"
href="/"
>
Contact
</Link>
<Button className="mt-2 w-full rounded-lg bg-neutral-900 px-4 py-2 font-medium text-sm text-white hover:bg-neutral-800">
Get a demo
</Button>
</div>
</MenuPopup>
</Menu>
{/* Desktop CTA Button */}
<button className="hidden rounded-lg bg-neutral-900 px-6 py-2 font-medium text-sm text-white transition-colors hover:bg-neutral-800 md:inline-flex">
Get a demo
</button>
</div>
</div>
</nav>
);
};
export default Navbar;
