const { Header } = window.AcornTitleDesignSystem_b6a569;
const { LegalHero, PolicySection, PolicyList, ContactPanel, LegalPageNav, TOCNav, MobileTOC } = window;

function SiteFooter() {
  return (
    <footer style={{ background: 'var(--surface-section)', padding: '64px 24px 40px' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 48, marginBottom: 48 }}>
          <div style={{ flex: '1 1 220px' }}>
            <img src="assets/logo.svg" alt="Acorn Title" style={{ height: 40, marginBottom: 12 }} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', maxWidth: 260, margin: 0 }}>A trusted guide through title and escrow clear, calm, and always a step ahead.</p>
          </div>
          <div style={{ minWidth: 160 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)', marginBottom: 14 }}>Company</div>
            <a href="Acorn Homepage.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Home</a>
            <a href="For Professionals.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>For Professionals</a>
            <a href="https://app.acorn-title.com" target="_blank" rel="noopener" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Acorn App</a>
            <a href="Contact.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Contact</a>
          </div>
          <div style={{ minWidth: 160 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)', marginBottom: 14 }}>Clients</div>
            <a href="Buying.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Buying</a>
            <a href="Selling.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Selling</a>
            <a href="Order Title.html" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 10 }}>Order Title</a>
          </div>
          <div style={{ minWidth: 200 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-heading)', marginBottom: 14 }}>Visit Us</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', margin: '0 0 10px', lineHeight: 1.5 }}>1100 NW Loop 410<br />Castle Hills, TX 78213</p>
            <a href="tel:+12104653033" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', marginBottom: 6 }}>(210) 465-3033</a>
            <a href="mailto:info@acorn-title.com" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)', textDecoration: 'none' }}>info@acorn-title.com</a>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--warm-300)', paddingTop: 24, display: 'flex', flexWrap: 'wrap', gap: '10px 20px', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>© 2026 Acorn Title. Licensed Texas title insurance agent.</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 18px' }}>
            <a href="Privacy Policy.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Privacy Policy</a>
            <a href="Terms of Use.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Terms of Use</a>
            <a href="Cookie Policy.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Cookie Policy</a>
            <a href="Accessibility.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Accessibility</a>
            <a href="Website Disclaimer.html" style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none' }}>Website Disclaimer</a>
            <button onClick={() => window.AcornConsent && window.AcornConsent.open()} style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', textDecoration: 'none', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>Cookie Settings</button>
          </div>
        </div>
      </div>
    </footer>
  );
}

const logoSizeOverride = <style>{'@media(min-width:760px){header img[alt="Acorn Title"]{height:79px!important;width:196px!important}}html{scroll-behavior:smooth}.legal-toc-desktop{display:none}@media(min-width:900px){.legal-toc-desktop{display:block}.legal-toc-mobile{display:none!important}}@media(max-width:899px){.legal-layout{grid-template-columns:1fr!important}}'}</style>;

const headerLinks = () => [
  { label: 'Home', href: 'Acorn Homepage.html' },
  { label: 'Buying', href: 'Buying.html' },
  { label: 'Selling', href: 'Selling.html' },
  { label: 'For Professionals', href: 'For Professionals.html' },
  { label: 'About', href: 'About.html' },
  { label: 'Contact', href: 'Contact.html' },
];

function AppQuickLink() {
  React.useEffect(() => {
    const header = document.querySelector('header');
    if (!header) return;
    const rightGroup = header.querySelector(':scope > div > div:last-child');
    if (!rightGroup || rightGroup.querySelector('.app-quick-link')) return;
    const a = document.createElement('a');
    a.href = 'https://app.acorn-title.com';
    a.target = '_blank';
    a.rel = 'noopener';
    a.className = 'app-quick-link';
    a.setAttribute('aria-label', 'Open the Acorn App');
    a.style.cssText = 'display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;color:inherit';
    a.innerHTML = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="6.5" y="2" width="11" height="20" rx="3"></rect><rect x="10.3" y="3.4" width="3.4" height="1" rx="0.5" fill="currentColor" stroke="none"></rect></svg>';
    rightGroup.insertBefore(a, rightGroup.firstChild);
    return () => a.remove();
  }, []);
  return null;
}

function LogoHomeLink() {
  React.useEffect(() => {
    const header = document.querySelector('header');
    if (!header) return;
    const img = header.querySelector('img[alt="Acorn Title"]');
    if (!img || img.closest('a')) return;
    const a = document.createElement('a');
    a.href = 'Acorn Homepage.html';
    a.setAttribute('aria-label', 'Acorn Title home');
    a.style.cssText = 'display:flex;align-items:center';
    img.parentNode.insertBefore(a, img);
    a.appendChild(img);
    return () => {
      if (a.parentNode) { a.parentNode.insertBefore(img, a); a.remove(); }
    };
  }, []);
  return null;
}

const sections = [
  { id: 'our-commitment', title: 'Our Commitment' },
  { id: 'accessibility-standards', title: 'Accessibility Standards' },
  { id: 'how-were-improving', title: "How We're Improving" },
  { id: 'need-assistance', title: 'Need Assistance?' },
  { id: 'third-party-content', title: 'Third-Party Content' },
  { id: 'feedback', title: 'Feedback' },
  { id: 'changes-to-this-statement', title: 'Changes to This Statement' },
  { id: 'contact-us', title: 'Contact Us' },
];

function AccessibilityPage() {
  const [activeId, setActiveId] = React.useState(sections[0].id);
  React.useEffect(() => {
    const els = sections.map((s) => document.getElementById(s.id)).filter(Boolean);
    let ticking = false;
    const update = () => {
      ticking = false;
      const offset = 110;
      let current = els[0];
      for (const el of els) {
        if (el.getBoundingClientRect().top <= offset + 4) current = el;
        else break;
      }
      if (current) setActiveId(current.id);
    };
    const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);

  return (
    <div>
      {logoSizeOverride}
      <div className="accessibility-nav">
        <Header logoSrc="assets/logo.svg" links={headerLinks()} ctaLabel="Order Title" onCtaClick={() => { window.location.href = 'Order Title.html'; }} />
        <AppQuickLink />
        <LogoHomeLink />
      </div>
      <LegalHero
        label="Legal"
        title="Accessibility Statement"
        intro="We believe everyone should be able to access the information, tools, and services available through the Acorn Title website."
        lastUpdated="August 1, 2026"
      />
      <div className="legal-layout" style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 96px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 64, alignItems: 'start' }}>
        <div className="legal-toc-desktop" style={{ position: 'sticky', top: 100 }}>
          <TOCNav sections={sections} activeId={activeId} />
        </div>
        <div style={{ maxWidth: 800 }}>
          <MobileTOC sections={sections} activeId={activeId} />

          <PolicySection id="our-commitment" title="Our Commitment">
            <p style={{ margin: '0 0 16px' }}>At Acorn Title, we believe everyone deserves access to clear information and a welcoming online experience.</p>
            <p style={{ margin: '0 0 16px' }}>We are committed to designing and maintaining a website that is accessible to as many people as possible, regardless of ability or the technology they use.</p>
            <p style={{ margin: 0 }}>Accessibility is an ongoing effort, and we continually look for opportunities to improve the usability of our website.</p>
          </PolicySection>

          <PolicySection id="accessibility-standards" title="Accessibility Standards">
            <p style={{ margin: '0 0 16px' }}>Our goal is to follow recognized accessibility best practices and continually improve the experience for all visitors.</p>
            <p style={{ margin: '0 0 8px' }}>As our website evolves, we work to support:</p>
            <PolicyList items={['Keyboard navigation', 'Screen reader compatibility', 'Meaningful heading structure', 'Readable typography', 'Sufficient color contrast', 'Responsive layouts', 'Clear navigation', 'Accessible forms', 'Alternative text for meaningful images', 'Consistent interaction patterns']} />
            <p style={{ margin: 0 }}>While we strive to make every page accessible, improvements are an ongoing part of our development process.</p>
          </PolicySection>

          <PolicySection id="how-were-improving" title="How We're Improving">
            <p style={{ margin: '0 0 16px' }}>Accessibility is not a one-time project.</p>
            <p style={{ margin: '0 0 16px' }}>As we continue developing the Acorn website and online tools, we regularly review content, layouts, and interactive features to improve accessibility.</p>
            <p style={{ margin: 0 }}>Our goal is to create an experience that is easier for everyone to use.</p>
          </PolicySection>

          <PolicySection id="need-assistance" title="Need Assistance?">
            <p style={{ margin: '0 0 16px' }}>If you experience difficulty accessing any part of the Acorn website or need assistance obtaining information available on this website, we encourage you to contact us.</p>
            <p style={{ margin: 0 }}>We'll do our best to provide the information you need in a way that works for you.</p>
          </PolicySection>

          <PolicySection id="third-party-content" title="Third-Party Content">
            <p style={{ margin: '0 0 16px' }}>Some areas of the website may include services or content provided by trusted third-party providers.</p>
            <p style={{ margin: '0 0 16px' }}>While we encourage accessibility across all services we use, we may not control every aspect of third-party content.</p>
            <p style={{ margin: 0 }}>If you encounter accessibility issues involving third-party services, please let us know so we can assist whenever possible.</p>
          </PolicySection>

          <PolicySection id="feedback" title="Feedback">
            <p style={{ margin: '0 0 16px' }}>Accessibility is an ongoing effort, and your feedback helps us improve.</p>
            <p style={{ margin: 0 }}>If you have suggestions for improving the accessibility of the Acorn website, we'd appreciate hearing from you.</p>
          </PolicySection>

          <PolicySection id="changes-to-this-statement" title="Changes to This Statement">
            <p style={{ margin: '0 0 16px' }}>We may update this Accessibility Statement periodically as our website, technology, and accessibility practices evolve.</p>
            <p style={{ margin: 0 }}>The most recent revision date will always appear at the top of this page.</p>
          </PolicySection>

          <PolicySection id="contact-us" title="Contact Us">
            <p style={{ margin: '0 0 20px' }}>Questions regarding accessibility may be directed to:</p>
            <ContactPanel
              heading="Need Accessibility Assistance?"
              copy="If something on our website isn't working for you or could be made more accessible, we'd like to know. We're committed to making the Acorn experience welcoming for everyone."
              address={<React.Fragment>Acorn Title<br />1100 NW Loop 410<br />Castle Hills, TX 78213</React.Fragment>}
              phone="(210) 465-3033"
              email="info@acorn-title.com"
            />
          </PolicySection>

          <LegalPageNav active="Accessibility Statement" />
        </div>
      </div>
      <SiteFooter />
    </div>
  );
}

window.AccessibilityPage = AccessibilityPage;