import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
import { H as i, T as a, aj as o, ax as l } from "../index-sdOMz8GW.js";
import { Activity as n, Info as c, CheckCircle as m, Keyboard as d, Volume2 as p, AlertTriangle as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const N = () => /* @__PURE__ */ t(s, { children: [
  /* @__PURE__ */ e(
    i,
    {
      title: "Implementation Status",
      description: "Current state of accessibility compliance across the tucu-ui component library. We follow WCAG 2.1 AA guidelines and are transparent about our progress.",
      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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { 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: "Current State" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Overview of accessibility features across core components"
        }
      )
    ] }),
    /* @__PURE__ */ e(o, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ e(c, { className: "h-5 w-5 shrink-0" }),
      /* @__PURE__ */ e(a, { tag: "p", className: "text-sm", children: "This library is actively working towards full accessibility compliance. Most interactive components include proper ARIA attributes, keyboard navigation, and screen reader support." })
    ] }) }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Fully Accessible",
        description: "Input, Checkbox, Modal, Alert, Button, Tabs, Drawer, Select — all with ARIA attributes and keyboard support.",
        iconBgClassName: "from-green-500 to-emerald-500"
      },
      {
        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Keyboard Navigation",
        description: "Tab, Escape, Enter/Space, Arrow keys — all interactive components are fully operable without a mouse.",
        iconBgClassName: "from-blue-500 to-cyan-500"
      },
      {
        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Screen Reader Ready",
        description: "Semantic HTML, ARIA labels, live regions, role attributes, and aria-describedby connections throughout.",
        iconBgClassName: "from-purple-500 to-violet-500"
      },
      {
        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "Known Limitation",
        description: "Modal component lacks focus trapping (Tab can escape). Drawer has full focus trap — Modal improvement planned.",
        iconBgClassName: "from-amber-500 to-orange-500"
      }
    ].map((r) => /* @__PURE__ */ e(l, { layout: "horizontal", ...r }, r.title)) })
  ] })
] });
export {
  N as default
};
