Header 6

"use client"

import Link from "next/link"

import { FancyButton } from "@/components/fancy-button"
import { Icons } from "@/components/icons"
import { DesktopNav } from "@/components/header/header-6/desktop-nav"
import { MobileNav } from "@/components/header/header-6/mobile-nav"

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 w-xs rounded-3xl bg-card px-2 shadow-elevated-sm lg:w-fit">
      <div className="relative">
        <div className="flex h-14 items-center justify-between gap-2">
          <FancyButton size="icon" render={<Link href="#" />}>
            <Icons.Logo className="size-4" />
            <span className="sr-only">diarmuradi</span>
          </FancyButton>

          <div className="hidden justify-center lg:flex lg:flex-1">
            <DesktopNav />
          </div>

          <div className="flex items-center gap-2">
            <FancyButton size="lg" className="hidden lg:inline-flex">
              Sign up
            </FancyButton>
            <MobileNav />
          </div>
        </div>
      </div>
    </header>
  )
}

"use client"

import Link from "next/link"
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
import { cn } from "cn"

import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
import { IPhoneMockup } from "@/components/header/header-6/iphone-mockup"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
import { ArrowUpRightIcon } from 'lucide-react'

export const FEATURES = [
  {
    key: "payments",
    title: "Payments Hub",
    description: "Manage transfers from one dashboard.",
    href: "#",
    icon: {
      lucide: "CreditCardIcon",
      tabler: "IconCreditCard",
      hugeicons: "CreditCardIcon",
      phosphor: "CreditCardIcon",
      remixicon: "RiBankCardLine",
    },
  },
  {
    key: "invoicing",
    title: "Invoicing",
    description: "Create and send invoices instantly.",
    href: "#",
    icon: {
      lucide: "MailIcon",
      tabler: "IconBriefcase",
      hugeicons: "Mail01Icon",
      phosphor: "EnvelopeSimpleIcon",
      remixicon: "RiMailLine",
    },
  },
  {
    key: "transfers",
    title: "Payouts",
    description: "Send funds to partners and teams.",
    href: "#",
    icon: {
      lucide: "ArrowUpRightIcon",
      tabler: "IconArrowUpRight",
      hugeicons: "ArrowUpRight01Icon",
      phosphor: "ArrowUpRightIcon",
      remixicon: "RiArrowRightUpLine",
    },
  },
  {
    key: "security",
    title: "Identity Check",
    description: "Verify users before transactions.",
    href: "#",
    icon: {
      lucide: "LockIcon",
      tabler: "IconLock",
      hugeicons: "SquareLock01Icon",
      phosphor: "LockIcon",
      remixicon: "RiLockLine",
    },
  },
  {
    key: "portfolio",
    title: "Portfolio Tracking",
    description: "Track assets and performance live.",
    href: "#",
    icon: {
      lucide: "TrendingUpIcon",
      tabler: "IconTrendingUp",
      hugeicons: "AnalyticsUpIcon",
      phosphor: "TrendUpIcon",
      remixicon: "RiLineChartLine",
    },
  },
  {
    key: "alerts",
    title: "Market Alerts",
    description: "Receive price and market notifications.",
    href: "#",
    icon: {
      lucide: "TriangleAlertIcon",
      tabler: "IconAlertTriangle",
      hugeicons: "Alert02Icon",
      phosphor: "WarningCircleIcon",
      remixicon: "RiAlertLine",
    },
  },
]

export function DesktopNav() {
  return (
    <NavigationMenuPrimitive.Root className="group/navigation-menu relative flex max-w-max items-center justify-center">
      <NavigationMenuList className="gap-2">
        <NavigationMenuItem>
          <NavigationMenuLink
            className={cn(
              "text-muted-foreground! hover:bg-muted! hover:text-foreground! focus:text-foreground! focus-visible:bg-muted! dark:bg-transparent",
              navigationMenuTriggerStyle()
            )}
            render={<Link href="#" />}
          >
            Home
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger
            className={cn(
              "text-muted-foreground! hover:bg-muted! hover:text-foreground! focus:text-foreground! focus-visible:bg-muted! dark:bg-transparent",
              "data-popup-open:text-foreground data-popup-open:[&_svg]:text-primary"
            )}
          >
            Features
          </NavigationMenuTrigger>
          <NavigationMenuContent className="flex w-full transform-none! gap-4 p-2">
            <div className="flex w-xs flex-1 flex-col gap-2">
              {FEATURES.map((p) => (
                <NavigationMenuLink
                  key={p.key}
                  className="group w-full rounded-2xl!"
                  render={
                    <Link href={p.href} className="flex items-center gap-3" />
                  }
                >
                  <div className="rounded-full p-2 transition-all group-hover:bg-popover group-hover:shadow-elevated-sm">
                    <IconPlaceholder
                      {...p.icon}
                      className="size-5 text-muted-foreground transition-colors group-hover:text-primary group-focus:text-primary"
                    />
                  </div>
                  <div className="flex flex-col">
                    <div className="font-medium">{p.title}</div>
                    <div className="text-xs text-muted-foreground">
                      {p.description}
                    </div>
                  </div>
                  <ArrowUpRightIcon  className="invisible mr-2 ml-auto group-hover:visible group-hover:text-primary group-focus:text-primary" />
                </NavigationMenuLink>
              ))}
            </div>
            <div className="relative flex w-sm flex-col gap-3 overflow-hidden rounded-2xl bg-muted p-6">
              <div className="flex flex-col gap-1">
                <h3 className="font-semibold text-foreground">
                  Download the mobile app
                </h3>
                <p className="text-xs text-muted-foreground">
                  Get the app for iOS and Android.
                </p>
              </div>
              <IPhoneMockup className="absolute -bottom-48 left-1/2 h-112 w-auto max-w-none -translate-x-1/2" />
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            className={cn(
              "text-muted-foreground! hover:bg-muted! hover:text-foreground! focus:text-foreground! focus-visible:bg-muted! dark:bg-transparent",
              navigationMenuTriggerStyle()
            )}
            render={<Link href="#" />}
          >
            Pricing
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>

      <NavigationMenuPrimitive.Portal>
        <NavigationMenuPrimitive.Positioner
          side="bottom"
          align="center"
          sideOffset={24}
          arrowPadding={12}
          collisionPadding={12}
          className="cn-navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,width,height] duration-300 ease-in-out data-instant:transition-none"
          collisionAvoidance={{
            side: "none",
            align: "shift",
            fallbackAxisSide: "none",
          }}
        >
          <NavigationMenuPrimitive.Popup className="cn-navigation-menu-popup origin-top-center relative h-(--popup-height) w-(--popup-width) overflow-hidden rounded-4xl bg-popover text-popover-foreground shadow-elevated-sm! ring-0! transition-[width,height] duration-300 ease-in-out data-ending-style:scale-100! data-starting-style:scale-100!">
            <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden rounded-[inherit]" />
          </NavigationMenuPrimitive.Popup>
        </NavigationMenuPrimitive.Positioner>
      </NavigationMenuPrimitive.Portal>
    </NavigationMenuPrimitive.Root>
  )
}

/**
 * iPhone 17 Mockup Component
 * Acquired from https://www.figma.com/community/file/1560672326379407095/iphone-17-mockups
 * Original design by Max Rudberg (https://maxrudberg.com)
 *
 * This implementation is rebuilt in React with Tailwind CSS for dark mode support.
 *
 * License & Usage:
 * - Licensed under CC BY 4.0
 * - This React implementation is provided as-is for educational and commercial use
 * - Maintains all visual fidelity from the original Figma design
 *
 * Features:
 * - Full dark mode support with Tailwind CSS
 * - Optional children prop for screen content
 * - Responsive and scalable SVG
 * - Modern iPhone design with Dynamic Island
 * - Accurate camera placement on the right side
 *
 * @author Diar Muradi <https://diarmuradi.com>
 * @version 1.1.0
 * @date January 2026
 **/

export const IPhoneMockup = ({
  className = "",
  children,
}: {
  className?: string
  children?: React.ReactNode
}) => {
  return (
    <svg
      width="400"
      height="820"
      viewBox="0 0 400 820"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      {/* Device body */}
      <rect
        x="10"
        y="10"
        width="380"
        height="800"
        rx="55"
        className="fill-[#1d1d1f] dark:fill-[#1d1d1f]"
      />

      {/* Inner bezel */}
      <rect
        x="15"
        y="15"
        width="370"
        height="790"
        rx="50"
        className="fill-[#2c2c2e] dark:fill-[#2c2c2e]"
      />

      {/* Screen */}
      <g clipPath="url(#clip0_iphone_screen)">
        <rect
          x="20"
          y="20"
          width="360"
          height="780"
          rx="45"
          className="fill-white dark:fill-black"
        />

        {/* Screen content area */}
        <g clipPath="url(#clip1_iphone_content)">
          <rect
            x="20"
            y="20"
            width="360"
            height="780"
            className="fill-[#f5f5f7] dark:fill-[#000000]"
          />
          {children}
        </g>
      </g>

      {/* Dynamic Island */}
      <rect
        x="130"
        y="30"
        width="140"
        height="37"
        rx="18.5"
        className="fill-black"
      />

      {/* Camera lens - moved to right side */}
      <circle
        cx="240"
        cy="48.5"
        r="6"
        className="fill-[#0a0a0a] dark:fill-[#0a0a0a]"
      />

      {/* Front camera ring */}
      <circle
        cx="240"
        cy="48.5"
        r="7.5"
        className="fill-none stroke-[#2c2c2e] dark:stroke-[#2c2c2e]"
        strokeWidth="1"
      />

      {/* Side buttons */}
      {/* Power button */}
      <rect
        x="390"
        y="200"
        width="5"
        height="80"
        rx="2.5"
        className="fill-[#1d1d1f] dark:fill-[#1d1d1f]"
      />

      {/* Volume up */}
      <rect
        x="5"
        y="180"
        width="5"
        height="60"
        rx="2.5"
        className="fill-[#1d1d1f] dark:fill-[#1d1d1f]"
      />

      {/* Volume down */}
      <rect
        x="5"
        y="260"
        width="5"
        height="60"
        rx="2.5"
        className="fill-[#1d1d1f] dark:fill-[#1d1d1f]"
      />

      {/* Mute switch */}
      <rect
        x="5"
        y="140"
        width="5"
        height="30"
        rx="2.5"
        className="fill-[#1d1d1f] dark:fill-[#1d1d1f]"
      />

      {/* Screen shine effect */}
      <rect
        x="20"
        y="20"
        width="360"
        height="780"
        rx="45"
        className="fill-white dark:fill-white"
        opacity="0.03"
      />

      {/* Subtle edge highlight */}
      <rect
        x="15"
        y="15"
        width="370"
        height="790"
        rx="50"
        className="stroke-white dark:stroke-white"
        strokeWidth="0.5"
        fill="none"
        opacity="0.1"
      />

      <defs>
        <clipPath id="clip0_iphone_screen">
          <rect x="20" y="20" width="360" height="780" rx="45" />
        </clipPath>
        <clipPath id="clip1_iphone_content">
          <rect x="20" y="20" width="360" height="780" rx="45" />
        </clipPath>
      </defs>
    </svg>
  )
}

"use client"

import { useState } from "react"
import Link from "next/link"
import { cn } from "cn"
import { AnimatePresence, motion } from "motion/react"

import { Button } from "@/components/ui/button"
import { FEATURES } from "@/components/header/header-6/desktop-nav"
import { IPhoneMockup } from "@/components/header/header-6/iphone-mockup"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
import { ArrowUpRightIcon, ChevronDownIcon, EqualIcon, XIcon } from 'lucide-react'

function FeatureItem({
  title,
  description,
  href,
  icon,
  onNavigate,
}: (typeof FEATURES)[number] & { onNavigate: () => void }) {
  return (
    <Button
      variant="ghost"
      className="group h-fit w-full min-w-0 justify-start gap-3 rounded-2xl p-3"
      render={<Link href={href} onClick={onNavigate} />}
      nativeButton={false}
    >
      <div className="shrink-0 rounded-full p-2 transition-all group-hover:bg-popover group-hover:shadow-elevated-sm">
        <IconPlaceholder
          {...icon}
          className="size-5 text-muted-foreground transition-colors group-hover:text-primary group-focus:text-primary"
        />
      </div>
      <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5">
        <span className="font-medium">{title}</span>
        <span className="line-clamp-2 text-xs text-muted-foreground">
          {description}
        </span>
      </div>
      <ArrowUpRightIcon  className="invisible ml-auto group-hover:visible group-hover:text-primary group-focus:text-primary" />
    </Button>
  )
}

export function MobileNav() {
  const [isOpen, setIsOpen] = useState(false)
  const [featuresExpanded, setFeaturesExpanded] = useState(false)

  const closeMenu = () => {
    setIsOpen(false)
    setFeaturesExpanded(false)
  }

  return (
    <>
      <Button
        onClick={() => setIsOpen(!isOpen)}
        aria-label={isOpen ? "Close Menu" : "Open Menu"}
        aria-expanded={isOpen}
        variant="ghost"
        size="icon"
        className="size-10 lg:hidden *:[&>svg]:size-5"
      >
        {isOpen ? <XIcon /> : <EqualIcon />}
      </Button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.3, ease: "easeInOut" }}
            className="absolute top-full right-0 left-0 z-50 mt-2 no-scrollbar flex max-h-[85vh] w-full min-w-0 flex-col gap-1 overflow-x-hidden overflow-y-auto rounded-4xl bg-popover p-2 shadow-elevated-sm lg:hidden"
          >
            <Button
              variant="ghost"
              className="h-8 justify-start text-muted-foreground hover:text-foreground focus:text-foreground"
              render={<Link href="#" onClick={closeMenu} />}
              nativeButton={false}
            >
              Home
            </Button>

            <div className="flex min-w-0 flex-col">
              <Button
                onClick={() => setFeaturesExpanded(!featuresExpanded)}
                variant="ghost"
                className="flex h-8 items-center justify-between text-muted-foreground hover:text-foreground focus:text-foreground"
              >
                Features
                <ChevronDownIcon  className={cn(
                    "size-4 transition-transform",
                    featuresExpanded && "rotate-180 text-primary"
                  )} />
              </Button>
              {featuresExpanded && (
                <>
                  {FEATURES.map((feature) => (
                    <FeatureItem
                      key={feature.key}
                      title={feature.title}
                      description={feature.description}
                      href={feature.href}
                      icon={feature.icon}
                      onNavigate={closeMenu}
                    />
                  ))}

                  <div className="relative flex h-72 flex-col gap-3 overflow-hidden rounded-2xl bg-muted p-6">
                    <div className="flex flex-col gap-1">
                      <h3 className="font-semibold text-foreground">
                        Download the mobile app
                      </h3>
                      <p className="text-xs text-muted-foreground">
                        Get the app for iOS and Android.
                      </p>
                    </div>
                    <IPhoneMockup className="absolute -bottom-64 left-1/2 h-112 w-auto max-w-none -translate-x-1/2" />
                  </div>
                </>
              )}
            </div>

            <Button
              variant="ghost"
              className="h-8 justify-start text-muted-foreground hover:text-foreground focus:text-foreground"
              render={<Link href="#" onClick={closeMenu} />}
              nativeButton={false}
            >
              Pricing
            </Button>

            <Button className="h-9 w-full lg:hidden" onClick={closeMenu}>
              Sign up
            </Button>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}