import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as d, T as a, C as r } from "../index-sdOMz8GW.js";
import { ShieldCheck as m, CheckCircle as h, Check as p, XCircle as u, X as g, Palette as x, ArrowDownUp as b, AlertCircle as f, Bell as w } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const T = () => {
  const l = [
    "Use semantic HTML elements (button, nav, main, aside, header)",
    "Always provide label prop on Input, Select, and Checkbox",
    "Use helperText to give additional context to form fields",
    "Test with keyboard-only navigation before shipping",
    "Use aria-label when visual label is not possible",
    "Set dismissible={true} on non-critical alerts",
    "Use the correct variant on Alert (info/warning/error/success)",
    "Trust built-in ARIA — components auto-wire roles and attributes"
  ], n = [
    "Don't use div or span for interactive elements — use Button",
    "Don't rely on color alone to convey information",
    "Don't suppress focus outlines (outline-none without replacement)",
    "Don't use aria-label when a visible label exists (duplicates)",
    "Don't auto-play animations without prefers-reduced-motion check",
    "Don't trap focus in elements that shouldn't trap (non-modal)",
    "Don't use placeholder as a substitute for label",
    "Don't disable zoom on mobile viewports"
  ], o = [
    {
      title: "Color Contrast",
      description: "Maintain minimum 4.5:1 ratio for normal text, 3:1 for large text. Use browser DevTools to check.",
      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-purple-500" })
    },
    {
      title: "Focus Order",
      description: "Ensure Tab order follows visual reading order. Never use positive tabIndex values.",
      icon: /* @__PURE__ */ e(b, { className: "w-5 h-5 text-blue-500" })
    },
    {
      title: "Error Messages",
      description: "Connect errors to fields via aria-describedby. tucu-ui Input/Select/Checkbox do this automatically.",
      icon: /* @__PURE__ */ e(f, { className: "w-5 h-5 text-red-500" })
    },
    {
      title: "Live Regions",
      description: 'Use Alert component for dynamic content — it includes role="alert" and aria-live="assertive" built-in.',
      icon: /* @__PURE__ */ e(w, { className: "w-5 h-5 text-amber-500" })
    }
  ];
  return /* @__PURE__ */ t(c, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "Best Practices",
        description: "Guidelines for maintaining accessibility when building with tucu-ui. Follow these patterns to ensure your application is usable by everyone.",
        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-green-500 via-emerald-500 to-teal-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: "Do's and Don'ts" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Quick reference for accessible patterns"
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
            /* @__PURE__ */ e(h, { className: "w-5 h-5 text-green-500" }),
            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-green-700 dark:text-green-400", children: "Do" })
          ] }),
          l.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(p, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "span",
                className: "text-sm text-gray-600 dark:text-gray-400",
                children: s
              }
            )
          ] }, i))
        ] }) }),
        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-4", children: [
            /* @__PURE__ */ e(u, { className: "w-5 h-5 text-red-500" }),
            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-red-700 dark:text-red-400", children: "Don't" })
          ] }),
          n.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(g, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "span",
                className: "text-sm text-gray-600 dark:text-gray-400",
                children: s
              }
            )
          ] }, i))
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Quick Tips" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Common accessibility patterns to keep in mind"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((s, i) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
          s.icon,
          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: s.title })
        ] }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
            children: s.description
          }
        )
      ] }) }, i)) })
    ] })
  ] });
};
export {
  T as default
};
