---
import Layout from '../layouts/Layout.astro'
import Footer from '../components/Footer.astro'

const title = 'PGP public key'
const description =
  'Use to verify my digitally signed content like emails and files or to encrypt messages intended only for me.'
---

<Layout title={"Ayo's " + title} description={description}>
  <main>
    <h1>My {title}</h1>
    <p>{description}</p>

    <div class="key-block" role="region" aria-labelledby="public-key">
      <button class="copy-btn" aria-label="Copy key to clipboard">Copy</button>
      <pre
        id="public-key"><code>
-----BEGIN PGP PUBLIC KEY BLOCK-----

mDMEahs0NhYJKwYBBAHaRw8BAQdAV2CfblniKxklPgW9eYt2gBl0jMHLwtjrQaY+
BQoWdIa0FkF5byBBeWNvIDxheW9AYXljby5pbz6ImQQTFgoAQRYhBBfxPV6P9zcr
E1RcOGXmv2QVKTxlBQJqGzQ2AhsDBQkB4TOABQsJCAcCAiICBhUKCQgLAgQWAgMB
Ah4HAheAAAoJEGXmv2QVKTxlIeYA/2WLvkDapBbVmGXoACAhqcTN93/CoPyzUbhN
hHE6mmAUAQDHsgCHmh3S/Rn4NRE3Gb41kiPTBWHrlYLTj3Kiw0ASB7g4BGobNDYS
CisGAQQBl1UBBQEBB0C6OEKEIPLaNDOM6JYhvvq0Q4Mk/B1eyZBKF/b4fQvlGgMB
CAeIfgQYFgoAJhYhBBfxPV6P9zcrE1RcOGXmv2QVKTxlBQJqGzQ2AhsMBQkB4TOA
AAoJEGXmv2QVKTxlMSQBAP5ta1kUFp3HAYwcun8qmoiVq1dEJSN1LnI7HlX4ucTl
AP0YLC768PFTBm9CM5T1BE0xjJ7s4dZSrVoI4n8RSe1nCA==
=MTsv
-----END PGP PUBLIC KEY BLOCK-----
          </code></pre>
    </div>

    <p>
      <a href="/publickey.asc" class="download-link"> Download key (asc) </a>
    </p>
    <p>This key will expire on: 2027-05-30</p>
  </main>
  <Footer />
</Layout>

<script>
  /* Clipboard copy logic */
  document.querySelector('.copy-btn').addEventListener('click', async () => {
    const keyText = document.querySelector('#public-key code').innerText.trim()
    try {
      await navigator.clipboard.writeText(keyText)
      const btn = document.querySelector('.copy-btn')
      const original = btn.textContent
      btn.textContent = 'Copied!'
      setTimeout(() => {
        btn.textContent = original
      }, 2000)
    } catch (err) {
      console.error('Copy failed', err)
      alert('Unable to copy the key. Please copy it manually.')
    }
  })
</script>

<style>
  code {
    font-size: var(--font-size-sm);
  }

  .key-block {
    position: relative;
    background: #272822;
    color: #f8f8f2;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 1em 0;
  }

  .key-block code {
    display: block;
  }

  /* Copy button */
  .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--color-brand-blue-1);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
  }

  .copy-btn:hover,
  .copy-btn:focus {
    opacity: 1;
  }

  .copy-btn:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
  }
</style>