const { useState, useEffect, useRef } = React;

// ============ icons ============
const PIcon = {
  Menu: (p) => (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" {...p}>
      <line x1="4" y1="6" x2="20" y2="6" stroke="currentColor" strokeWidth="1.8"/>
      <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" strokeWidth="1.8"/>
      <line x1="4" y1="18" x2="20" y2="18" stroke="currentColor" strokeWidth="1.8"/>
    </svg>
  ),
};

// ============ DRAWER BEHAVIOUR (a11y) ============
// Escape closes, Tab cycles within the drawer, focus returns to the toggle on
// close. The drawer's links are taken out of the tab order while closed by
// `visibility: hidden` in styles.css — CSS and JS have to agree here.
function useDrawer() {
  const [menuOpen, setMenuOpen] = useState(false);
  const drawerRef = useRef(null);
  const toggleRef = useRef(null);
  const wasOpen = useRef(false);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  useEffect(() => {
    if (menuOpen) {
      const first = drawerRef.current && drawerRef.current.querySelector('a');
      if (first) first.focus();
    } else if (wasOpen.current && toggleRef.current) {
      toggleRef.current.focus();
    }
    wasOpen.current = menuOpen;
  }, [menuOpen]);

  useEffect(() => {
    if (!menuOpen) return;
    const onKeyDown = (e) => {
      if (e.key === 'Escape') { setMenuOpen(false); return; }
      if (e.key !== 'Tab' || !drawerRef.current) return;
      // The toggle button sits outside the drawer, so the cycle is built by
      // hand rather than querying the drawer alone. Order matches the DOM.
      const items = [toggleRef.current, ...drawerRef.current.querySelectorAll('a')].filter(Boolean);
      if (!items.length) return;
      const last = items[items.length - 1];
      const edge = e.shiftKey ? items[0] : last;
      if (document.activeElement === edge) {
        e.preventDefault();
        (e.shiftKey ? last : items[0]).focus();
      }
    };
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener('keydown', onKeyDown);
  }, [menuOpen]);

  return { menuOpen, setMenuOpen, drawerRef, toggleRef };
}

// ============ NAV (matches site) ============
function Nav({ scrolled }) {
  const { menuOpen, setMenuOpen, drawerRef, toggleRef } = useDrawer();
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className={`nav ${scrolled ? 'nav--solid' : 'nav--floating'}`}>
      <div className="nav__inner">
        <a href="/" className="nav__logo" aria-label="Ages Productions home">
          <img src="assets/logo-primary.png" alt="Ages Productions"/>
        </a>
        <nav className="nav__links">
          <a href="/" className="nav__link">Home</a>
          <a href="Ages Productions Media Workflow.html" className="nav__link">Media Workflow</a>
          <a href="Ages Productions Self-Shoot.html" className="nav__link">Self-Shoot Systems</a>
          <a href="Ages Productions About.html" className="nav__link">About</a>
          <a href="Ages Productions Use Cases.html" className="nav__link">Use Cases</a>
          <a href="Ages Productions Contact.html" className="nav__link">Contact</a>
        </nav>
        <div className="nav__cta"></div>
        <button
          ref={toggleRef}
          className="nav__menu"
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          aria-controls="nav-drawer"
          onClick={() => setMenuOpen(o => !o)}
        >
          {menuOpen
            ? <svg viewBox="0 0 24 24" width="22" height="22" fill="none" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" strokeWidth="1.8"/><line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" strokeWidth="1.8"/></svg>
            : <PIcon.Menu width="22" height="22"/>}
        </button>
      </div>
      <div id="nav-drawer" ref={drawerRef} className={`nav__drawer ${menuOpen ? 'nav__drawer--open' : ''}`} aria-hidden={!menuOpen}>
        <div className="nav__drawer-inner">
            <a href="/" className="nav__drawer-link" onClick={closeMenu}>Home</a>
            <a href="Ages Productions Media Workflow.html" className="nav__drawer-link" onClick={closeMenu}>Media Workflow</a>
            <a href="Ages Productions Self-Shoot.html" className="nav__drawer-link" onClick={closeMenu}>Self-Shoot Systems</a>
            <a href="Ages Productions About.html" className="nav__drawer-link" onClick={closeMenu}>About</a>
            <a href="Ages Productions Use Cases.html" className="nav__drawer-link" onClick={closeMenu}>Use Cases</a>
            <a href="Ages Productions Contact.html" className="nav__drawer-link" onClick={closeMenu}>Contact</a>
        </div>
      </div>
    </header>
  );
}

// ============ FOOTER (matches site) ============
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src="assets/logo-primary.png" alt="Ages Productions" className="footer__logo"/>
          <p className="footer__tag">Field-to-post media workflow management for high-volume Reality TV productions.</p>
        </div>
        <div className="footer__cols">
          <div>
            <h6>SERVICES</h6>
            <a href="Ages Productions Media Workflow.html">Media Workflow</a>
            <a href="Ages Productions Self-Shoot.html">Self-Shoot Systems</a>
            <a href="Ages Productions Media Workflow.html#remote-cloud">Remote Delivery</a>
          </div>
          <div>
            <h6>COMPANY</h6>
            <a href="Ages Productions About.html">About</a>
            <a href="Ages Productions Use Cases.html">Use Cases</a>
            <a href="Ages Productions Contact.html">Contact</a>
          </div>
          <div>
            <h6>CONTACT</h6>
            <a href="Ages Productions Contact.html">Build a Media Plan</a>
            <span className="footer__loc">Miami · Worldwide</span>
          </div>
        </div>
      </div>
      <div className="footer__bar">
        <span>© 2026 Ages Productions. All rights reserved.</span>
        <span className="footer__legal">
          <a href="Ages Productions Privacy Policy.html">Privacy</a>
          <span className="footer__legal-sep" aria-hidden="true">·</span>
          <a href="Ages Productions Terms.html">Terms</a>
          <span className="footer__legal-sep" aria-hidden="true">·</span>
          <a href="Ages Productions Accessibility.html">Accessibility</a>
        </span>
        <span>v1.0 · Field → Post</span>
      </div>
    </footer>
  );
}

// ============ PAGE ============
function AccessibilityApp() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="legal-page accent-balanced">
      <a href="#main" className="skip-link">Skip to content</a>
      <Nav scrolled={scrolled}/>
      <main id="main" tabIndex="-1">

        <section className="legal-hero">
          <div className="legal-hero__inner">
            <div className="legal-hero__eyebrow">
              <span className="dot"></span>
              <span>ACCESSIBILITY</span>
            </div>
            <h1 className="legal-hero__title">Accessibility Statement</h1>
            <div className="legal-hero__meta">
              <span>PUBLISHED <strong>AUGUST 15, 2026</strong></span>
              <span>LAST REVIEWED <strong>AUGUST 15, 2026</strong></span>
            </div>
          </div>
        </section>


        <section className="legal-body">
          <div className="legal-body__inner">
            <p className="legal-intro">
              Ages Productions, Inc. ("Ages Productions," "we," "us," or "our") wants this
              site to be usable by everyone, including people who browse with a screen
              reader, navigate by keyboard, or rely on magnification and high contrast.
              This page states what we are aiming for, what we have fixed, and what we
              know is still outstanding.
            </p>

            <div className="legal-callout">
              <span className="legal-callout__tag">THE SHORT VERSION</span>
              <p>
                We aim to meet WCAG 2.1 Level AA. We are not claiming full conformance —
                parts of the site have not been formally tested yet, and the known gaps
                are listed in Section 4. If something on this site blocks you, tell us
                through the contact page and we will fix it.
              </p>
            </div>

            <div className="legal-section">
              <span className="legal-section__num">01</span>
              <h2>The standard we work to</h2>
              <p>
                We use the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA as
                our target. WCAG is published by the World Wide Web Consortium and is the
                benchmark most commonly applied to websites in the United States.
              </p>
              <p>
                To be precise about our status: this is a statement of intent and ongoing
                effort, <strong>not a claim of full conformance</strong>. We would rather
                describe the site accurately than overstate it.
              </p>
            </div>

            <div className="legal-section">
              <span className="legal-section__num">02</span>
              <h2>What we have addressed</h2>
              <p>
                As of the review date above, the following work has been completed across
                every public page:
              </p>
              <ul>
                <li>A "Skip to content" link and a proper main landmark on every page, so keyboard and screen-reader users can bypass the navigation.</li>
                <li>A visible keyboard focus indicator throughout.</li>
                <li>The mobile menu can be closed with the Escape key, keeps keyboard focus inside itself while open, returns focus to the button that opened it, and is fully removed from the keyboard tab order when closed.</li>
                <li>Contact-form fields are properly labelled, and validation errors are identified in text next to the field they belong to, announced to screen readers, and given keyboard focus.</li>
                <li>Text and interface colours reviewed against the WCAG 2.1 AA contrast thresholds, and adjusted where they fell short.</li>
                <li>The scrolling capability list on the home page has a pause control, and starts paused if your system is set to reduce motion. Other decorative animation on the site is small, non-essential, and also reduced under that setting.</li>
                <li>Images carry text alternatives; decorative graphics are hidden from screen readers.</li>
                <li>Page zoom is not blocked, and the site has no audio or video content requiring captions.</li>
              </ul>
            </div>

            <div className="legal-section">
              <span className="legal-section__num">03</span>
              <h2>How the site is built</h2>
              <p>
                The site is a static set of pages rendered in your browser with JavaScript.
                It requires JavaScript to be enabled. It targets current versions of Chrome,
                Safari, Firefox, and Edge.
              </p>
              <p>
                Accessibility changes are verified by code review and automated rendering
                checks. Systematic testing across browsers and assistive technologies is
                ongoing rather than complete, which is why the limitations below are stated
                plainly.
              </p>
            </div>

            <div className="legal-section">
              <span className="legal-section__num">04</span>
              <h2>Known limitations</h2>
              <p>
                We would rather name these than leave you to discover them:
              </p>
              <ul>
                <li><strong>Not yet formally tested at high zoom.</strong> Behaviour at 400% browser zoom, and at a 320-pixel-wide viewport, has not been verified against WCAG 1.4.10.</li>
                <li><strong>Some touch targets may be under 24&nbsp;pixels.</strong> A few footer links and compact labels may fall below the WCAG 2.2 minimum target size.</li>
                <li><strong>Text spacing overrides untested.</strong> We have not verified the layout against WCAG 1.4.12 when custom text spacing is applied.</li>
                <li><strong>Text over the hero photograph.</strong> The header sits over a photographic background. Contrast there varies with viewport width and has not been measured at every size.</li>
                <li><strong>Anti-spam check.</strong> The contact form uses Cloudflare Turnstile, a third-party service we do not control. It is designed to work without solving a visual puzzle, but it is not a component we can fully audit.</li>
                <li><strong>Third-party resources.</strong> Fonts and code libraries are served by third parties whose accessibility we cannot guarantee.</li>
              </ul>
            </div>

            <div className="legal-section">
              <span className="legal-section__num">05</span>
              <h2>Tell us about a problem</h2>
              <p>
                If any part of this site prevents you from getting the information you
                need, we want to hear about it — and we will provide the information
                another way while we work on a fix.
              </p>
              <p>
                Reach us through the <a href="Ages Productions Contact.html">contact page</a>.
                It helps if you can tell us the page, what you were trying to do, and the
                browser and assistive technology you were using. We aim to reply within
                five business days.
              </p>
            </div>

            <hr className="legal-divider"/>

            <div className="legal-section">
              <span className="legal-section__num">06</span>
              <h2>Review schedule</h2>
              <p>
                We review this statement, and the accessibility of the site, at least once
                a year and whenever we make significant changes to the site. The date at
                the top of this page reflects the most recent review.
              </p>
            </div>
          </div>
        </section>
      </main>

      <Footer/>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AccessibilityApp/>);