// privacy.jsx — Privacy Policy. Self-contained Nav + Footer + BookCallModal mount.
// Visual: two-column shell. Left rail = sticky numbered TOC. Right = content.
// Mobile collapses to single column with TOC removed (anchors still resolve).
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 PrivacyContent() {
  const sections = [
    { id: 'about',           num: '01', title: 'About this policy' },
    { id: 'what-we-collect', num: '02', title: 'What we collect on the site' },
    { id: 'customer-data',   num: '03', title: 'What Echo touches as a customer' },
    { id: 'per-vertical',    num: '04', title: 'What Echo touches per vertical' },
    { id: 'why',             num: '05', title: 'Why we collect it' },
    { id: 'sub-processors',  num: '06', title: 'Sub-processors' },
    { id: 'retention',       num: '07', title: 'How long we keep it' },
    { id: 'your-rights',     num: '08', title: 'Your rights' },
    { id: 'healthcare',      num: '09', title: 'Healthcare data (HIPAA)' },
    { id: 'financial',       num: '10', title: 'Financial workflows (SOX)' },
    { id: 'security',        num: '11', title: 'Security' },
    { id: 'children',        num: '12', title: 'Children' },
    { id: 'changes',         num: '13', title: 'Changes' },
    { id: 'contact',         num: '14', 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,
          }}>Privacy Policy</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="about" num="01" title="About this policy" registerRef={registerRef}>
              <p>Elite Capital Inc. operates the Echo Agents product and the echoagents.io site. We are based in Toronto, Ontario.</p>
              <p>This page covers two things. The data we collect from visitors and demo requests on echoagents.io. The data Echo touches inside your tenant once you become a customer.</p>
              <p>We keep it short and specific. The full Master Services Agreement you sign at purchase covers production use of Echo in detail.</p>
            </LegalSection>

            <LegalSection id="what-we-collect" num="02" title="What we collect on the site" registerRef={registerRef}>
              <p>When you book a call, we collect what the form asks for.</p>
              <ul>
                <li>Your name and work email.</li>
                <li>Your company and your role.</li>
                <li>Your team size.</li>
                <li>The workflows you flagged.</li>
                <li>Any optional notes you add.</li>
              </ul>
              <p>Vercel logs standard server data when you visit the site: IP address, user agent, and the page paths you load.</p>
              <p>The site runs without analytics, advertising trackers, or session replay tools.</p>
            </LegalSection>

            <LegalSection id="customer-data" num="03" title="What Echo touches as a customer" registerRef={registerRef}>
              <p>Echo connects to systems you already run. The exact set depends on your vertical and which agents you deploy. Common connections include Microsoft Outlook or Gmail shared mailboxes, Microsoft Teams, your TMS (Trimble TruckMate, McLeod), your ERP (Oracle Fusion, NetSuite), your EHR (athenahealth, Epic), your dock scheduler (OpenDock), and your ELD provider (Samsara, Motive).</p>
              <p>Echo reads only the scopes you grant. Microsoft Graph scopes are limited to the shared mailboxes and Teams channels you assign to each agent. Vendor API scopes are limited to the records and actions each agent needs.</p>
              <p>Echo writes back through the same connection: posting a draft to Outlook, filing a ticket in Teams, posting a POD record in TruckMate, posting an invoice in Oracle, updating a chart note in the EHR. Every write respects the autonomy level your team sets per agent and per workflow.</p>
              <p>The data Echo reads stays in your tenant. Echo's service runs inside your Microsoft Azure tenant or an equivalent buyer-approved environment.</p>
              <p>Postgres stores case state, idempotency keys, extracted fields, audit records, and metrics inside your tenant. It does not store full email bodies, attachments, or PHI unless your contract explicitly approves longer retention for a specific workflow.</p>
              <p>Secrets live in Azure Key Vault or your equivalent secret store. Secrets are never in source code or Postgres.</p>
            </LegalSection>

            <LegalSection id="per-vertical" num="04" title="What Echo touches per vertical" registerRef={registerRef}>
              <p>The architecture is the same across verticals. The source systems and the data categories differ.</p>
              <ul>
                <li><strong>Carriers.</strong> Outlook and Teams for customer service and dispatch. Trimble TruckMate for POD, BOL, detention, and AR. OpenDock for appointments. Samsara or Motive for ELD context.</li>
                <li><strong>Oracle ERP.</strong> Outlook and Teams for finance team communication. Oracle Fusion or NetSuite for invoices, vendor records, AR, AP, and the GRC audit trail. Documents flow through email and shared drives into the ERP.</li>
                <li><strong>Freight &amp; Logistics.</strong> Outlook and Teams for shipper and carrier communication. McLeod for tenders, BOLs, settlement, and collections. DAT and Greenscreens.ai for spot-market rate intelligence. EDI 204, 210, and 214 messages where shippers require them.</li>
                <li><strong>Regenerative Health.</strong> Outlook and Teams for patient communication and intake. EHR (athenahealth, Epic) for chart notes, scheduling, intake forms, consent forms, and claims. HL7 or FHIR connectors where the EHR supports them.</li>
              </ul>
              <p>Per-agent scopes and a deeper data-flow walkthrough live on the <a href="/security.html">Security page</a>.</p>
            </LegalSection>

            <LegalSection id="why" num="05" title="Why we collect it" registerRef={registerRef}>
              <ul>
                <li><strong>Marketing site form data:</strong> to respond to your call request within 24 hours and tailor the demo to your stack.</li>
                <li><strong>Server logs:</strong> 30 days for security and abuse prevention.</li>
                <li><strong>Customer operational data:</strong> to perform the work each agent is assigned (classify an email, post a POD, file a detention claim, reconcile a remittance).</li>
              </ul>
              <p>We do not sell, rent, or trade your data. We do not use customer data to train third-party foundation models.</p>
            </LegalSection>

            <LegalSection id="sub-processors" num="06" title="Sub-processors" registerRef={registerRef}>
              <p><strong>Marketing site (echoagents.io)</strong></p>
              <ul>
                <li><strong>Vercel</strong>, United States. Hosting and edge delivery.</li>
                <li><strong>Formspree</strong>, United States. Form intake for book-a-call requests.</li>
                <li><strong>Google Workspace</strong>, United States. Echo team inbox and scheduling.</li>
              </ul>
              <p><strong>Live product</strong></p>
              <ul>
                <li><strong>Anthropic</strong>, United States. Claude Sonnet 4.6 inference for classification and structured extraction. Anthropic does not train on customer inputs.</li>
                <li><strong>Microsoft Azure</strong>, your tenant in your region. Runtime, Key Vault, Postgres.</li>
                <li><strong>Microsoft Graph</strong>, your tenant. Mailbox and Teams access where applicable.</li>
              </ul>
              <p>Your source systems (Trimble TruckMate, McLeod, Oracle Fusion, NetSuite, athenahealth, Epic, OpenDock, Samsara, Motive, DAT, Greenscreens.ai) stay on your side. Echo connects with customer-scoped credentials and does not host them.</p>
              <p>If we add or change a sub-processor that handles your data, we update this page and email active customers.</p>
            </LegalSection>

            <LegalSection id="retention" num="07" title="How long we keep it" registerRef={registerRef}>
              <ul>
                <li><strong>Marketing site form data:</strong> 24 months from your last interaction, then deleted.</li>
                <li><strong>Server logs:</strong> 30 days.</li>
                <li><strong>Customer operational data:</strong> handled per your Master Services Agreement. Default retention is short. Auditable case records are retained for the audit window your compliance team requests.</li>
                <li><strong>Email bodies:</strong> not retained in our Postgres unless your contract explicitly grants longer retention.</li>
              </ul>
            </LegalSection>

            <LegalSection id="your-rights" num="08" title="Your rights" registerRef={registerRef}>
              <p>You can access, correct, or delete your data. Email <a href="mailto:jay@echoagents.io">jay@echoagents.io</a> and we will process the request within 30 days. We may need to verify your identity first.</p>
              <ul>
                <li><strong>Canada (PIPEDA):</strong> right to access and correct your information, file a complaint with the Office of the Privacy Commissioner of Canada.</li>
                <li><strong>EU and UK (GDPR, UK GDPR):</strong> right to access, correction, deletion, portability, restriction, and objection.</li>
                <li><strong>California (CCPA, CPRA):</strong> right to know, delete, correct, and opt out of sale or sharing. We do not sell or share personal information.</li>
              </ul>
            </LegalSection>

            <LegalSection id="healthcare" num="09" title="Healthcare data (HIPAA)" registerRef={registerRef}>
              <p>For health vertical customers, Echo Agents operates as a Business Associate under HIPAA. A Business Associate Agreement is signed before any PHI is processed.</p>
              <p>Where the EHR supports it, Echo connects through HL7 or FHIR endpoints scoped to the patient records and clinical workflows your team assigns.</p>
              <p>PHI fields are redacted from operational logs and case state by default. Echo stores the minimum information needed to continue a workflow. Retention for clinical data is customer-controlled and set in the BAA.</p>
              <p>Email <a href="mailto:jay@echoagents.io">jay@echoagents.io</a> to request a BAA. The dedicated security inbox <a href="mailto:security@echoagents.io">security@echoagents.io</a> is also available.</p>
              <p>Marketing data collected through echoagents.io is not PHI and is not subject to a BAA.</p>
            </LegalSection>

            <LegalSection id="financial" num="10" title="Financial workflows (SOX)" registerRef={registerRef}>
              <p>For ERP customers operating under SOX, the Audit and Ledger agents write a tamper-evident audit record for every action that affects a financial control: invoice posted, journal created, reconciliation cleared, access change requested.</p>
              <p>Segregation of duties is enforced at the scope level. Each agent receives only the read or write scopes its job requires. The Audit agent runs read-only against Oracle GRC and never posts financial transactions.</p>
              <p>Audit records are retained for the window your compliance team specifies in the Master Services Agreement.</p>
            </LegalSection>

            <LegalSection id="security" num="11" title="Security" registerRef={registerRef}>
              <ul>
                <li>SOC 2 Type I achieved (August 2025). Type II in progress.</li>
                <li>TLS 1.2 or higher for every external connection.</li>
                <li>Customer data at rest is encrypted within your Azure tenant.</li>
                <li>Vulnerability reports: <a href="mailto:security@echoagents.io">security@echoagents.io</a>.</li>
              </ul>
              <p>The full security write-up lives at <a href="/security.html">/security</a>.</p>
            </LegalSection>

            <LegalSection id="children" num="12" title="Children" registerRef={registerRef}>
              <p>The site and product are built for business buyers. We do not direct them at children under 13 and do not knowingly collect personal data from minors. If you believe a minor submitted information, email <a href="mailto:jay@echoagents.io">jay@echoagents.io</a> and we will delete it.</p>
            </LegalSection>

            <LegalSection id="changes" num="13" title="Changes" registerRef={registerRef}>
              <p>We post updates here and bump the effective date at the top. Material changes are emailed to active customers and noted at the top of the page. Past versions are available on request.</p>
            </LegalSection>

            <LegalSection id="contact" num="14" 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> for privacy and data requests<br/>
                <a href="mailto:security@echoagents.io">security@echoagents.io</a> for security issues
              </p>
            </LegalSection>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── App ───────────────────────────────────────────────────────────
function PrivacyApp() {
  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>
        <PrivacyContent />
      </main>
      <LegalFooter />
      {typeof BookCallModal !== 'undefined' && <BookCallModal />}
    </>
  );
}

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