import { html } from "uhtml";

export const HowItWorks = html`<details>
  <summary><strong>How it Works:</strong></summary>
  <p>The first thing to understand is how public key cryptography works.</p>
  <p>
    Essentially, you generate a pair of keys that can undo the operations of
    each other. If you encrypt a message with your public key, it can only be
    decrypted by your private key.
  </p>
  <div style="width: fit-content; margin: auto;">
    <img
      width="100%"
      height="auto"
      loading="lazy"
      src="/img/public_key_crypto_chart.png"
      alt="Chart of the public key cryptography process"
    />
  </div>
  <p style="margin-top: 20px">
    This is why you're safe to share your "Request URL" out in the open. Anyone
    who accesses this URL will receive your public key, and encrypt the message
    with it along with their own private key. When you receive the URL with
    their encrypted message, you take their public key and your private key to
    undo the operations of their private key and your public key.
  </p>
  <p><strong>But of course it's not as simple as that</strong></p>
  <p>
    Traditional public-key cryptography like RSA is limited in the messages it
    can encrypt by the size of the public key. To overcome this limitation, we
    use ECDH for short public keys that can encrypt an arbitrary amount of data
    by establishing a shared "symmetric" key for encryption/decryption, which is
    beyond the scope of this explanation. But the following chart should give
    you a general idea of how the process works.
  </p>
  <img
    width="100%"
    height="auto"
    loading="lazy"
    src="/img/flowchart.png"
    alt="Flowchart of the SURE process"
  />
</details>`;