/* VALDEX — Accessibility statement */

const UPDATED_A11Y = "May 18, 2026";

function AccessibilityPage() {
  return (
    <LegalShell
      title="Accessibility statement"
      updated={UPDATED_A11Y}
      intro={
        <React.Fragment>
          <p>
            <strong>VALDEX LLC</strong> is committed to making{" "}
            <a href="/">valdexai.com</a> usable by the widest possible audience — including
            people who rely on assistive technologies, those navigating with a keyboard,
            and visitors with reduced-motion or color-contrast needs.
          </p>
          <p>
            This statement explains what we target, what we've done, what we know is still
            imperfect, and how to tell us when something isn't working for you.
          </p>
        </React.Fragment>
      }
      sections={[
        { id: "target", h: "1. Conformance target", body: (
          <React.Fragment>
            <p>
              We target <strong>WCAG 2.1 Level AA</strong> across the entire public site.
              This is the international web-accessibility standard most U.S. and EU
              regulators reference (the U.S. DOJ April 2024 rule under ADA Title II adopts
              WCAG 2.1 AA; the EU's European Accessibility Act, in force June 2025,
              effectively requires the same).
            </p>
            <p>
              We are working toward formal <strong>WCAG 2.2 Level AA</strong> alignment as
              tooling and test coverage mature, and we treat any 2.2-only criterion (e.g.
              focus-not-obscured, drag-movement alternatives, target-size minimums) as a
              priority improvement when it surfaces in an audit.
            </p>
            <p>
              This site has been <strong>partially evaluated</strong>: every page has been
              hand-reviewed against the WCAG 2.1 AA checklist and run through automated
              tooling (axe-core, Lighthouse, pa11y). A formal third-party audit is on the
              roadmap. We will update this section when one is completed.
            </p>
          </React.Fragment>
        )},
        { id: "measures", h: "2. What we've built in", body: (
          <React.Fragment>
            <ul>
              <li><strong>Semantic HTML and document language.</strong> Every page declares <code>lang="en"</code> and uses real heading hierarchy (one H1 per page; H2/H3 nested correctly).</li>
              <li><strong>Skip-to-content link.</strong> The first focusable element on every page is "Skip to content" — visible on focus.</li>
              <li><strong>Keyboard operability.</strong> Every interactive control (navigation, hamburger drawer, FAQ accordions, pricing toggle, forms, drawer close) is reachable and operable from the keyboard, with a visible focus indicator.</li>
              <li><strong>Form labels.</strong> Every form field has an associated <code>&lt;label&gt;</code> element. Required fields are programmatically marked.</li>
              <li><strong>ARIA where it adds meaning.</strong> The hamburger button uses <code>aria-expanded</code> and <code>aria-label</code>. The FAQ uses <code>aria-expanded</code> on each item. Decorative SVG (the orbit visuals, logo mark, marquee) is marked <code>aria-hidden="true"</code> to avoid screen-reader noise.</li>
              <li><strong>Color contrast.</strong> All non-decorative text targets a 4.5:1 contrast ratio against its background (3:1 for large text). The cosmic-violet color palette has been tuned to meet AA at every type size in use.</li>
              <li><strong>Reduced motion.</strong> All scroll-reveal animations, parallax, and counters check <code>prefers-reduced-motion</code> and disable themselves when the user has indicated a preference.</li>
              <li><strong>Responsive design.</strong> The layout reflows from 320px viewports up to ultrawide displays and remains usable at 200% browser zoom.</li>
              <li><strong>Link text.</strong> No "click here" or "read more" without context — every link describes its destination.</li>
              <li><strong>Documentary photography.</strong> Decorative photographs use CSS background-image and carry attribution; meaningful imagery would carry alt text.</li>
            </ul>
          </React.Fragment>
        )},
        { id: "known", h: "3. Known limitations", body: (
          <React.Fragment>
            <p>We don't pretend the site is perfect. The following are known gaps we are tracking:</p>
            <ul>
              <li><strong>SVG mock surfaces on the services page.</strong> The illustrative SERP, AI-answer, and campaign mocks are SVG-heavy and currently <code>aria-hidden</code>. We are working on a structured text alternative for screen-reader users.</li>
              <li><strong>Live citation log on the home page.</strong> The auto-rotating log is decorative; it is <code>aria-hidden</code> to avoid disruptive announcements. A static, accessible summary of what it represents is provided in surrounding copy.</li>
              <li><strong>Third-party audit pending.</strong> Our conformance claim is based on internal review and automated tooling. We have not yet engaged an external WCAG auditor.</li>
              <li><strong>Custom select elements.</strong> The intake form uses native <code>&lt;select&gt;</code> elements (good), but we are evaluating whether the visual styling reduces the affordance for assistive-technology users on older browsers.</li>
            </ul>
            <p>
              If you encounter something not in this list, please tell us — your report
              becomes the next item on the list.
            </p>
          </React.Fragment>
        )},
        { id: "tested", h: "4. Tools and assistive technologies tested", body: (
          <React.Fragment>
            <p>Most recent internal accessibility pass (May 2026) was conducted against:</p>
            <ul>
              <li><strong>Screen readers:</strong> NVDA 2024.1 (Windows / Firefox), VoiceOver (macOS Sonoma / Safari, iOS 17 / Safari).</li>
              <li><strong>Browsers:</strong> Latest stable Chrome, Firefox, Safari, Edge.</li>
              <li><strong>Automated tooling:</strong> axe DevTools 4.9, Lighthouse 11, pa11y 8 against WCAG 2.1 AA ruleset.</li>
              <li><strong>Keyboard-only navigation</strong> on every page and form.</li>
              <li><strong>200% browser zoom</strong> reflow test on the 10 public routes.</li>
              <li><strong>Reduced-motion</strong> preference toggled on, verified all motion suppresses.</li>
            </ul>
          </React.Fragment>
        )},
        { id: "feedback", h: "5. Reporting an accessibility barrier", body: (
          <React.Fragment>
            <p>
              If a page, form, or interaction isn't working for you, we want to know — we
              take accessibility reports more seriously than feature requests. Please tell
              us:
            </p>
            <ul>
              <li>What page or feature was the problem (URL helps).</li>
              <li>What you were trying to do.</li>
              <li>What happened (or didn't).</li>
              <li>Browser, operating system, and assistive technology if you can share them.</li>
            </ul>
            <p>
              We will acknowledge your report within <strong>2 business days</strong>, give
              you a substantive response within <strong>10 business days</strong>, and tell
              you when the fix has shipped or when we have decided it cannot be addressed
              in the way you requested (with the alternative we are offering).
            </p>
            <p>
              <strong>Send reports to:</strong>{" "}
              <a href="mailto:accessibility@valdexai.com">accessibility@valdexai.com</a> ·
              or <a href="/contact">the contact form</a> · or by phone at (762) 760-1179.
            </p>
            <p>
              <strong>Formal enforcement.</strong> If you've reported a barrier and don't
              feel we've addressed it, you may file a complaint with the U.S. Department
              of Justice (ADA), your state attorney general's office, or — if you're in
              the EU/EEA — the national enforcement authority designated under the
              European Accessibility Act.
            </p>
          </React.Fragment>
        )},
        { id: "review", h: "6. Review cadence", body: (
          <p>
            We review this statement and the underlying accessibility posture on a{" "}
            <strong>quarterly</strong> cadence — typically the first week of February, May,
            August, and November — and any time a major design or feature change ships. The
            "Last updated" date reflects the most recent review.
          </p>
        )},
        { id: "altformats", h: "7. Alternative formats", body: (
          <p>
            If you need any document on this site (privacy notice, terms, citation policy,
            DPA) in an alternative format — large print, plain-text email, structured
            audio — email{" "}
            <a href="mailto:accessibility@valdexai.com">accessibility@valdexai.com</a> and
            we will produce it within 5 business days at no cost.
          </p>
        )},
        { id: "contact", h: "8. Contact", body: (
          <React.Fragment>
            <p>
              <strong>VALDEX LLC</strong><br />
              Attn: Accessibility<br />
              1309 Coffeen Ave, Ste 1200<br />
              Sheridan, WY 82801, United States<br />
              <a href="mailto:accessibility@valdexai.com">accessibility@valdexai.com</a> · (762) 760-1179
            </p>
          </React.Fragment>
        )},
      ]}
    />
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AccessibilityPage />);