// Security page: Synchronize's approach to protecting and supporting communities.

function SecurityPage({ go }) {
  useReveal();
  return (
    <main className="security-page">
      <section className="security-hero">
        <div className="page security-hero-grid">
          <div className="security-hero-copy reveal">
            <div className="security-kicker">Security at Synchronize</div>
            <h1 className="display-1">Trust is part of the product.</h1>
            <p>Synchronize carries conversations and member information across the places communities rely on. Security, privacy, and reliability are part of how we build and operate the platform, not paperwork added at the end.</p>
            <div className="security-hero-principles" aria-label="Our security priorities">
              <span>Protect the data</span><span>Support the community</span><span>Be transparent</span>
            </div>
          </div>
          <SecurityNetwork/>
        </div>
      </section>

      <section className="security-approach">
        <div className="page">
          <div className="security-section-heading detail-section-head reveal">
            <div className="eyebrow">Our approach</div>
            <h2 className="display-2">Careful by design. Clear by default.</h2>
            <p>Community leaders should be able to understand how their platform handles data, how reliability is communicated, and who will answer when questions arise.</p>
          </div>
          <div className="security-principles">
            <article className="reveal"><span>01</span><h3>Data protection</h3><p>Customer data is logically separated within our multi-tenant architecture. We design the platform to move community conversations between supported surfaces without losing sight of the responsibility that comes with that access.</p></article>
            <article className="reveal"><span>02</span><h3>Privacy-aware operations</h3><p>Our practices and safeguards are designed with GDPR requirements and international data handling in mind. Our Privacy Policy explains how information is collected, used, processed, and shared.</p><a href="#/privacy-policy" onClick={(e)=>{e.preventDefault();go('privacy-policy');}}>Read our Privacy Policy <span aria-hidden="true">→</span></a></article>
            <article className="reveal"><span>03</span><h3>Honest answers</h3><p>We answer security questions directly and represent our controls accurately. When a customer or prospective customer needs to understand our approach, our team is available to work through the details.</p></article>
          </div>
        </div>
      </section>

      <section className="security-dpa">
        <div className="page security-dpa-grid">
          <div className="security-document reveal" aria-hidden="true">
            <div className="security-document-mark"><img src="assets/logo-mark.svg" alt=""/></div>
            <span>Data Processing Addendum</span>
            <i></i><i></i><i></i><i></i>
            <b>Available on request</b>
          </div>
          <div className="security-dpa-copy reveal">
            <span>Documentation</span>
            <h2>Our DPA is available.</h2>
            <p>A robust Data Processing Addendum is available to customers and prospective customers during privacy review and contracting. We are happy to provide it and answer the questions that come with it.</p>
            <a className="btn btn-brand btn-lg" href="mailto:cory@synchronize.so?subject=Synchronize%20DPA%20request">Request our DPA <span aria-hidden="true">→</span></a>
          </div>
        </div>
      </section>

      <section className="security-transparency">
        <div className="page">
          <div className="security-transparency-heading detail-section-head detail-section-head--light reveal">
            <div className="eyebrow">Operational transparency</div>
            <h2 className="display-2">See how we’re doing and what we’re building.</h2>
            <p>Supporting communities means being accessible when something matters, communicating clearly, and continuing to improve the platform in public.</p>
          </div>
          <div className="security-resource-grid">
            <a className="security-resource security-resource-status reveal" href="https://synchronize.betteruptime.com/" target="_blank" rel="noreferrer">
              <span className="security-resource-icon"><i></i></span>
              <small>Live platform status</small>
              <strong>Current availability and incident history</strong>
              <b>View status <span aria-hidden="true">↗</span></b>
            </a>
            <a className="security-resource reveal" href="https://synchronizeso.canny.io/" target="_blank" rel="noreferrer">
              <span className="security-resource-icon">↗</span>
              <small>Feedback &amp; roadmap</small>
              <strong>Follow what we’re improving next</strong>
              <b>View roadmap <span aria-hidden="true">↗</span></b>
            </a>
            <a className="security-resource reveal" href="mailto:privacy@synchronize.so?subject=Synchronize%20security%20question">
              <span className="security-resource-icon">?</span>
              <small>Talk to our team</small>
              <strong>Bring us your security and privacy questions</strong>
              <b>Contact us <span aria-hidden="true">→</span></b>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

function SecurityNetwork() {
  return (
    <div className="security-network reveal" role="img" aria-label="Security stays at the core as conversations move across Slack, email, and the online community">
      <div className="security-orbit security-orbit-one"></div>
      <div className="security-orbit security-orbit-two"></div>
      <div className="security-orbit security-orbit-three"></div>
      <i className="security-beam beam-slack"></i><i className="security-beam beam-email"></i><i className="security-beam beam-web"></i>
      <div className="security-core"><span><img src="assets/logo-mark.svg" alt=""/></span><strong>Security at<br/>the core</strong></div>
      <div className="security-node security-node-slack"><span><PlatformIcon kind="slack" size={23}/></span><b>Slack</b></div>
      <div className="security-node security-node-email"><span><PlatformIcon kind="email" size={23}/></span><b>Email</b></div>
      <div className="security-node security-node-web"><span><PlatformIcon kind="circle" size={23}/></span><b>Community</b></div>
      <i className="security-packet security-packet-one"></i><i className="security-packet security-packet-two"></i><i className="security-packet security-packet-three"></i>
    </div>
  );
}

Object.assign(window, { SecurityPage });