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;
}

function SubHeading({ children }) {
  return <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 19, color: 'var(--text-heading)', margin: '24px 0 10px' }}>{children}</h3>;
}

const sections = [
  { id: 'what-are-cookies', title: 'What Are Cookies?' },
  { id: 'why-we-use-cookies', title: 'Why We Use Cookies' },
  { id: 'types-of-cookies', title: 'Types of Cookies' },
  { id: 'managing-cookies', title: 'Managing Cookies' },
  { id: 'third-party-cookies', title: 'Third-Party Cookies' },
  { id: 'changes-to-this-policy', title: 'Changes to This Policy' },
  { id: 'contact-us', title: 'Contact Us' },
];

function CookiePolicyPage() {
  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="cookie-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="Cookie Policy"
        intro="This Cookie Policy explains how Acorn Title uses cookies and similar technologies to improve your experience while using our 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="what-are-cookies" title="What Are Cookies?">
            <p style={{ margin: '0 0 16px' }}>Cookies are small text files that are stored on your device when you visit a website.</p>
            <p style={{ margin: '0 0 16px' }}>They help websites remember information about your visit, improve functionality, enhance security, and provide a better browsing experience.</p>
            <p style={{ margin: 0 }}>Cookies do not give us access to your computer or personal files.</p>
          </PolicySection>

          <PolicySection id="why-we-use-cookies" title="Why We Use Cookies">
            <p style={{ margin: '0 0 16px' }}>Acorn uses cookies to help our website function properly and to better understand how visitors use our website.</p>
            <p style={{ margin: '0 0 8px' }}>Cookies help us:</p>
            <PolicyList items={['Keep the website secure', 'Remember preferences', 'Improve website performance', 'Understand how visitors navigate our website', 'Identify opportunities to improve the user experience']} />
            <p style={{ margin: 0 }}>Our goal is to make the Acorn website easier to use, not more complicated.</p>
          </PolicySection>

          <PolicySection id="types-of-cookies" title="Types of Cookies We Use">
            <SubHeading>Essential Cookies</SubHeading>
            <p style={{ margin: '0 0 12px' }}>These cookies are required for the website to function properly.</p>
            <p style={{ margin: '0 0 12px' }}>They help with security, navigation, and core website functionality.</p>
            <p style={{ margin: 0 }}>Without these cookies, certain features may not work correctly.</p>

            <SubHeading>Performance & Analytics Cookies</SubHeading>
            <p style={{ margin: '0 0 12px' }}>These cookies help us understand how visitors interact with our website.</p>
            <p style={{ margin: '0 0 12px' }}>Information collected through analytics is generally aggregated and used to improve the website experience.</p>
            <p style={{ margin: 0 }}>We do not use this information to personally identify visitors.</p>

            <SubHeading>Preference Cookies</SubHeading>
            <p style={{ margin: '0 0 12px' }}>Preference cookies remember settings such as language, display preferences, or other choices that improve your browsing experience.</p>
            <p style={{ margin: 0 }}>These cookies help make future visits more convenient.</p>

            <SubHeading>Future Marketing Cookies</SubHeading>
            <p style={{ margin: '0 0 12px' }}>At this time, Acorn Title does not use advertising or marketing cookies for targeted advertising.</p>
            <p style={{ margin: 0 }}>If marketing cookies are introduced in the future, this policy will be updated accordingly.</p>
          </PolicySection>

          <PolicySection id="managing-cookies" title="Managing Cookies">
            <p style={{ margin: '0 0 8px' }}>Most web browsers allow you to:</p>
            <PolicyList items={['View cookies', 'Delete cookies', 'Block cookies', 'Control cookie settings']} />
            <p style={{ margin: '0 0 12px' }}>Disabling certain cookies may affect portions of the website or reduce functionality.</p>
            <p style={{ margin: '0 0 12px' }}>Browser settings vary by device and browser.</p>
            <p style={{ margin: 0 }}>Refer to your browser's help documentation for instructions.</p>
          </PolicySection>

          <PolicySection id="third-party-cookies" title="Third-Party Cookies">
            <p style={{ margin: '0 0 16px' }}>Certain trusted third-party services integrated into the Acorn website may also use cookies.</p>
            <p style={{ margin: '0 0 8px' }}>Examples may include:</p>
            <PolicyList items={['Mapping services', 'Website analytics', 'Scheduling tools', 'Secure document services', 'Embedded content']} />
            <p style={{ margin: '0 0 12px' }}>These providers maintain their own privacy and cookie practices.</p>
            <p style={{ margin: 0 }}>We encourage visitors to review their policies when appropriate.</p>
          </PolicySection>

          <PolicySection id="changes-to-this-policy" title="Changes to This Policy">
            <p style={{ margin: '0 0 16px' }}>We may update this Cookie Policy from time to time as our website evolves or legal requirements change.</p>
            <p style={{ margin: 0 }}>The current 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 this Cookie Policy may be directed to:</p>
            <ContactPanel
              heading="Questions About Cookies?"
              copy="If you have questions about how cookies are used on the Acorn website, we'd be happy to help."
              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="Cookie Policy" />
        </div>
      </div>
      <SiteFooter />
    </div>
  );
}

window.CookiePolicyPage = CookiePolicyPage;