Navigation Menu

"use client"

import { FileText, LifeBuoy, Mail } from "lucide-react"

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
const templateLinks = [
  {
    title: "Resume templates",
    description: "35+ recruiter-approved, fully ATS-friendly layouts.",
    href: "#templates",
  },
  {
    title: "Cover letter templates",
    description: "Matched designs that pair with any resume.",
    href: "#cover-letters",
  },
  {
    title: "Resume examples",
    description: "Real samples across 400+ job titles.",
    href: "#examples",
  },
]

const resourceLinks = [
  {
    title: "AI Resume Writer",
    description: "Generate tailored bullet points in seconds.",
    href: "#ai-writer",
  },
  {
    title: "ATS Resume Checker",
    description: "Score your resume against a job description.",
    href: "#ats",
  },
  {
    title: "Career blog",
    description: "Guides on interviews, salary, and job search.",
    href: "#blog",
  },
]

const gettingStarted = [
  {
    title: "Introduction",
    href: "#introduction",
    description: "Everything you need to land your next role, in one place.",
  },
  {
    title: "Import from LinkedIn",
    href: "#import",
    description:
      "Turn your LinkedIn profile into a polished resume in seconds.",
  },
  {
    title: "Pick a template",
    href: "#templates",
    description: "35+ recruiter-approved, fully ATS-friendly layouts.",
  },
]

const features = [...templateLinks, ...resourceLinks]

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Get started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="w-96">
              {gettingStarted.map((item) => (
                <li key={item.href}>
                  <NavigationMenuLink href={item.href}>
                    <div className="flex flex-col gap-1 text-sm">
                      <div className="leading-none font-medium">
                        {item.title}
                      </div>
                      <div className="line-clamp-2 text-muted-foreground">
                        {item.description}
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem className="hidden md:flex">
          <NavigationMenuTrigger>Features</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              {features.map((feature) => (
                <li key={feature.href}>
                  <NavigationMenuLink href={feature.href}>
                    <div className="flex flex-col gap-1 text-sm">
                      <div className="leading-none font-medium">
                        {feature.title}
                      </div>
                      <div className="line-clamp-2 text-muted-foreground">
                        {feature.description}
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Account</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[200px]">
              <li>
                <NavigationMenuLink
                  href="#resumes"
                  className="flex-row items-center gap-2"
                >
                  <FileText data-icon="inline-start" />
                  My resumes
                </NavigationMenuLink>
                <NavigationMenuLink
                  href="#cover-letters"
                  className="flex-row items-center gap-2"
                >
                  <Mail data-icon="inline-start" />
                  Cover letters
                </NavigationMenuLink>
                <NavigationMenuLink
                  href="#support"
                  className="flex-row items-center gap-2"
                >
                  <LifeBuoy data-icon="inline-start" />
                  Support
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="#pricing"
            className={navigationMenuTriggerStyle()}
          >
            Pricing
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}