import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
import { H as n, T as a, C as c, K as d } from "../index-sdOMz8GW.js";
import { FolderTree as m, Monitor as h, MousePointer as p, Layout as u, Wrench as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const N = () => /* @__PURE__ */ t(l, { children: [
  /* @__PURE__ */ e(
    n,
    {
      title: "Hook Categories",
      description: "14 hooks organized into 4 categories: Responsive & Layout, User Interaction, UI State Management, and Utilities.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Organized Collection" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Each hook category addresses a different development need"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        title: "Responsive & Layout",
        description: "Screen size detection and element measurement hooks",
        color: "from-blue-500 via-cyan-500 to-teal-500",
        hooks: [
          { name: "useBreakpoint", desc: "Returns current breakpoint (xs–4xl)" },
          { name: "useIsMobile", desc: "Returns { isMobile: boolean }" },
          { name: "useElementSize", desc: "Tracks element width/height via ResizeObserver" },
          { name: "useMeasure", desc: "Full bounds (x, y, width, height, top, right, bottom, left)" },
          { name: "useWindowScroll", desc: "Returns { x, y } scroll position" }
        ]
      },
      {
        icon: /* @__PURE__ */ e(p, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        title: "User Interaction",
        description: "Click detection, clipboard, and event handling",
        color: "from-purple-500 via-violet-500 to-indigo-500",
        hooks: [
          { name: "useClickAway", desc: "Detects clicks outside a ref element" },
          { name: "useCopyToClipboard", desc: "Clipboard copy with state tracking" },
          { name: "useEventListener", desc: "Type-safe event listener with auto-cleanup" }
        ]
      },
      {
        icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        title: "UI State Management",
        description: "Global Zustand-based state for UI behavior",
        color: "from-green-500 via-emerald-500 to-teal-500",
        hooks: [
          { name: "useGridSwitcher", desc: "Toggle compact/normal grid layout" },
          { name: "useLockBodyScroll", desc: "Lock body scroll (preserves scrollbar)" },
          { name: "useToastStore", desc: "Global toast notifications (Zustand)" },
          { name: "useScrollableSlider", desc: "Horizontal slider with prev/next controls" }
        ]
      },
      {
        icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        title: "Utilities",
        description: "Lifecycle and navigation helpers",
        color: "from-orange-500 via-amber-500 to-yellow-500",
        hooks: [
          { name: "useIsMounted", desc: "Returns boolean for component mount state" },
          { name: "useAnchorScroll", desc: "Smooth scroll to anchor links automatically" }
        ]
      }
    ].map((o, r) => /* @__PURE__ */ e(
      c,
      {
        className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
        children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e(
              "div",
              {
                className: `p-3 rounded-xl bg-linear-to-br ${o.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
                children: o.icon
              }
            ),
            /* @__PURE__ */ t("div", { children: [
              /* @__PURE__ */ e(
                a,
                {
                  tag: "h3",
                  className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
                  children: o.title
                }
              ),
              /* @__PURE__ */ e(
                a,
                {
                  tag: "p",
                  className: "text-sm text-gray-500 dark:text-gray-400",
                  children: o.description
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: o.hooks.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(d, { className: "text-dark dark:text-white shrink-0", children: s.name }),
            /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: s.desc })
          ] }, i)) })
        ] })
      },
      r
    )) })
  ] })
] });
export {
  N as default
};
