// terms.jsx — Terms of Service. Self-contained Nav + Footer + BookCallModal mount.
// Visual: two-column shell. Left rail = sticky numbered TOC. Right = content.
const { useState, useEffect, useRef } = React;

// ── Logo ──────────────────────────────────────────────────────────
function LegalLogoMark({ size = 26 }) {
  return (
    <img
      src="/img/echo-logo.jpeg"
      alt="Echo"
      width={size}
      height={size}
      style={{ display: 'block', borderRadius: 4, objectFit: 'contain' }}
    />
  );
}

// ── Verticals dropdown ────────────────────────────────────────────
function LegalVerticalsDropdown({ onPhoto }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  const closeTimer = useRef(null);
  const hoverOpen = () => { clearTimeout(closeTimer.current); setOpen(true); };
  const hoverClose = () => { closeTimer.current = setTimeout(() => setOpen(false), 120); };

  useEffect(() => {
    const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, []);

  const items = [
    { label: 'Carriers',            sub: 'Asset-based · LTL · TL',           href: '/' },
    { label: 'Oracle ERP',          sub: 'Fusion · NetSuite · JD Edwards',    href: '/erp' },
    { label: 'Freight & Logistics', sub: 'Brokers · Freight forwarders',      href: '/freight' },
    { label: 'Regenerative Health', sub: 'Clinics · Wellness · Aesthetics',   href: '/health' },
  ];

  const linkColor = onPhoto ? 'rgba(244,240,232,0.72)' : 'var(--muted)';
  const linkHover = onPhoto ? '#F4F0E8' : 'var(--ink)';

  return (
    <div ref={ref} style={{ position: 'relative' }} onMouseEnter={hoverOpen} onMouseLeave={hoverClose}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.1em',
          color: open ? linkHover : linkColor,
          textTransform: 'uppercase', transition: 'color 0.2s',
          fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5,
        }}
      >
        Verticals
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}><path d="M6 9l6 6 6-6"/></svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 14px)', left: '50%', transform: 'translateX(-50%)',
          background: 'var(--bg)', border: '1px solid var(--hairline)', borderRadius: 12,
          padding: '8px', minWidth: 240,
          boxShadow: '0 20px 60px rgba(0,0,0,0.22)', zIndex: 200,
        }}>
          {items.map(item => (
            <a key={item.href} href={item.href} onClick={() => setOpen(false)} style={{
              display: 'flex', flexDirection: 'column', gap: 2,
              padding: '11px 14px', borderRadius: 8,
              textDecoration: 'none', color: 'inherit',
              transition: 'background 0.15s',
            }}>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 600, color: 'var(--ink)', letterSpacing: '0.04em' }}>{item.label}</span>
              <span style={{ fontSize: 11, color: 'var(--muted)' }}>{item.sub}</span>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Nav ───────────────────────────────────────────────────────────
function LegalNav({ scrolled }) {
  const onPhoto = !scrolled;
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? '#0A1612' : 'transparent',
      borderBottom: scrolled ? '1px solid var(--hairline)' : '1px solid transparent',
      transition: 'all 0.4s cubic-bezier(0.16,1,0.3,1)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px', height: 68, display: 'flex', alignItems: 'center', gap: 40 }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          <LegalLogoMark size={26} />
          <span style={{
            fontFamily: 'var(--ff-display)',
            fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em',
            color: onPhoto ? '#F4F0E8' : 'var(--ink)',
            transition: 'color 0.4s',
          }}>Echo</span>
        </a>
        <div style={{ flex: 1, display: 'flex', gap: 32, alignItems: 'center' }}>
          <LegalVerticalsDropdown onPhoto={onPhoto} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="#book" data-open-book-call className="echo-cta--nav">
            <span className="echo-cta__dot" />
            <span>Get a demo</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ── Footer ────────────────────────────────────────────────────────
function LegalVerticalsRow() {
  const items = [
    { href: '/', label: 'Carriers' },
    { href: '/erp', label: 'Oracle ERP' },
    { href: '/freight', label: 'Freight & Logistics' },
    { href: '/health', label: 'Regenerative Health' },
  ];
  return (
    <div style={{ borderTop: '1px solid var(--hairline)', padding: '16px 0 18px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
      <style>{`.legal-vert-link{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color 200ms ease,border-color 200ms ease}.legal-vert-link:hover{color:var(--ink);border-bottom-color:var(--ink)}`}</style>
      <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Verticals</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        {items.map((v, i) => (
          <span key={v.href} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <a href={v.href} className="legal-vert-link" style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{v.label}</a>
            {i < items.length - 1 && <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--hairline)' }}>·</span>}
          </span>
        ))}
      </div>
    </div>
  );
}

function LegalFooter() {
  return (
    <footer className="plate-section" style={{ padding: '40px 0 60px' }}>
      <div className="glass-plate glass-plate--rounded" style={{ maxWidth: 1240, margin: '0 auto', padding: '48px 56px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap', marginBottom: 32 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <LegalLogoMark size={26} />
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 13, fontWeight: 500, letterSpacing: '0.05em' }}>Echo</span>
            </div>
            <p style={{ fontFamily: 'var(--ff-display)', fontSize: 16, color: 'var(--ink)', lineHeight: 1.5, maxWidth: 320, fontWeight: 400, letterSpacing: '-0.01em' }}>
              AI agents for back-office teams.<br/>
              <span style={{ color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300 }}>Built on your stack. Owned by you.</span>
            </p>
          </div>
          <a href="#book" data-open-book-call style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#F4F0E8',
            background: 'linear-gradient(180deg, #3B82F6 0%, #2563EB 100%)',
            padding: '10px 18px', borderRadius: 8,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontWeight: 600,
            boxShadow: '0 4px 14px rgba(37,99,235,0.3)',
            border: '1px solid rgba(96,165,250,0.5)',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#7DC9A8', boxShadow: '0 0 6px rgba(125,201,168,0.85)' }}></span>
            Get a demo
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>
        <LegalVerticalsRow />
        <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.07em' }}>
            <span>© 2026 ELITE CAPITAL INC.</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <a href="/privacy.html" className="legal-vert-link">Privacy</a>
              <span style={{ color: 'var(--hairline)' }}>·</span>
              <a href="/terms.html" className="legal-vert-link">Terms</a>
              <span style={{ color: 'var(--hairline)' }}>·</span>
              <a href="/security.html" className="legal-vert-link">Security</a>
              <span style={{ color: 'var(--hairline)' }}>·</span>
              <a href="mailto:jay@echoagents.io" className="legal-vert-link">Contact</a>
            </span>
          </span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.07em' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#7DC9A8', boxShadow: '0 0 6px rgba(125,201,168,0.6)', animation: 'pulse 2.4s ease-in-out infinite' }} />
              All systems operational
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6, fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.07em' }}>
              SOC 2
              <span style={{ fontSize: 9, opacity: 0.7 }}>(Type II in progress)</span>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ── Section component ─────────────────────────────────────────────
function LegalSection({ id, num, title, children, registerRef }) {
  const ref = useRef(null);
  useEffect(() => {
    if (registerRef) registerRef(id, ref);
  }, [id]);
  return (
    <section
      id={id}
      ref={ref}
      style={{
        scrollMarginTop: 96,
        paddingTop: 8,
        paddingBottom: 56,
        borderBottom: '1px solid var(--hairline)',
      }}
    >
      <div style={{
        fontFamily: 'var(--ff-mono)',
        fontSize: 11,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
        color: 'var(--muted)',
        marginBottom: 12,
      }}>
        <span style={{ color: 'var(--accent)' }}>{num}</span>
        <span style={{ margin: '0 8px', color: 'var(--hairline-strong)' }}>·</span>
        <span>{title}</span>
      </div>
      <h2 style={{
        fontFamily: 'var(--ff-display)',
        fontSize: 26,
        fontWeight: 500,
        letterSpacing: '-0.015em',
        color: 'var(--ink)',
        lineHeight: 1.2,
        marginBottom: 20,
      }}>{title}</h2>
      <div className="legal-body">{children}</div>
    </section>
  );
}

// ── TOC with scrollspy ────────────────────────────────────────────
function LegalToc({ items, activeId }) {
  return (
    <nav style={{
      position: 'sticky',
      top: 96,
      alignSelf: 'start',
      paddingRight: 8,
    }}>
      <div style={{
        fontFamily: 'var(--ff-mono)',
        fontSize: 10,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
        color: 'var(--muted)',
        marginBottom: 18,
      }}>Contents</div>
      <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {items.map(item => {
          const active = item.id === activeId;
          return (
            <li key={item.id} style={{ position: 'relative', paddingLeft: 14 }}>
              <span style={{
                position: 'absolute',
                left: 0,
                top: 12,
                width: 3,
                height: 18,
                borderRadius: 2,
                background: active ? 'var(--accent)' : 'transparent',
                transition: 'background 0.2s',
              }} />
              <a
                href={`#${item.id}`}
                style={{
                  display: 'block',
                  padding: '8px 0',
                  fontFamily: 'var(--ff-mono)',
                  fontSize: 11,
                  letterSpacing: '0.06em',
                  textTransform: 'uppercase',
                  color: active ? 'var(--ink)' : 'var(--muted)',
                  fontWeight: active ? 600 : 400,
                  textDecoration: 'none',
                  transition: 'color 0.2s',
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--ink-soft)'; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--muted)'; }}
              >
                <span style={{ color: active ? 'var(--accent)' : 'var(--muted-soft)', marginRight: 8 }}>{item.num}</span>
                {item.title}
              </a>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

// ── Page body ─────────────────────────────────────────────────────
function TermsContent() {
  const sections = [
    { id: 'agreement',         num: '01', title: 'Agreement' },
    { id: 'site-vs-product',   num: '02', title: 'The site and the product' },
    { id: 'permitted-use',     num: '03', title: 'Permitted use' },
    { id: 'marketing-claims',  num: '04', title: 'Marketing claims' },
    { id: 'ip',                num: '05', title: 'Intellectual property' },
    { id: 'architecture',      num: '06', title: 'The agent architecture' },
    { id: 'regulated-use',     num: '07', title: 'Healthcare and financial use' },
    { id: 'customer-controls', num: '08', title: 'Customer-controlled actions' },
    { id: 'feedback',          num: '09', title: 'Feedback' },
    { id: 'third-parties',     num: '10', title: 'Third-party links' },
    { id: 'warranties',        num: '11', title: 'Disclaimer of warranties' },
    { id: 'liability',         num: '12', title: 'Limitation of liability' },
    { id: 'indemnity',         num: '13', title: 'Indemnity' },
    { id: 'governing-law',     num: '14', title: 'Governing law' },
    { id: 'changes',           num: '15', title: 'Changes' },
    { id: 'contact',           num: '16', title: 'Contact' },
  ];

  const refs = useRef({});
  const registerRef = (id, ref) => { refs.current[id] = ref; };
  const [activeId, setActiveId] = useState(sections[0].id);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries.filter(e => e.isIntersecting);
        if (visible.length > 0) {
          visible.sort((a, b) => a.target.getBoundingClientRect().top - b.target.getBoundingClientRect().top);
          setActiveId(visible[0].target.id);
        }
      },
      { rootMargin: '-96px 0px -55% 0px', threshold: 0 }
    );
    sections.forEach(s => {
      const node = refs.current[s.id] && refs.current[s.id].current;
      if (node) observer.observe(node);
    });
    return () => observer.disconnect();
  }, []);

  return (
    <section className="plate-section" style={{ paddingTop: 120 }}>
      <div className="glass-plate glass-plate--rounded" style={{ maxWidth: 1240, margin: '0 auto', padding: '64px 64px 48px' }}>
        <div style={{ marginBottom: 48 }}>
          <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500 }}>Legal</span>
          <h1 style={{
            fontFamily: 'var(--ff-display)',
            fontSize: 56, fontWeight: 500, letterSpacing: '-0.025em',
            color: 'var(--ink)', lineHeight: 1.02,
            marginTop: 14, marginBottom: 16,
          }}>Terms of Service</h1>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
            Effective May 17, 2026 · Elite Capital Inc. · Toronto, Ontario
          </p>
        </div>

        <div className="legal-layout" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 64, alignItems: 'start' }}>
          <LegalToc items={sections} activeId={activeId} />

          <div>
            <LegalSection id="agreement" num="01" title="Agreement" registerRef={registerRef}>
              <p>Using echoagents.io means you accept these terms. If you do not, please leave the site.</p>
              <p>If you sign up on behalf of a company, you confirm you have the authority to do so.</p>
            </LegalSection>

            <LegalSection id="site-vs-product" num="02" title="The site and the product" registerRef={registerRef}>
              <ul>
                <li><strong>"Site"</strong> means echoagents.io and its sub-domains.</li>
                <li><strong>"Echo"</strong> or <strong>"Echo Agents"</strong> means the AI agent platform operated by Elite Capital Inc.</li>
                <li><strong>"MSA"</strong> means the Master Services Agreement signed at the time of purchase.</li>
              </ul>
              <p>This page covers the site only. The live product is governed by your MSA. The MSA takes precedence wherever they overlap.</p>
            </LegalSection>

            <LegalSection id="permitted-use" num="03" title="Permitted use" registerRef={registerRef}>
              <p>You may browse the site, request a demo, and download anything we publish.</p>
              <p>You may not:</p>
              <ul>
                <li>Scrape, crawl, or harvest the site at volumes that affect performance.</li>
                <li>Reverse engineer, decompile, or attempt to extract source code or model logic.</li>
                <li>Use the site to build or train a competing product.</li>
                <li>Probe for vulnerabilities outside the disclosure process described on the Security page.</li>
                <li>Submit false information through the demo form.</li>
                <li>Upload malware, spam, or content you do not have the right to share.</li>
              </ul>
              <p>We may suspend access for any of the above.</p>
            </LegalSection>

            <LegalSection id="marketing-claims" num="04" title="Marketing claims" registerRef={registerRef}>
              <p>Performance figures on the site (first agent live in 2 to 3 weeks, 98% auto, and similar) describe typical pilots. They are illustrative figures rather than guarantees.</p>
              <p>Your actual results depend on your stack, your team, the agent scope, and how clean your data is on day one.</p>
              <p>Citations from third parties (McKinsey, ATRI, PwC) are accurate to the public source named on the page.</p>
            </LegalSection>

            <LegalSection id="ip" num="05" title="Intellectual property" registerRef={registerRef}>
              <p>Echo Agents, the Echo wordmark, the Echo logo, the agent names (Triage, Docs, Cal, Ledger, Audit, Recover, Intake, Quote), and all site content are owned by Elite Capital Inc. or its licensors.</p>
              <p>You get a limited, revocable, non-transferable right to view the site for evaluation or internal business use. You may not copy, reuse, or republish the content without written permission from <a href="mailto:jay@echoagents.io">jay@echoagents.io</a>.</p>
              <p>Third-party names mentioned on the site (TruckMate, NetSuite, Oracle Fusion, Microsoft Azure, Microsoft Teams, and others) belong to their respective owners. Mentioning them does not imply an endorsement.</p>
            </LegalSection>

            <LegalSection id="architecture" num="06" title="The agent architecture" registerRef={registerRef}>
              <p>Echo agents are deterministic tool chains orchestrated by a LangGraph runtime that uses Claude Sonnet 4.6 from Anthropic for classification and structured extraction.</p>
              <p>Backend actions are executed by Echo tools with schemas, validation, and audit logs. The model does not send emails or call APIs directly.</p>
              <p>Echo runs inside your approved environment (your Microsoft Azure tenant or equivalent). The marketing site is hosted on Vercel. Customer operational data does not flow through the marketing site.</p>
            </LegalSection>

            <LegalSection id="regulated-use" num="07" title="Healthcare and financial use" registerRef={registerRef}>
              <p>Healthcare customers operate under a separate Business Associate Agreement before any PHI is processed. Financial customers operate under a separate Data Processing Addendum where local law or internal policy requires one.</p>
              <p>These addenda sit alongside your MSA and govern the handling of regulated data.</p>
            </LegalSection>

            <LegalSection id="customer-controls" num="08" title="Customer-controlled actions" registerRef={registerRef}>
              <p>You set the autonomy level for each agent and each workflow: suggest, draft, or post. Echo respects that level on every run.</p>
              <p>You can change autonomy, pause an agent, or revoke a scope at any time through your admin controls. Changes take effect on the next run.</p>
            </LegalSection>

            <LegalSection id="feedback" num="09" title="Feedback" registerRef={registerRef}>
              <p>If you send us product ideas, suggestions, or feedback, we may use them to improve Echo with no obligation back to you. You confirm you have the right to share whatever you send.</p>
            </LegalSection>

            <LegalSection id="third-parties" num="10" title="Third-party links" registerRef={registerRef}>
              <p>The site links to third-party content (vendor pages, partner logos, public reports). We do not control those sites and we are not responsible for what they publish or how they handle data.</p>
            </LegalSection>

            <LegalSection id="warranties" num="11" title="Disclaimer of warranties" registerRef={registerRef}>
              <p>The site is provided "as is" and "as available" without warranty of any kind, express or implied. We do not warrant that it will be uninterrupted, error-free, or fit for a specific purpose. We do not warrant the accuracy of every external statistic we cite. We make no warranties of merchantability, non-infringement, or fitness for any particular use, except where local law requires otherwise.</p>
            </LegalSection>

            <LegalSection id="liability" num="12" title="Limitation of liability" registerRef={registerRef}>
              <p>To the maximum extent permitted by law, Elite Capital Inc., its directors, officers, employees, and contractors are not liable for any indirect, incidental, consequential, special, or punitive damages arising from your use of the site. This includes lost profits, lost data, lost opportunities, and business interruption.</p>
              <p>For any direct claim related to the site, total liability is capped at 100 Canadian dollars.</p>
            </LegalSection>

            <LegalSection id="indemnity" num="13" title="Indemnity" registerRef={registerRef}>
              <p>You agree to indemnify and hold Elite Capital Inc. harmless from any claim arising from your misuse of the site, your breach of these terms, or your violation of third-party rights.</p>
            </LegalSection>

            <LegalSection id="governing-law" num="14" title="Governing law" registerRef={registerRef}>
              <p>These terms are governed by the laws of the Province of Ontario and the federal laws of Canada applicable within Ontario. Any dispute is subject to the exclusive jurisdiction of the courts of Toronto, Ontario.</p>
              <p>Before filing anything, you agree to attempt good-faith resolution by emailing <a href="mailto:jay@echoagents.io">jay@echoagents.io</a> with a written description of the issue. We respond within 30 days.</p>
            </LegalSection>

            <LegalSection id="changes" num="15" title="Changes" registerRef={registerRef}>
              <p>We may update these terms. When we do, we bump the effective date at the top of the page. Continued use of the site after an update means you accept the new terms. Past versions are available on request.</p>
            </LegalSection>

            <LegalSection id="contact" num="16" title="Contact" registerRef={registerRef}>
              <p>
                <strong>Elite Capital Inc.</strong><br/>
                Toronto, Ontario, Canada<br/>
                <a href="mailto:jay@echoagents.io">jay@echoagents.io</a>
              </p>
            </LegalSection>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── App ───────────────────────────────────────────────────────────
function TermsApp() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', 'dark');
  }, []);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <>
      <LegalNav scrolled={scrolled} />
      <main>
        <TermsContent />
      </main>
      <LegalFooter />
      {typeof BookCallModal !== 'undefined' && <BookCallModal />}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TermsApp />);
