reui-blocks/blocks/navbar3.tsx

"use client";

import {
  ArrowUpRight,
  BarChart,
  Bitcoin,
  Building,
  Building2,
  ChevronLeft,
  ChevronRight,
  Cloud,
  Cpu,
  Film,
  Fingerprint,
  GraduationCap,
  HeartPulse,
  Leaf,
  Lock,
  Menu,
  X,
} from "lucide-react";
import { useState } from "react";

import {
  Logo,
  LogoImageDesktop,
  LogoImageMobile,
} from "@/components/shadcnblocks/logo";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import { cn } from "@/lib/utils";

const solutions = [
  {
    title: "اتوماسیون ایمیل",
    description: "ارسال کمپین، سگمنت و پرورش لید در مقیاس سازمانی.",
    href: "#",
    icon: Cloud,
  },
  {
    title: "امتیازدهی لید",
    description: "اولویت‌بندی خودکار لیدها بر اساس رفتار و تعامل.",
    href: "#",
    icon: Lock,
  },
  {
    title: "گزارش Attribution",
    description: "اثر هر کانال روی فرصت و درآمد را ببینید.",
    href: "#",
    icon: Fingerprint,
  },
];

const useCases = [
  { title: "SaaS", href: "#", icon: Building2 },
  { title: "خدمات B2B", href: "#", icon: HeartPulse },
  { title: "فناوری", href: "#", icon: Cpu },
  { title: "آموزش سازمانی", href: "#", icon: GraduationCap },
  { title: "تولید", href: "#", icon: Leaf },
  { title: "فروش سازمانی", href: "#", icon: Building },
  { title: "رسانه", href: "#", icon: Film },
  { title: "SaaS", href: "#", icon: BarChart },
  { title: "فین‌تک", href: "#", icon: Bitcoin },
];

const documentationLinks = [
  { title: "مرجع API", href: "#" },
  { title: "مستندات SDK", href: "#" },
  { title: "راهنمای یکپارچه‌سازی CRM", href: "#" },
  { title: "نمونه جریان کمپین", href: "#" },
];

const resources = [
  {
    title: "وبلاگ",
    description: "آموزش سازمانی‌های تقاضا و بهترین روش‌های اتوماسیون.",
    href: "#",
  },
  {
    title: "اخبار محصول",
    description: "قابلیت‌های جدید، اعلان‌ها و گزارش‌های رشد.",
    href: "#",
  },
];

interface Navbar3Props {
  contained?: boolean;
  className?: string;
}

const mobileMenuOverlayClass = (contained: boolean) =>
  cn(
    "flex w-full flex-col overflow-scroll border-t border-border bg-background text-start lg:hidden",
    contained
      ? "absolute inset-x-0 top-full z-50 max-h-[min(70vh,32rem)]"
      : "fixed inset-0 top-[72px] z-50 h-[calc(100vh-72px)]",
  );

const Navbar3 = ({ contained = false, className }: Navbar3Props) => {
  const [open, setOpen] = useState(false);
  const [submenu, setSubmenu] = useState<
    "platform" | "usecases" | "developers" | "resources" | null
  >(null);
  return (
    <section
      lang="fa"
      className={cn(
        "z-20 bg-background text-start",
        contained ? "relative overflow-visible" : "inset-x-0 top-0",
        className,
      )}
    >
      <div className="container">
        <NavigationMenu
          dir="rtl"
          className={cn(
            "min-w-full text-start",
            contained
              ? "[&>div:last-child]:inset-x-0 [&>div:last-child]:w-full [&>div:last-child]:justify-center [&>div:last-child>div]:w-full [&>div:last-child>div]:max-w-full"
              : "[&>div:last-child]:left-1/2 [&>div:last-child]:-translate-x-1/2",
          )}
        >
          <div className="flex w-full items-center justify-between gap-12 py-4">
            {/* Logo */}
            <div>
              {(!open || !submenu) && (
                <>
                  <Logo url="https://ShadcnBlocks">
                    <LogoImageDesktop
                      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg"
                      className="h-7 dark:invert"
                      alt="لوگو"
                    />
                    <LogoImageMobile
                      src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
                      className="h-7 dark:invert"
                      alt="لوگو"
                    />
                  </Logo>
                </>
              )}
              {open && submenu && (
                <Button variant="outline" onClick={() => setSubmenu(null)}>
                  <ChevronLeft />
                  بازگشت
                </Button>
              )}
            </div>

            <NavigationMenuList className="hidden lg:flex">
              <NavigationMenuItem>
                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
                  پلتفرم
                </NavigationMenuTrigger>
                <NavigationMenuContent
                  dir="rtl"
                  className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
                >
                  <div className="flex justify-between gap-8">
                    <NavigationMenuLink
                      href="#"
                      className="group w-1/3 p-0 hover:bg-transparent"
                    >
                      <div className="overflow-clip rounded-lg border border-input bg-background">
                        <div>
                          <img
                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
                            alt="پیش‌نمایش داشبورد کمپین‌پرو"
                            className="aspect-[4/3] object-cover object-center"
                          />
                        </div>
                        <div className="p-5 xl:p-8">
                          <div className="mb-2 text-base">نمای کلی پلتفرم</div>
                          <div className="text-sm font-normal text-muted-foreground">
                            ببینید کمپین‌پرو چگونه قیف بازاریابی را شفاف می‌کند.
                          </div>
                        </div>
                      </div>
                    </NavigationMenuLink>
                    <div className="max-w-[760px] flex-1">
                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
                        راه‌حل‌ها
                      </div>
                      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-8">
                        {solutions.map((solution, index) => (
                          <NavigationMenuLink
                            key={index}
                            href={solution.href}
                            className="group block p-4"
                          >
                            <div className="mb-5 group-hover:opacity-60">
                              <solution.icon className="size-5" />
                            </div>
                            <div className="mb-1 text-base">
                              {solution.title}
                            </div>
                            <div className="text-sm font-normal text-muted-foreground">
                              {solution.description}
                            </div>
                          </NavigationMenuLink>
                        ))}
                      </div>
                    </div>
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
                  موارد استفاده
                </NavigationMenuTrigger>
                <NavigationMenuContent
                  dir="rtl"
                  className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
                >
                  <div className="flex justify-between gap-4">
                    <div className="w-1/2 max-w-[510px]">
                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
                        موارد استفاده
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        {useCases.map((useCase, index) => (
                          <NavigationMenuLink
                            key={index}
                            href={useCase.href}
                            className="group flex flex-row items-center gap-5"
                          >
                            <div className="group-hover:opacity-60">
                              <useCase.icon className="size-4" />
                            </div>
                            <div className="text-base">{useCase.title}</div>
                          </NavigationMenuLink>
                        ))}
                      </div>
                    </div>
                    <NavigationMenuLink
                      href="#"
                      className="group flex-1 p-0 hover:bg-transparent"
                    >
                      <div className="flex h-full rounded-lg border border-input bg-background p-0 hover:bg-transparent">
                        <div className="w-2/5 max-w-[310px] shrink-0 overflow-clip rounded-ss-lg rounded-es-lg">
                          <img
                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
                            alt="پیش‌نمایش داشبورد کمپین‌پرو"
                            className="h-full w-full object-cover object-center"
                          />
                        </div>
                        <div className="flex flex-col p-5 xl:p-8">
                          <div className="mb-8 text-start text-xs tracking-widest text-muted-foreground uppercase">
                            برای تیم بازاریابی
                          </div>
                          <div className="mt-auto text-start">
                            <div className="mb-4 text-xl">
                              اجرای کمپین بدون اصطکاک بین ابزارها
                            </div>
                            <div className="text-sm font-normal text-muted-foreground">
                              راه‌حل‌های اتوماسیون متناسب با قیف درآمد شما.
                            </div>
                          </div>
                        </div>
                      </div>
                    </NavigationMenuLink>
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
                  توسعه‌دهندگان
                </NavigationMenuTrigger>
                <NavigationMenuContent
                  dir="rtl"
                  className="min-w-[min(900px,100%)] max-w-full p-6 text-start"
                >
                  <div className="flex justify-between gap-8">
                    <div className="w-1/3 max-w-[404px]">
                      <div className="mb-4 text-start text-xs tracking-widest text-muted-foreground uppercase">
                        مستندات
                      </div>
                      <div className="mb-6 text-start text-sm font-normal text-muted-foreground">
                        API و وب‌هوک برای تیم فنی
                      </div>
                      <div className="-me-2.5 space-y-2.5">
                        {documentationLinks.map((documentationLink, index) => (
                          <NavigationMenuLink
                            key={index}
                            href={documentationLink.href}
                            className="group flex flex-row items-center gap-2.5 rounded-md p-2.5 focus:text-accent-foreground"
                          >
                            <ArrowUpRight className="size-4 rtl:rotate-180" />
                            <div className="text-base">
                              {documentationLink.title}
                            </div>
                          </NavigationMenuLink>
                        ))}
                      </div>
                    </div>
                    <div className="max-w-[716px] flex-1 space-y-6">
                      <NavigationMenuLink
                        href="#"
                        className="flex flex-row items-center overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
                      >
                        <div className="flex-1 p-5 xl:p-8">
                          <div className="mb-2 text-base">نمونه پیاده‌سازی</div>
                          <div className="text-sm font-normal text-muted-foreground">
                            مطالعات موردی تیم‌هایی که نرخ تبدیل لید را بالا بردند.
                          </div>
                        </div>
                        <div className="h-[154px] max-w-[264px] shrink-0">
                          <img
                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
                            alt="پیش‌نمایش داشبورد کمپین‌پرو"
                            className="h-full w-full object-cover object-center"
                          />
                        </div>
                      </NavigationMenuLink>
                      <NavigationMenuLink
                        href="#"
                        className="flex flex-row items-center overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
                      >
                        <div className="flex-1 p-5 xl:p-8">
                          <div className="mb-2 text-base">لینک نمونه دیگر</div>
                          <div className="text-sm font-normal text-muted-foreground">
                            بهترین روش‌ها برای Attribution و پرورش لید
                            سازمانی.
                          </div>
                        </div>
                        <div className="h-[154px] max-w-[264px] shrink-0">
                          <img
                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
                            alt="پیش‌نمایش داشبورد کمپین‌پرو"
                            className="h-full w-full object-cover object-center"
                          />
                        </div>
                      </NavigationMenuLink>
                    </div>
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger className="text-start [&_svg]:ms-1 [&_svg]:!ml-0">
                  منابع
                </NavigationMenuTrigger>
                <NavigationMenuContent
                  dir="rtl"
                  className="min-w-[min(900px,100%)] max-w-full p-8 text-start"
                >
                  <div className="grid grid-cols-2 gap-8">
                    <div className="flex flex-1 flex-col">
                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
                        منابع
                      </div>
                      <div className="grid flex-1 grid-cols-1 gap-6 md:grid-cols-2">
                        {resources.map((resource, index) => (
                          <NavigationMenuLink
                            key={index}
                            href={resource.href}
                            className="flex h-full flex-col overflow-clip rounded-lg border border-input bg-background p-5 hover:bg-accent hover:text-accent-foreground xl:p-8"
                          >
                            <div className="mt-auto">
                              <div className="mb-2 text-base">
                                {resource.title}
                              </div>
                              <div className="text-sm font-normal text-muted-foreground">
                                {resource.description}
                              </div>
                            </div>
                          </NavigationMenuLink>
                        ))}
                      </div>
                    </div>
                    <div className="">
                      <div className="mb-6 text-start text-xs tracking-widest text-muted-foreground uppercase">
                        مشتریان
                      </div>
                      <NavigationMenuLink
                        href="#"
                        className="mb-6 flex flex-row overflow-clip rounded-lg border border-input bg-background p-0 hover:bg-transparent"
                      >
                        <div className="flex-1 p-5 xl:p-8 text-start">
                          <div className="mb-2 text-base">مشتریان</div>
                          <div className="text-sm font-normal text-muted-foreground">
                            ببینید شرکت‌های پیشرو چگونه از پلتفرم ما برای نوآوری
                            به کمپین‌پرو اعتماد می‌کنند.
                          </div>
                        </div>
                        <div className="w-1/3 max-w-[130px] shrink-0">
                          <img
                            src="/block-media/shadcnblocks/block/placeholder-1.svg"
                            alt="پیش‌نمایش داشبورد کمپین‌پرو"
                            className="h-full w-full object-cover object-center"
                          />
                        </div>
                      </NavigationMenuLink>
                      <NavigationMenuLink
                        href="#"
                        className="flex flex-row items-center gap-3 rounded-lg bg-secondary/30 p-3 hover:bg-secondary/80 focus:bg-secondary/80"
                      >
                        <Badge variant="secondary">جدید</Badge>
                        <span className="text-sm text-ellipsis text-secondary-foreground">
                          جدید: داشبورد Attribution چندلمسی
                        </span>
                      </NavigationMenuLink>
                    </div>
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
            <div className="hidden items-center gap-2 lg:flex">
              <Button variant="ghost">ورود</Button>
              <Button variant="outline">
                شروع رایگان
                <ChevronRight className="size-4 rtl:rotate-180" />
              </Button>
            </div>
            <div className="flex items-center gap-4 lg:hidden">
              <Button
                variant="outline"
                size="icon"
                aria-label="منوی اصلی"
                onClick={() => {
                  if (open) {
                    setOpen(false);
                    setSubmenu(null);
                  } else {
                    setOpen(true);
                  }
                }}
              >
                {!open && <Menu className="size-4" />}
                {open && <X className="size-4" />}
              </Button>
            </div>
          </div>

          {/* Mobile Menu (Root) */}
          {open && (
            <div className={mobileMenuOverlayClass(contained)}>
              <div>
                <button
                  type="button"
                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
                  onClick={() => setSubmenu("platform")}
                >
                  <span className="flex-1">پلتفرم</span>
                  <span className="shrink-0">
                    <ChevronRight className="size-4 rtl:rotate-180" />
                  </span>
                </button>
                <button
                  type="button"
                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
                  onClick={() => setSubmenu("usecases")}
                >
                  <span className="flex-1">موارد استفاده</span>
                  <span className="shrink-0">
                    <ChevronRight className="size-4 rtl:rotate-180" />
                  </span>
                </button>
                <button
                  type="button"
                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
                  onClick={() => setSubmenu("developers")}
                >
                  <span className="flex-1">توسعه‌دهندگان</span>
                  <span className="shrink-0">
                    <ChevronRight className="size-4 rtl:rotate-180" />
                  </span>
                </button>
                <button
                  type="button"
                  className="flex w-full items-center border-b border-border px-8 py-7 text-start"
                  onClick={() => setSubmenu("resources")}
                >
                  <span className="flex-1">منابع</span>
                  <span className="shrink-0">
                    <ChevronRight className="size-4 rtl:rotate-180" />
                  </span>
                </button>
              </div>
              <div className="mx-8 mt-auto flex flex-col gap-4 py-12">
                <Button variant="outline" className="relative" size="lg">
                  ورود
                </Button>
                <Button className="relative" size="lg">
                  شروع رایگان
                </Button>
              </div>
            </div>
          )}
          {/* Mobile Menu > Platform */}
          {open && submenu === "platform" && (
            <div className={mobileMenuOverlayClass(contained)}>
              <a href="#" className="block space-y-6 px-8 py-8 text-start">
                <div className="w-full overflow-clip rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="پیش‌نمایش داشبورد کمپین‌پرو"
                    className="aspect-2/1 h-full w-full object-cover object-center"
                  />
                </div>
                <div>
                  <div className="mb-2 text-base">نمای کلی پلتفرم</div>
                  <div className="text-sm font-normal text-muted-foreground">
                    ببینید کمپین‌پرو چگونه قیف بازاریابی را شفاف می‌کند.
                  </div>
                </div>
              </a>
              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
                راه‌حل‌ها
              </div>
              <div className="border-t border-border pb-16">
                {solutions.map((solution, index) => (
                  <a
                    key={index}
                    href={solution.href}
                    className="group flex w-full items-start gap-x-4 border-b border-border px-8 py-7 text-start hover:bg-accent"
                  >
                    <div className="shrink-0">
                      <solution.icon className="size-6" />
                    </div>
                    <div>
                      <div className="mb-1.5 text-base">{solution.title}</div>
                      <div className="text-sm font-normal text-muted-foreground">
                        {solution.description}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          )}
          {/* Mobile Menu > Use cases */}
          {open && submenu === "usecases" && (
            <div className={mobileMenuOverlayClass(contained)}>
              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
                موارد استفاده
              </div>
              <div>
                {useCases.map((useCase, index) => (
                  <a
                    key={index}
                    href={useCase.href}
                    className="group flex w-full items-start gap-x-4 border-t border-border px-8 py-7 text-start hover:bg-accent"
                  >
                    <div className="shrink-0">
                      <useCase.icon className="size-6" />
                    </div>
                    <div className="text-base">{useCase.title}</div>
                  </a>
                ))}
              </div>
              <div className="bg-secondary/30 px-8 pt-8 pb-16">
                <div className="mb-7 text-start text-xs tracking-widest text-muted-foreground uppercase">
                  برای تیم بازاریابی
                </div>
                <a href="#" className="block space-y-6 text-start">
                  <div className="overflow-clip rounded-lg">
                    <img
                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
                      alt="پیش‌نمایش داشبورد کمپین‌پرو"
                      className="aspect-2/1 h-full w-full object-cover object-center"
                    />
                  </div>
                  <div>
                    <div className="mb-1.5 text-base">
                      اجرای کمپین بدون اصطکاک بین ابزارها
                    </div>
                    <div className="text-sm font-normal text-muted-foreground">
                      راه‌حل‌های اتوماسیون متناسب با قیف درآمد شما.
                    </div>
                  </div>
                </a>
              </div>
            </div>
          )}
          {/* Mobile Menu > Developers */}
          {open && submenu === "developers" && (
            <div className={mobileMenuOverlayClass(contained)}>
              <a href="#" className="block space-y-6 px-8 py-8 text-start">
                <div className="w-full overflow-clip rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="پیش‌نمایش داشبورد کمپین‌پرو"
                    className="aspect-2/1 h-full w-full object-cover object-center"
                  />
                </div>
                <div>
                  <div className="mb-2 text-base">شروع با اتصال هوشمند ما</div>
                  <div className="text-sm font-normal text-muted-foreground">
                    مستندات برای اتصال سریع به CRM و ابزارهای رشد.
                  </div>
                </div>
              </a>
              <a
                href="#"
                className="block space-y-6 border-t border-border px-8 py-8 text-start"
              >
                <div className="w-full overflow-clip rounded-lg">
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt="پیش‌نمایش داشبورد کمپین‌پرو"
                    className="aspect-2/1 h-full w-full object-cover object-center"
                  />
                </div>
                <div>
                  <div className="mb-2 text-base">شروع سریع</div>
                  <div className="text-sm font-normal text-muted-foreground">
                    با جریان‌های آماده، اولین کمپین را در چند دقیقه اجرا کنید.
                  </div>
                </div>
              </a>
              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
                مستندات
              </div>
              <div className="-mx-2.5 space-y-2.5 px-8 pb-16">
                {documentationLinks.map((documentationLink, index) => (
                  <NavigationMenuLink
                    key={index}
                    href={documentationLink.href}
                    className="group flex flex-row items-center gap-2.5 rounded-md px-2.5 py-[18px] focus:text-accent-foreground"
                  >
                    <div className="flex size-5 items-center justify-center rounded">
                      <ArrowUpRight className="size-3 rtl:rotate-180" />
                    </div>
                    <div className="text-sm">{documentationLink.title}</div>
                  </NavigationMenuLink>
                ))}
              </div>
            </div>
          )}
          {/* Mobile Menu > Resources */}
          {open && submenu === "resources" && (
            <div className={mobileMenuOverlayClass(contained)}>
              <div className="px-8 py-3.5 text-start text-xs tracking-widest text-muted-foreground uppercase">
                منابع
              </div>
              <div>
                {resources.map((resource, index) => (
                  <a
                    key={index}
                    href={resource.href}
                    className="group flex w-full items-start gap-x-4 border-t border-border px-8 py-7 text-start hover:bg-accent"
                  >
                    <div>
                      <div className="mb-1.5 text-base">{resource.title}</div>
                      <div className="text-sm font-normal text-muted-foreground">
                        {resource.description}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
              <div className="px-8 pt-8 pb-16">
                <div className="mb-7 text-start text-xs tracking-widest text-muted-foreground uppercase">
                  مشتریان
                </div>
                <a href="#" className="block space-y-6 text-start">
                  <div className="overflow-clip rounded-lg">
                    <img
                      src="/block-media/shadcnblocks/block/placeholder-1.svg"
                      alt="پیش‌نمایش داشبورد کمپین‌پرو"
                      className="aspect-2/1 h-full w-full object-cover object-center"
                    />
                  </div>
                  <div>
                    <div className="mb-1.5 text-base">مشتریان</div>
                    <div className="text-sm font-normal text-muted-foreground">
                      ببینید شرکت‌های پیشرو چگونه از پلتفرم ما برای نوآوری
                      به کمپین‌پرو اعتماد می‌کنند.
                    </div>
                  </div>
                </a>
              </div>
            </div>
          )}
        </NavigationMenu>
      </div>
    </section>
  );
};

export { Navbar3 };