import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { H as r, T as a, ax as t } from "../index-sdOMz8GW.js";
import { BookCheck as l, Code as c, Tag as m, Eye as d, Monitor as g, Zap as p, FileText as h, AlertTriangle as N, Palette as f, Smartphone as w, Ban as v, EyeOff as y, XCircle as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const A = () => {
  const o = [
    {
      title: "Semantic HTML",
      description: "Use semantic HTML elements for better accessibility and SEO.",
      icon: /* @__PURE__ */ e(c, { className: "h-6 w-6" }),
      iconBgClassName: "from-green-500 via-emerald-500 to-teal-500"
    },
    {
      title: "Consistent Naming",
      description: "Follow consistent naming conventions across your codebase.",
      icon: /* @__PURE__ */ e(m, { className: "h-6 w-6" }),
      iconBgClassName: "from-blue-500 via-cyan-500 to-sky-500"
    },
    {
      title: "ARIA Attributes",
      description: "Implement proper ARIA attributes for screen reader support.",
      icon: /* @__PURE__ */ e(d, { className: "h-6 w-6" }),
      iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
    },
    {
      title: "Cross-Device Testing",
      description: "Test across different devices and screen sizes.",
      icon: /* @__PURE__ */ e(g, { className: "h-6 w-6" }),
      iconBgClassName: "from-orange-500 via-amber-500 to-yellow-500"
    },
    {
      title: "Performance Optimization",
      description: "Optimize for performance with lazy loading and code splitting.",
      icon: /* @__PURE__ */ e(p, { className: "h-6 w-6" }),
      iconBgClassName: "from-pink-500 via-rose-500 to-red-500"
    },
    {
      title: "Document Usage",
      description: "Document component usage with clear examples and props tables.",
      icon: /* @__PURE__ */ e(h, { className: "h-6 w-6" }),
      iconBgClassName: "from-teal-500 via-cyan-500 to-blue-500"
    }
  ], n = [
    {
      title: "Inconsistent Spacing",
      description: "Mixing arbitrary values instead of using design tokens.",
      icon: /* @__PURE__ */ e(N, { className: "h-6 w-6" }),
      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
    },
    {
      title: "Mixed Color Systems",
      description: "Using raw hex values instead of semantic color tokens.",
      icon: /* @__PURE__ */ e(f, { className: "h-6 w-6" }),
      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
    },
    {
      title: "Ignoring Responsive",
      description: "Not testing across breakpoints and device sizes.",
      icon: /* @__PURE__ */ e(w, { className: "h-6 w-6" }),
      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
    },
    {
      title: "Overriding Styles",
      description: "Overriding component styles instead of using variants.",
      icon: /* @__PURE__ */ e(v, { className: "h-6 w-6" }),
      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
    },
    {
      title: "Missing Accessibility",
      description: "Forgetting focus states, labels, and keyboard navigation.",
      icon: /* @__PURE__ */ e(y, { className: "h-6 w-6" }),
      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
    },
    {
      title: "Ignoring Design Tokens",
      description: "Not following the established token hierarchy.",
      icon: /* @__PURE__ */ e(u, { className: "h-6 w-6" }),
      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
    }
  ];
  return /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
    /* @__PURE__ */ e(
      r,
      {
        title: "Implementation Guidelines",
        description: "Best practices and common pitfalls when implementing the design system.",
        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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Best Practices" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Follow these guidelines for a consistent and maintainable implementation"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: o.map((i) => /* @__PURE__ */ e(
        t,
        {
          layout: "horizontal",
          title: i.title,
          description: i.description,
          icon: i.icon,
          iconBgClassName: i.iconBgClassName
        },
        i.title
      )) })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Common Pitfalls" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Avoid these common mistakes when working with the design system"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: n.map((i) => /* @__PURE__ */ e(
        t,
        {
          layout: "horizontal",
          title: i.title,
          description: i.description,
          icon: i.icon,
          iconBgClassName: i.iconBgClassName
        },
        i.title
      )) })
    ] })
  ] });
};
export {
  A as default
};
