import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as l, T as r, C as c } from "../index-sdOMz8GW.js";
import { BookOpen as d, Check as m, Eye as p, Hand as h, Brain as g, Shield as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const C = () => /* @__PURE__ */ a(n, { children: [
  /* @__PURE__ */ e(
    l,
    {
      title: "WCAG 2.1 AA Principles",
      description: "Four fundamental principles (POUR) that guide our accessibility implementation. Every component is evaluated against these criteria.",
      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-blue-500 via-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
    /* @__PURE__ */ a("div", { className: "text-center", children: [
      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "The POUR Framework" }),
      /* @__PURE__ */ e(
        r,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Each principle addresses a different aspect of accessibility"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
      {
        title: "Perceivable",
        description: "Information and UI components must be presentable to users in ways they can perceive.",
        icon: /* @__PURE__ */ e(p, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        color: "from-blue-500 via-cyan-500 to-teal-500",
        features: [
          "Color contrast ratios (4.5:1 for text)",
          "Alt text for images and icons",
          "Scalable text and responsive typography",
          "aria-live regions for dynamic content"
        ]
      },
      {
        title: "Operable",
        description: "UI components and navigation must be operable by all users regardless of input method.",
        icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        color: "from-purple-500 via-violet-500 to-indigo-500",
        features: [
          "Full keyboard navigation (Tab, Arrow, Escape)",
          "Visible focus indicators on all elements",
          "No seizure-triggering content",
          "Sufficient time for interactions"
        ]
      },
      {
        title: "Understandable",
        description: "Information and UI operation must be understandable and predictable.",
        icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        color: "from-green-500 via-emerald-500 to-teal-500",
        features: [
          "Clear and readable text content",
          "Predictable navigation behavior",
          "Input assistance (labels, helpers, errors)",
          "Error identification with aria-invalid"
        ]
      },
      {
        title: "Robust",
        description: "Content must be robust enough for various assistive technologies and future compatibility.",
        icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
        color: "from-orange-500 via-amber-500 to-yellow-500",
        features: [
          "Valid semantic HTML structure",
          "Proper ARIA roles and attributes",
          "Compatible with NVDA, JAWS, VoiceOver",
          "Standards-compliant markup"
        ]
      }
    ].map((t, i) => /* @__PURE__ */ e(
      c,
      {
        className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
        children: /* @__PURE__ */ a("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e(
              "div",
              {
                className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
                children: t.icon
              }
            ),
            /* @__PURE__ */ e(
              r,
              {
                tag: "h3",
                className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
                children: t.title
              }
            )
          ] }),
          /* @__PURE__ */ e(
            r,
            {
              tag: "p",
              className: "text-gray-600 dark:text-gray-400 leading-relaxed",
              children: t.description
            }
          ),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: t.features.map((s, o) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(m, { className: "w-4 h-4 text-green-500 shrink-0" }),
            /* @__PURE__ */ e(
              r,
              {
                tag: "span",
                className: "text-sm text-gray-600 dark:text-gray-400",
                children: s
              }
            )
          ] }, o)) })
        ] })
      },
      i
    )) })
  ] })
] });
export {
  C as default
};
