<script lang="ts">
  import { onMount } from 'svelte'
  import _data from '../lib/data/contact.json'

  /**
   * 为什么要一个独立的 Contact 组件呢...？这就不得不提到，现在可是有网络爬虫的
   * 时代！我们得给我们的个人信息做反爬呀！
   *
   * 另见：https://spencermortensen.com/articles/email-obfuscation/
   */

  let data = $state<{ platform: string; name: string; href: string }[]>([])

  function unhack(raw: string) {
    return atob(raw).split('').reverse().join('')
  }

  onMount(() => {
    data = _data
  })
</script>

<table>
  <tbody>
    {#each data as item}
      <tr>
        <td>{unhack(item.platform)}</td>
        <td><a href={unhack(item.href)}>{unhack(item.name)}</a></td>
      </tr>
    {/each}
  </tbody>
</table>

<style>
  table {
    font-family: var(--font-mono);

    & tr {
      text-align: left;
      display: grid;
      grid-template-columns: 6em 16em;
      gap: 1em;
      line-height: 2em;

      @media (max-width: 767px) {
        grid-template-columns: 18em;
        gap: 0;
        line-height: 1.8em;
        margin-block: 1em;
      }

      & td:nth-child(1) {
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
          justify-content: left;
        }

        &::after {
          content: ':';
        }
      }

      & td:nth-child(2) {
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
          justify-content: end;
        }

        &::before {
          content: '[';
        }

        &::after {
          content: ']';
        }

        &:hover,
        &:has(a:focus) {
          background-color: var(--color-fg-0);
          color: var(--color-bg-0);
        }

        & > a {
          text-align: center;
          margin-inline: 1em;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }
</style>
