نوارِ بالای سایت

"use client"

import * as React from "react"

import { BarChartIcon, MenuIcon, ReceiptIcon, UsersIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"

const PRODUCT = [
  { icon: <ReceiptIcon />, title: "فاکتور", text: "صدور و ارسالِ فاکتورِ رسمی" },
  { icon: <BarChartIcon />, title: "گزارش‌ها", text: "سود و زیانِ زنده" },
  { icon: <UsersIcon />, title: "حقوق و دستمزد", text: "فیش، بیمه و مالیات" },
]
const LINKS = ["قیمت‌ها", "مجله", "درباره ما"]

function Brand() {
  return (
    <a href="#" className="flex items-center gap-2 text-lg font-black">
      <span aria-hidden className="size-3 rounded-sm bg-[var(--dig-violet-500)]" />
      آوند
    </a>
  )
}

/**
 * نوارِ بالای سایت: برند، منوی «محصول» با پنلِ کشویی (آیکون، عنوان و یک خط توضیح)،
 * لینک‌های اصلی، و ورود و شروعِ رایگان در انتها. در موبایل همه در کشوی کناری.
 */
export default function NavbarBlock() {
  const [open, setOpen] = React.useState(false)

  return (
    <ControlSizeProvider size="xl" asChild>
      <header className="sticky top-0 z-30 border-b border-border bg-background">
        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-6 px-4 sm:px-6">
          <div className="flex items-center gap-8">
            <Brand />
            <NavigationMenu className="hidden md:flex">
              <NavigationMenuList>
                <NavigationMenuItem>
                  <NavigationMenuTrigger>محصول</NavigationMenuTrigger>
                  <NavigationMenuContent>
                    <ul className="grid w-80 gap-1 p-2">
                      {PRODUCT.map((item) => (
                        <li key={item.title}>
                          <NavigationMenuLink asChild>
                            <a href="#" className="flex flex-row items-start gap-3">
                              <span aria-hidden className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-subtle text-brand-secondary [&>svg]:size-4">
                                {item.icon}
                              </span>
                              <span className="flex flex-col gap-0.5">
                                <span className="text-sm font-medium">{item.title}</span>
                                <span className="text-xs text-muted-foreground">{item.text}</span>
                              </span>
                            </a>
                          </NavigationMenuLink>
                        </li>
                      ))}
                    </ul>
                  </NavigationMenuContent>
                </NavigationMenuItem>
                {LINKS.map((link) => (
                  <NavigationMenuItem key={link}>
                    <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
                      <a href="#">{link}</a>
                    </NavigationMenuLink>
                  </NavigationMenuItem>
                ))}
              </NavigationMenuList>
            </NavigationMenu>
          </div>
          <div className="hidden items-center gap-2 md:flex">
            <Button variant="ghost">ورود</Button>
            <Button>شروعِ رایگان</Button>
          </div>
          <Button variant="ghost" size="icon" aria-label="باز کردنِ منو" className="md:hidden" onClick={() => setOpen(true)}>
            <MenuIcon />
          </Button>
        </div>

        <Sheet open={open} onOpenChange={setOpen}>
          <ControlSizeProvider size="xl" asChild>
            <SheetContent side="start" className="flex w-[85%] max-w-xs flex-col gap-6 p-6">
              <SheetHeader className="p-0">
                <SheetTitle>
                  <Brand />
                </SheetTitle>
              </SheetHeader>
              <nav aria-label="منوی اصلی" className="flex flex-col gap-1">
                {[...PRODUCT.map((item) => item.title), ...LINKS].map((link) => (
                  <a key={link} href="#" className="flex h-12 items-center rounded-lg px-3 hover:bg-subtle">
                    {link}
                  </a>
                ))}
              </nav>
              <div className="mt-auto flex flex-col gap-2">
                <Button fullWidth>شروعِ رایگان</Button>
                <Button variant="outline" fullWidth>
                  ورود
                </Button>
              </div>
            </SheetContent>
          </ControlSizeProvider>
        </Sheet>
      </header>
    </ControlSizeProvider>
  )
}