---
import Blank from '../layouts/Blank.astro';
import GameOfLife from '../components/GameOfLife.astro';

const links = [
  { label: "Blog", href: "/blog", icon: "/blog.png"},
  { label: "Github",    href: "https://github.com/DerGrumpf",                                    icon: "/github.png" },
  { label: "Gitea",     href: "https://git.cyperpunk.de",                                         icon: "/git.png" },
  { label: "Instagram", href: "https://www.instagram.com/dergrumpf/",                             icon: "/instagram.png" },
  { label: "Matrix",    href: "https://matrix.to/#/@dergrumpf:cyperpunk.de",                      icon: "/matrix.png" },
  { label: "Spotify",   href: "https://open.spotify.com/user/fackthatshiet?si=d502739d787e497e",  icon: "/spotify.png" },
  { label: "RSS",       href: "/rss.xml",                                                          icon: "/rss.png" },
];
---

<Blank title="cyperpunk.de">
  <GameOfLife />
  <div class="flex flex-col items-center gap-8">
    <div class="flex flex-col items-center gap-2">
      <img src="/avatar.jpg" alt="DerGrumpf" class="w-42 h-42 rounded-full object-cover" />
      <h1 class="text-ctp-text font-bold text-xl">Phil Keier</h1>
      <p class="text-ctp-subtext text-sm">DerGrumpf</p>
      <p class="text-ctp-subtext text-xs">Media Scientist · Programmer · Linux Enthusiast</p>
    </div>

    <div class="flex flex-col gap-3 w-full" style="max-width: 360px;">
      {links.map((link) => (
        <a
          href={link.href}
          class="flex items-center gap-4 px-5 py-3 rounded-lg bg-ctp-surface hover:bg-ctp-overlay text-ctp-text transition-colors"
		  >
		  <div
  class="w-5 h-5 shrink-0"
  style={`mask-image: url(${link.icon}); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: var(--ctp-text);`}
></div>
          <span class="text-sm font-semibold">{link.label}</span>
        </a>
      ))}
	</div>
	<div class="flex gap-2 pt-4 border-t border-ctp-surface" style="width: 360px; justify-content: center;">
    <button data-flavor="mocha"     class="theme-dot w-3 h-3 rounded-full bg-[#cba6f7] hover:scale-125 transition-transform" title="Mocha"></button>
    <button data-flavor="macchiato" class="theme-dot w-3 h-3 rounded-full bg-[#c6a0f6] hover:scale-125 transition-transform" title="Macchiato"></button>
    <button data-flavor="frappe"    class="theme-dot w-3 h-3 rounded-full bg-[#ca9ee6] hover:scale-125 transition-transform" title="Frappé"></button>
    <button data-flavor="latte"     class="theme-dot w-3 h-3 rounded-full bg-[#8839ef] hover:scale-125 transition-transform" title="Latte"></button>
  </div>
  </div>
</Blank>

<script>
  document.querySelectorAll('.theme-dot').forEach(btn => {
    btn.addEventListener('click', () => {
      const flavor = btn.getAttribute('data-flavor');
      document.documentElement.setAttribute('data-theme', flavor);
      localStorage.setItem('ctp-theme', flavor);
    });
  });
</script>
