function SecurityPage() {
  return (
    <React.Fragment>
      <Nav darkOnLoad={true} />

      <section className="page-head">
        <div className="hero-bg" aria-hidden></div>
        <div className="hero-grid" aria-hidden></div>
        <div className="wrap inner">
          <div className="crumb">
            <a href="/">AiDA SDR</a> <span>/</span> Security
          </div>
          <h1>
            Your LinkedIn account<br/>
            <span className="accent">stays safe.</span>
          </h1>
          <p className="lede">
            Account safety is our number-one engineering constraint. Every send,
            every connection, every action AiDA takes is checked against rate
            limits, sending patterns, and a global deduplication ledger.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">LinkedIn account safety</div>
              <h2>Six rules<br/>we never break.</h2>
            </div>
            <p className="lede">
              Every "growth hack" tool eventually trips a pattern detector. AiDA was
              designed assuming the platform is watching, because it is. These rules
              are wired into the engine, not opt-in settings.
            </p>
          </div>

          <div className="num-list">
            <div className="item">
              <div className="n">RULE 01</div>
              <div>
                <h4>Daily and weekly caps that no setting can override.</h4>
                <p>Hard limits on connection requests, InMails, messages, and profile views, separate caps for new accounts, ramped accounts, and Sales Navigator accounts. There is no "advanced unsafe mode" anywhere in the product.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">RULE 02</div>
              <div>
                <h4>Gradual ramp-up on every new account.</h4>
                <p>New LinkedIn accounts start at ~25% of full volume and ramp over 14 days, mirroring how a real human builds their sending pattern. Disabling this is not an option.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">RULE 03</div>
              <div>
                <h4>Business hours only, timezone-aware.</h4>
                <p>Sends only fire during the sending account's local business hours, Monday through Friday. No weekend bursts, no 3am batches that look automated to anyone watching.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">RULE 04</div>
              <div>
                <h4>Randomized delays between every action.</h4>
                <p>Between profile views, sends, and follow-ups, AiDA inserts non-uniform random delays, same distribution a real human's actions follow. No two sequences run on the same clock.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">RULE 05</div>
              <div>
                <h4>Global deduplication across every campaign and seat.</h4>
                <p>No prospect is ever contacted twice from the same account, even across different campaigns, signals, or workspace seats. The dedupe ledger is permanent.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">RULE 06</div>
              <div>
                <h4>Smart routing instead of bulk sends.</h4>
                <p>Open-profile InMail when available, connection request when not, direct message when already connected. Every send takes the lowest-risk path. No mass-blast pattern ever shows up in the wire.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section outreach">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">Data security</div>
              <h2>How we handle<br/>your data.</h2>
            </div>
            <p className="lede">
              AiDA stores the minimum data we need to run signal matching and outreach.
              Your LinkedIn credentials never touch our database; lead data is encrypted
              at rest; nothing is ever sold or shared.
            </p>
          </div>

          <div className="row-list">
            <div className="row">
              <div className="lbl">CREDENTIALS</div>
              <div>
                <h4>Your LinkedIn account is never logged into by us.</h4>
                <p>AiDA connects via a secure session token stored encrypted in a hardware-backed key vault. Engineers cannot decrypt or read it. Revoke access in one click and the token is destroyed.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">DATA AT REST</div>
              <div>
                <h4>AES-256 encryption on every database, every backup.</h4>
                <p>Lead profiles, signal data, message history, all encrypted at rest. Backups are encrypted with separate keys and rotated weekly.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">DATA IN TRANSIT</div>
              <div>
                <h4>TLS 1.3 everywhere. HSTS preloaded.</h4>
                <p>Every connection, browser to API, API to LinkedIn, API to your CRM, is encrypted in transit. No plaintext anywhere on the wire.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">INFRASTRUCTURE</div>
              <div>
                <h4>SOC 2 Type II in audit. ISO 27001 next.</h4>
                <p>We host on AWS in us-east-1 with private VPCs, role-based access, and full audit logging. SOC 2 Type II audit underway; ISO 27001 follows in 2026.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">DELETION</div>
              <div>
                <h4>Delete your data in one click.</h4>
                <p>Cancel your account and your data is hard-deleted within 30 days, including backups. Want it faster? Email us and we'll wipe within 48 hours.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">COMPLIANCE</div>
              <div>
                <h4>GDPR-ready. DPA on request.</h4>
                <p>Subprocessor list, data-processing addendum, and security overview available on request. We sign reasonable customer paper without dragging it out.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap-narrow" style={{textAlign:'center'}}>
          <h2>Security questions?<br/>We answer them all.</h2>
          <p style={{marginTop:18, color:'var(--ink-mute)', fontSize:17, maxWidth:'50ch', marginLeft:'auto', marginRight:'auto'}}>
            For DPA, subprocessor list, pentest summary, or a security questionnaire response ,
            email us and you'll get it within one business day.
          </p>
          <div style={{marginTop:28, display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
            <a href="mailto:security@aidasdr.com" className="btn btn-primary">security@aidasdr.com <span className="arrow">→</span></a>
            <a href="/contact" className="btn btn-ghost-dark">General contact</a>
          </div>
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}

function init() {
  const els = document.querySelectorAll('.section');
  els.forEach(el => el.classList.add('reveal'));
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
  els.forEach(el => io.observe(el));
}

ReactDOM.createRoot(document.getElementById('root')).render(<SecurityPage />);
requestAnimationFrame(init);