Project file structure:
=======================
./
    AnimatedSidebar.tsx
    Breadcrumbs.tsx
    FloatingHeader.tsx
    MacDock.tsx
    MegaMenuHeader.tsx


File Contents:
===============


--- FILE: AnimatedSidebar.tsx ---

import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { PanelLeft, X } from "lucide-react";
import { cn } from "../core/utils";

// --- HOOKS & CONTEXT ---

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const checkIsMobile = () => setIsMobile(window.innerWidth < 768);
    checkIsMobile();
    window.addEventListener("resize", checkIsMobile);
    return () => window.removeEventListener("resize", checkIsMobile);
  }, []);
  return isMobile;
}

type SidebarContextType = {
  state: "expanded" | "collapsed";
  open: boolean;
  setOpen: (open: boolean) => void;
  openMobile: boolean;
  setOpenMobile: (open: boolean) => void;
  isMobile: boolean;
  toggleSidebar: () => void;
};

const SidebarContext = createContext<SidebarContextType | null>(null);

export function useSidebar() {
  const context = useContext(SidebarContext);
  if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
  return context;
}

// --- PROVIDER ---

export const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
  }
>(({ defaultOpen = true, open: openProp, onOpenChange, className, style, children, ...props }, ref) => {
  const isMobile = useIsMobile();
  const [openMobile, setOpenMobile] = useState(false);
  const [_open, _setOpen] = useState(defaultOpen);
  
  const open = openProp ?? _open;
  
  const setOpen = useCallback(
    (value: boolean | ((val: boolean) => boolean)) => {
      const openState = typeof value === "function" ? value(open) : value;
      if (onOpenChange) onOpenChange(openState);
      else _setOpen(openState);
      if (typeof window !== "undefined") {
        localStorage.setItem("sidebar_state", openState ? "true" : "false");
      }
    },
    [onOpenChange, open]
  );

  const toggleSidebar = useCallback(() => {
    return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);
  }, [isMobile, setOpen]);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "b" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        toggleSidebar();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [toggleSidebar]);

  const state = open ? "expanded" : "collapsed";

  const contextValue = useMemo<SidebarContextType>(
    () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),
    [state, open, setOpen, isMobile, openMobile, toggleSidebar]
  );

  return (
    <SidebarContext.Provider value={contextValue}>
      <div
        style={{
          "--sidebar-width": "16rem",
          "--sidebar-width-icon": "3rem",
          ...style,
        } as React.CSSProperties}
        className={cn("group/sidebar-wrapper flex min-h-screen w-full", className)}
        ref={ref}
        {...props}
      >
        {children}
      </div>
    </SidebarContext.Provider>
  );
});
SidebarProvider.displayName = "SidebarProvider";

// --- SIDEBAR CONTAINER ---

export const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right";
    variant?: "sidebar" | "floating" | "inset";
    collapsible?: "offcanvas" | "icon" | "none";
  }
>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

  if (collapsible === "none") {
    return (
      <div className={cn("flex h-full w-[var(--sidebar-width)] flex-col bg-white dark:bg-zinc-950 text-slate-900 dark:text-slate-100", className)} ref={ref} {...props}>
        {children}
      </div>
    );
  }

  if (isMobile) {
    return (
      <AnimatePresence>
        {openMobile && (
          <div className="fixed inset-0 z-50 flex" {...props}>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              className="absolute inset-0 bg-black/50 backdrop-blur-sm"
              onClick={() => setOpenMobile(false)}
            />
            <motion.div
              initial={{ x: side === "left" ? "-100%" : "100%" }}
              animate={{ x: 0 }}
              exit={{ x: side === "left" ? "-100%" : "100%" }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className={cn(
                "relative z-50 flex h-full w-[18rem] flex-col bg-white dark:bg-zinc-950 p-0 text-slate-900 dark:text-slate-100 shadow-2xl",
                side === "right" && "ml-auto"
              )}
            >
              <button
                onClick={() => setOpenMobile(false)}
                className="absolute right-4 top-4 z-50 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
              >
                <X className="h-5 w-5" />
              </button>
              {children}
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    );
  }

  return (
    <div
      ref={ref}
      className="group peer hidden md:block text-slate-900 dark:text-slate-100"
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      data-variant={variant}
      data-side={side}
    >
      {/* Spacer to push content */}
      <div
        className={cn(
          "duration-200 relative h-screen w-[var(--sidebar-width)] bg-transparent transition-[width] ease-linear",
          "group-data-[collapsible=offcanvas]:w-0",
          "group-data-[side=right]:rotate-180",
          (variant === "floating" || variant === "inset")
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]"
            : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
        )}
      />
      {/* Actual Sidebar */}
      <div
        className={cn(
          "duration-200 fixed inset-y-0 z-10 hidden h-screen w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex",
          side === "left"
            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
          (variant === "floating" || variant === "inset")
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]"
            : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l border-slate-200 dark:border-zinc-800",
          className
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          className="flex h-full w-full flex-col bg-white dark:bg-zinc-950 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-slate-200 dark:group-data-[variant=floating]:border-zinc-800 group-data-[variant=floating]:shadow"
        >
          {children}
        </div>
      </div>
    </div>
  );
});
Sidebar.displayName = "Sidebar";

// --- TRIGGER ---

export const SidebarTrigger = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
  ({ className, onClick, ...props }, ref) => {
    const { toggleSidebar } = useSidebar();
    return (
      <button
        ref={ref}
        data-sidebar="trigger"
        className={cn("inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-slate-100 dark:hover:bg-zinc-800 text-slate-700 dark:text-slate-300 transition-colors", className)}
        onClick={(e) => { onClick?.(e); toggleSidebar(); }}
        {...props}
      >
        <PanelLeft className="h-5 w-5" />
        <span className="sr-only">Toggle Sidebar</span>
      </button>
    );
  }
);
SidebarTrigger.displayName = "SidebarTrigger";

// --- INSET (Main Content Area Wrapper) ---

export const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
  ({ className, ...props }, ref) => {
    return (
      <main
        ref={ref}
        className={cn(
          "relative flex min-h-screen flex-1 flex-col bg-white dark:bg-zinc-950",
          "peer-data-[variant=inset]:min-h-[calc(100vh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[variant=inset]:border border-slate-200 dark:border-zinc-800",
          className
        )}
        {...props}
      />
    );
  }
);
SidebarInset.displayName = "SidebarInset";

// --- LAYOUT PRIMITIVES ---

export const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />
  )
);
SidebarHeader.displayName = "SidebarHeader";

export const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props} />
  )
);
SidebarFooter.displayName = "SidebarFooter";

export const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-sidebar="content" className={cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className)} {...props} />
  )
);
SidebarContent.displayName = "SidebarContent";

export const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-sidebar="group" className={cn("relative flex w-full min-w-0 flex-col p-2", className)} {...props} />
  )
);
SidebarGroup.displayName = "SidebarGroup";

export const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider outline-none transition-[margin,opacity] ease-linear focus-visible:ring-2",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
);
SidebarGroupLabel.displayName = "SidebarGroupLabel";

export const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
  ({ className, ...props }, ref) => (
    <ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
  )
);
SidebarMenu.displayName = "SidebarMenu";

export const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
  ({ className, ...props }, ref) => (
    <li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />
  )
);
SidebarMenuItem.displayName = "SidebarMenuItem";

// --- SIDEBAR MENU BUTTON (Handles active states and tooltips) ---

export const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement | HTMLAnchorElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean;
    isActive?: boolean;
    tooltip?: string;
  }
>(({ asChild = false, isActive = false, tooltip, className, children, ...props }, ref) => {
  const { state, isMobile } = useSidebar();

  const baseClasses = cn(
    "peer/menu-button flex w-full items-center gap-3 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors disabled:pointer-events-none disabled:opacity-50",
    "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-white",
    isActive ? "bg-slate-100 text-blue-600 dark:bg-zinc-800 dark:text-blue-400 font-medium" : "text-slate-700 dark:text-slate-300",
    "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>svg]:size-4 [&>svg]:shrink-0",
    className
  );

  const innerContent = (
    <>
      {children}
      {/* Zero-Dependency CSS Tooltip for Collapsed State */}
      {tooltip && state === "collapsed" && !isMobile && (
        <span className="absolute left-full ml-2 hidden whitespace-nowrap rounded-md bg-slate-900 dark:bg-white px-2 py-1 text-xs text-white dark:text-slate-900 shadow-md group-hover/menu-item:block z-50">
          {tooltip}
        </span>
      )}
    </>
  );

  if (asChild && React.isValidElement(children)) {
    return React.cloneElement(children, {
      ...props,
      ...children.props,
      className: cn(baseClasses, children.props.className),
      "data-sidebar": "menu-button",
      "data-active": isActive,
      // @ts-ignore
      ref,
      children: innerContent,
    });
  }

  return (
    <button
      ref={ref as any}
      data-sidebar="menu-button"
      data-active={isActive}
      className={baseClasses}
      {...(props as any)}
    >
      {innerContent}
    </button>
  );
});
SidebarMenuButton.displayName = "SidebarMenuButton";

// --- SUB MENU ---

export const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
  ({ className, ...props }, ref) => (
    <ul
      ref={ref}
      data-sidebar="menu-sub"
      className={cn(
        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-slate-200 dark:border-zinc-800 px-2.5 py-0.5",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
);
SidebarMenuSub.displayName = "SidebarMenuSub";

export const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
  ({ ...props }, ref) => <li ref={ref} {...props} />
);
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";

export const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & { asChild?: boolean; isActive?: boolean }
>(({ asChild = false, isActive, className, children, ...props }, ref) => {
  const baseClasses = cn(
    "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sm outline-none transition-colors",
    isActive ? "bg-slate-100 text-blue-600 dark:bg-zinc-800 dark:text-blue-400 font-medium" : "text-slate-600 dark:text-slate-400 hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-white",
    className
  );

  if (asChild && React.isValidElement(children)) {
    return React.cloneElement(children, {
      ...props,
      ...children.props,
      className: cn(baseClasses, children.props.className),
      "data-active": isActive,
      // @ts-ignore
      ref,
    });
  }

  return (
    <a ref={ref} data-active={isActive} className={baseClasses} {...props}>
      {children}
    </a>
  );
});
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";

--- FILE: Breadcrumbs.tsx ---

import * as React from "react";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "../core/utils";

// --- Utility for standard asChild functionality without Radix ---
function Slot({ children, ...props }: any) {
  if (React.isValidElement(children)) {
    return React.cloneElement(children, {
      ...props,
      ...children.props,
      className: cn(props.className, children.props.className),
    } as any);
  }
  return null;
}

export const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode;
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
Breadcrumb.displayName = "Breadcrumb";

export const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
  ({ className, ...props }, ref) => (
    <ol
      ref={ref}
      className={cn(
        "flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400 sm:gap-2.5",
        className,
      )}
      {...props}
    />
  ),
);
BreadcrumbList.displayName = "BreadcrumbList";

export const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
  ({ className, ...props }, ref) => (
    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
  ),
);
BreadcrumbItem.displayName = "BreadcrumbItem";

export const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean;
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a";

  return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-slate-900 dark:hover:text-white", className)}
      {...props}
    />
  );
});
BreadcrumbLink.displayName = "BreadcrumbLink";

export const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("font-medium text-slate-900 dark:text-white", className)}
      {...props}
    />
  ),
);
BreadcrumbPage.displayName = "BreadcrumbPage";

export const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
  <li role="presentation" aria-hidden="true" className={className} {...props}>
    {children ?? <ChevronRight className="w-3.5 h-3.5" strokeWidth={2.5} />}
  </li>
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

export const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex size-5 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="w-4 h-4" strokeWidth={2} />
    <span className="sr-only">More</span>
  </span>
);
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";

--- FILE: FloatingHeader.tsx ---

import React, { useState, useEffect } from 'react';
import { Grid2X2PlusIcon, MenuIcon, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '../core/utils';

export interface NavLink {
  label: string;
  href: string;
}

export interface FloatingHeaderProps {
  brandName?: string;
  logo?: React.ReactNode;
  links?: NavLink[];
  loginText?: string;
  signupText?: string;
  onLoginClick?: () => void;
  onSignupClick?: () => void;
  className?: string;
}

const DEFAULT_LINKS: NavLink[] = [
  { label: 'Features', href: '#' },
  { label: 'Pricing', href: '#' },
  { label: 'About', href: '#' },
];

export function FloatingHeader({
  brandName = "Acme",
  logo = <Grid2X2PlusIcon className="size-5" />,
  links = DEFAULT_LINKS,
  loginText = "Login",
  signupText = "Get Started",
  onLoginClick,
  onSignupClick,
  className
}: FloatingHeaderProps) {
  const [open, setOpen] = useState(false);

  // Lock body scroll when mobile menu is open
  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [open]);

  // Common button classes to replace Shadcn dependencies
  const btnBase = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50";
  const btnGhost = "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-slate-50 text-slate-700 dark:text-slate-300";
  const btnOutline = "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-slate-50 text-slate-900 dark:text-white";
  const btnPrimary = "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 shadow-sm";
  const btnSm = "h-8 px-3 text-xs";
  const btnDefault = "h-9 px-4 py-2";

  return (
    <>
      <header
        className={cn(
          'sticky top-5 z-40 mx-auto w-full max-w-3xl rounded-xl border border-slate-200 dark:border-zinc-800 shadow-md',
          'bg-white/90 dark:bg-zinc-950/90 backdrop-blur-lg',
          className
        )}
      >
        <nav className="mx-auto flex items-center justify-between p-2">
          {/* Logo & Brand */}
          <a href="/" className="hover:bg-slate-100 dark:hover:bg-zinc-800 text-slate-900 dark:text-white flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 transition-colors duration-200">
            {logo}
            <p className="font-mono text-base font-bold tracking-tight">{brandName}</p>
          </a>
          
          {/* Desktop Links */}
          <div className="hidden items-center gap-1 lg:flex">
            {links.map((link) => (
              <a
                key={link.label}
                className={cn(btnBase, btnGhost, btnSm)}
                href={link.href}
              >
                {link.label}
              </a>
            ))}
          </div>

          {/* Desktop Actions & Mobile Menu Toggle */}
          <div className="flex items-center gap-2 pr-1">
            <button 
              className={cn(btnBase, btnPrimary, btnSm, "hidden lg:inline-flex")}
              onClick={onLoginClick}
            >
              {loginText}
            </button>
            <button
              className={cn(btnBase, btnOutline, "h-8 w-8 px-0 lg:hidden")}
              onClick={() => setOpen(true)}
              aria-label="Open menu"
            >
              <MenuIcon className="size-4" />
            </button>
          </div>
        </nav>
      </header>

      {/* Mobile Drawer */}
      <AnimatePresence>
        {open && (
          <>
            {/* Backdrop */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
              className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm lg:hidden"
              onClick={() => setOpen(false)}
              aria-hidden="true"
            />

            {/* Sidebar */}
            <motion.div
              initial={{ x: '-100%' }}
              animate={{ x: 0 }}
              exit={{ x: '-100%' }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className="fixed top-0 left-0 z-50 h-full w-3/4 max-w-sm bg-white/95 dark:bg-zinc-950/95 backdrop-blur-xl border-r border-slate-200 dark:border-zinc-800 shadow-2xl flex flex-col justify-between lg:hidden"
            >
              <div>
                <div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-zinc-800">
                  <div className="flex items-center gap-2 text-slate-900 dark:text-white">
                    {logo}
                    <p className="font-mono text-base font-bold">{brandName}</p>
                  </div>
                  <button 
                    onClick={() => setOpen(false)}
                    className="p-2 -mr-2 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition-colors rounded-md hover:bg-slate-100 dark:hover:bg-zinc-800"
                  >
                    <X className="size-5" />
                  </button>
                </div>
                
                <div className="grid gap-2 overflow-y-auto p-6">
                  {links.map((link) => (
                    <a
                      key={link.label}
                      className={cn(btnBase, btnGhost, btnDefault, 'justify-start w-full text-base')}
                      href={link.href}
                      onClick={() => setOpen(false)}
                    >
                      {link.label}
                    </a>
                  ))}
                </div>
              </div>

              <div className="p-6 border-t border-slate-200 dark:border-zinc-800 flex flex-col gap-3">
                <button 
                  className={cn(btnBase, btnOutline, btnDefault, "w-full")}
                  onClick={(e) => {
                    setOpen(false);
                    onLoginClick?.();
                  }}
                >
                  {loginText}
                </button>
                <button 
                  className={cn(btnBase, btnPrimary, btnDefault, "w-full")}
                  onClick={(e) => {
                    setOpen(false);
                    onSignupClick?.();
                  }}
                >
                  {signupText}
                </button>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  );
}

--- FILE: MacDock.tsx ---

import React, { useRef } from "react";
import { motion, useMotionValue, useSpring, useTransform, MotionValue } from "framer-motion";
import { cn } from "../core/utils";

export interface DockProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  magnification?: number;
  distance?: number;
  direction?: "top" | "middle" | "bottom";
  children: React.ReactNode;
}

const DEFAULT_MAGNIFICATION = 60;
const DEFAULT_DISTANCE = 140;

export const MacDock = React.forwardRef<HTMLDivElement, DockProps>(
  (
    {
      className,
      children,
      magnification = DEFAULT_MAGNIFICATION,
      distance = DEFAULT_DISTANCE,
      direction = "bottom",
      ...props
    },
    ref,
  ) => {
    const mouseX = useMotionValue(Infinity);

    const renderChildren = () => {
      return React.Children.map(children, (child) => {
        if (React.isValidElement(child) && child.type === DockIcon) {
          return React.cloneElement(child, {
            ...child.props,
            mouseX: mouseX,
            magnification: magnification,
            distance: distance,
          } as DockIconProps);
        }
        return child;
      });
    };

    return (
      <motion.div
        ref={ref}
        onMouseMove={(e) => mouseX.set(e.clientX)}
        onMouseLeave={() => mouseX.set(Infinity)}
        {...props}
        className={cn(
          "mx-auto flex h-[58px] w-max gap-2 rounded-2xl border border-slate-200 dark:border-zinc-800 p-2",
          "bg-white/10 dark:bg-black/10 backdrop-blur-md shadow-sm",
          {
            "items-start": direction === "top",
            "items-center": direction === "middle",
            "items-end": direction === "bottom",
          },
          className
        )}
      >
        {renderChildren()}
      </motion.div>
    );
  },
);

MacDock.displayName = "MacDock";

export interface DockIconProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: number;
  magnification?: number;
  distance?: number;
  mouseX?: MotionValue<number>;
  className?: string;
  children?: React.ReactNode;
}

export const DockIcon = ({
  size = 40,
  magnification = DEFAULT_MAGNIFICATION,
  distance = DEFAULT_DISTANCE,
  mouseX,
  className,
  children,
  ...props
}: DockIconProps) => {
  const ref = useRef<HTMLDivElement>(null);

  // If mouseX isn't provided (rendered outside Dock), use a dummy value
  const defaultMouseX = useMotionValue(Infinity);
  const actualMouseX = mouseX || defaultMouseX;

  const distanceCalc = useTransform(actualMouseX, (val: number) => {
    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
    return val - bounds.x - bounds.width / 2;
  });

  const widthSync = useTransform(
    distanceCalc,
    [-distance, 0, distance],
    [size, magnification, size],
  );

  const width = useSpring(widthSync, {
    mass: 0.1,
    stiffness: 150,
    damping: 12,
  });

  return (
    <motion.div
      ref={ref}
      style={{ width }}
      className={cn(
        "flex aspect-square cursor-pointer items-center justify-center rounded-full bg-slate-100 dark:bg-zinc-800 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors border border-slate-200 dark:border-zinc-700",
        className,
      )}
      {...props}
    >
      {children}
    </motion.div>
  );
};

DockIcon.displayName = "DockIcon";

--- FILE: MegaMenuHeader.tsx ---

import React, { useState, useEffect, useRef, Fragment } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, MoveRight, X, ChevronDown } from "lucide-react";
import { cn } from "../core/utils";

// --- Types ---
export interface MegaMenuSubItem {
  title: string;
  href: string;
}

export interface MegaMenuItem {
  title: string;
  href?: string;
  description?: string;
  items?: MegaMenuSubItem[];
}

export interface MegaMenuHeaderProps {
  brandName?: string;
  logo?: React.ReactNode;
  menuItems?: MegaMenuItem[];
  ctaPrimaryText?: string;
  ctaSecondaryText?: string;
  ctaTertiaryText?: string;
  onCtaPrimaryClick?: () => void;
  onCtaSecondaryClick?: () => void;
  onCtaTertiaryClick?: () => void;
  className?: string;
}

// --- Default Data ---
const DEFAULT_MENU_ITEMS: MegaMenuItem[] = [
  {
    title: "Home",
    href: "/",
  },
  {
    title: "Product",
    description:
      "Managing a small business today is already tough. We make it easy.",
    items: [
      { title: "Reports", href: "#" },
      { title: "Statistics", href: "#" },
      { title: "Dashboards", href: "#" },
      { title: "Recordings", href: "#" },
    ],
  },
  {
    title: "Company",
    description: "Learn more about our mission, our team, and our investors.",
    items: [
      { title: "About us", href: "#" },
      { title: "Fundraising", href: "#" },
      { title: "Investors", href: "#" },
      { title: "Contact us", href: "#" },
    ],
  },
];

// --- Subcomponent: Desktop Dropdown ---
const DesktopDropdown = ({ item }: { item: MegaMenuItem }) => {
  const [isOpen, setIsOpen] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const handleMouseEnter = () => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    timeoutRef.current = setTimeout(() => {
      setIsOpen(false);
    }, 150); // slight delay to make moving to the dropdown easier
  };

  return (
    <div
      className="relative"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <button className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-slate-50 h-9 px-4 py-2 text-slate-700 dark:text-slate-300 gap-1 group">
        {item.title}
        <ChevronDown
          className={cn(
            "w-4 h-4 transition-transform duration-200",
            isOpen && "rotate-180",
          )}
        />
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: 10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 10, scale: 0.95 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
            className="absolute top-full left-0 pt-2 z-50"
          >
            <div className="w-[450px] p-4 bg-white dark:bg-zinc-950 border border-slate-200 dark:border-zinc-800 rounded-xl shadow-xl">
              <div className="flex flex-col lg:grid grid-cols-2 gap-4">
                <div className="flex flex-col h-full justify-between bg-slate-50 dark:bg-zinc-900/50 p-4 rounded-lg">
                  <div className="flex flex-col">
                    <p className="text-base font-medium text-slate-900 dark:text-white mb-2">
                      {item.title}
                    </p>
                    <p className="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
                      {item.description}
                    </p>
                  </div>
                  <button className="mt-6 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-white dark:text-slate-900 dark:hover:bg-white/90 h-9 px-4 py-2 w-max">
                    Book a call today
                  </button>
                </div>
                <div className="flex flex-col text-sm h-full justify-center gap-1">
                  {item.items?.map((subItem) => (
                    <a
                      href={subItem.href}
                      key={subItem.title}
                      className="flex flex-row justify-between items-center hover:bg-slate-100 dark:hover:bg-zinc-800 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white py-2 px-3 rounded-md transition-colors"
                    >
                      <span className="font-medium">{subItem.title}</span>
                      <MoveRight className="w-4 h-4 opacity-50" />
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

// --- Main Component ---
export function MegaMenuHeader({
  brandName = "NOVA UI",
  logo,
  menuItems = DEFAULT_MENU_ITEMS,
  ctaPrimaryText = "Get started",
  ctaSecondaryText = "Sign in",
  ctaTertiaryText = "Book a demo",
  onCtaPrimaryClick,
  onCtaSecondaryClick,
  onCtaTertiaryClick,
  className,
}: MegaMenuHeaderProps) {
  const [isOpen, setOpen] = useState(false);

  // Common button classes
  const btnBase =
    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2";
  const btnGhost =
    "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-slate-50 text-slate-700 dark:text-slate-300";
  const btnOutline =
    "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-slate-50 text-slate-900 dark:text-white";
  const btnPrimary =
    "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-white dark:text-slate-900 dark:hover:bg-white/90 shadow-sm";

  return (
    <header
      className={cn(
        "w-full z-40 fixed top-0 left-0 bg-white dark:bg-zinc-950 border-b border-slate-200 dark:border-zinc-800",
        className,
      )}
    >
      <div className="container mx-auto px-4 md:px-6 relative min-h-20 flex gap-4 flex-row lg:grid lg:grid-cols-3 items-center">
        {/* Left: Desktop Navigation */}
        <div className="justify-start items-center gap-2 lg:flex hidden flex-row">
          <nav className="flex justify-start items-center gap-2 flex-row">
            {menuItems.map((item) => (
              <Fragment key={item.title}>
                {item.href && !item.items ? (
                  <a href={item.href} className={cn(btnBase, btnGhost)}>
                    {item.title}
                  </a>
                ) : (
                  <DesktopDropdown item={item} />
                )}
              </React.Fragment>
            ))}
          </nav>
        </div>

        {/* Center: Brand */}
        <div className="flex lg:justify-center items-center gap-2 w-full lg:w-auto">
          <a
            href="/"
            className="flex items-center gap-2 text-slate-900 dark:text-white"
          >
            {logo}
            <p className="font-bold text-lg tracking-tight">{brandName}</p>
          </a>
        </div>

        {/* Right: CTAs */}
        <div className="hidden lg:flex justify-end w-full gap-3">
          <button
            className={cn(btnBase, btnGhost)}
            onClick={onCtaTertiaryClick}
          >
            {ctaTertiaryText}
          </button>
          <div className="w-px h-5 bg-slate-200 dark:bg-zinc-800 self-center mx-1"></div>
          <button
            className={cn(btnBase, btnOutline)}
            onClick={onCtaSecondaryClick}
          >
            {ctaSecondaryText}
          </button>
          <button
            className={cn(btnBase, btnPrimary)}
            onClick={onCtaPrimaryClick}
          >
            {ctaPrimaryText}
          </button>
        </div>

        {/* Mobile Toggle */}
        <div className="flex shrink-0 lg:hidden items-center justify-end">
          <button
            className={cn(btnBase, btnGhost, "px-2")}
            onClick={() => setOpen(!isOpen)}
            aria-label="Toggle menu"
          >
            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {/* Mobile Menu Dropdown */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="absolute top-full left-0 w-full bg-white dark:bg-zinc-950 border-b border-slate-200 dark:border-zinc-800 shadow-xl overflow-hidden lg:hidden"
          >
            <div className="container mx-auto px-6 py-6 flex flex-col gap-6">
              {menuItems.map((item) => (
                <div key={item.title} className="flex flex-col gap-3">
                  {item.href && !item.items ? (
                    <a
                      href={item.href}
                      className="flex justify-between items-center text-slate-900 dark:text-white font-medium text-lg border-b border-slate-100 dark:border-zinc-900 pb-2"
                    >
                      <span>{item.title}</span>
                      <MoveRight className="w-4 h-4 text-slate-400" />
                    </a>
                  ) : (
                    <>
                      <p className="text-lg font-bold text-slate-900 dark:text-white border-b border-slate-100 dark:border-zinc-900 pb-2">
                        {item.title}
                      </p>
                      <div className="flex flex-col gap-3 pl-2 border-l-2 border-slate-100 dark:border-zinc-900 ml-2">
                        {item.items?.map((subItem) => (
                          <a
                            key={subItem.title}
                            href={subItem.href}
                            className="flex justify-between items-center text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white"
                          >
                            <span className="font-medium">{subItem.title}</span>
                            <MoveRight className="w-4 h-4 opacity-50" />
                          </a>
                        ))}
                      </div>
                    </>
                  )}
                </div>
              ))}

              <div className="flex flex-col gap-3 pt-4 border-t border-slate-200 dark:border-zinc-800">
                <button
                  className={cn(btnBase, btnOutline, "w-full justify-center")}
                  onClick={onCtaSecondaryClick}
                >
                  {ctaSecondaryText}
                </button>
                <button
                  className={cn(btnBase, btnPrimary, "w-full justify-center")}
                  onClick={onCtaPrimaryClick}
                >
                  {ctaPrimaryText}
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}
