<template>
  <section id="contact" class="Contact content full gap-default">
    <h1>Kontakt <span class="highlight">&</span> Social Media</h1>
    <h2>Kannst ruhig in meine <span class="highlight">DMs sliden</span>. Oder in's Postfach.</h2>

    <article class="z-2 card flex-col gap-sm margin-top">
      <h3>Du willst einfach nur 'ne Mail schreiben?</h3>
      <p>Ja gut, passt. Meld dich unter
        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
      </p>
    </article>

    <article class="z-2 card flex-col gap-sm margin-top">
      <h3>Ich auf Social Media</h3>
      <p>Falls du irgendwo einen anderen Social Media Account von mir findest, der nicht hier aufgelistet ist, aber aktiv postet, dann ist dieser höchstwahrscheinlich <span class="highlight">Fake</span>.
        <br />Meld' dich gerne bei mir, wenn du so einen findest.
      </p>
      <ul class="social-media">
        <li v-for="({icon, name, ...rest}) in socials" :key="rest.href">
          <a v-bind="rest" target="_blank">
            <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
            <span>{{ name }}</span>
          </a>
        </li>
      </ul>
    </article>

    <article class="z-2 card flex-col gap-sm margin-top">
      <h3>Wenn ich mal ausgebucht bin</h3>
      <p>Dann buch doch einfach einen der tollen Menschen aus meinem Netzwerk!</p>

      <ClientOnly>
        <div class="network margin-top">
          <Person ref="persons" v-for="person in network" v-bind="person" />
        </div>
      </ClientOnly>
    </article>
  </section>
</template>

<script setup lang="ts">
import { socials } from '../utils/socials'

const shuffle = <T>(unshuffled : T[]) => unshuffled
  .map(value => ({ value, sort: Math.random() }))
  .sort((a, b) => a.sort - b.sort)
  .map(({ value }) => value)

const network = shuffle([
  {
    name: 'Robert Janus',
    img: 'robert',
    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
    flavour: 'Website, SEO und Conversions. Auf einen Klick.',
    link: 'https://robertjanus.de/webertoire',
  },
  // {
  //   name: 'Matthias Lehmann',
  //   img: 'matthias',
  //   tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
  //   flavour: 'Software die macht, was DU willst!',
  //   link: 'https://mind-deploy.de',
  // },
  {
    name: 'Maximilian Schluer',
    img: 'max',
    tags: ['iOS Development', 'Software-QA'],
    flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
    link: 'https://max-schluer.de',
  },
  {
    name: 'Judith Böhlert',
    img: 'judith',
    tags: ['Full-stack', 'Frontend'],
    flavour: 'MVPs und Prototypen - schnell, schick und ohne Drama.',
    link: 'https://judithboehlert.com',
  },
  {
    name: 'Kevin Damiani',
    img: 'kevin',
    tags: ['Webentwicklung', 'Frontend'],
    flavour: 'Erfahrener Frontend-Entwickler mit Fokus auf Performance, Barrierefreiheit und moderne Technologien.',
    link: 'https://kevin-damiani.de',
  },
])
</script>