<script lang="ts">
    import { m } from '$lib/paraglide/messages.js';
    const email = atob('bWFpbEBhcm9uaG9obWFubi5ldQ==');

    import { siMastodon, siGithub, siXing } from 'simple-icons';

    const socials = [
        { icon: siMastodon, label: 'Mastodon', href: 'https://fosstodon.org/@augustsnowpaw', handle: '@augustsnowpaw@fosstodon.org' },
        { icon: siGithub, label: 'GitHub', href: 'https://github.com/aronaugust', handle: 'aronaugust' },
        {
            icon: { path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' },
            label: 'LinkedIn',
            href: 'https://at.linkedin.com/in/aron-august-hohmann'
        },
        { icon: siXing, label: 'Xing', href: 'https://www.xing.com/profile/AronAugust_Hohmann', handle: 'AronAugust_Hohmann' },
    ];
</script>

<div class="max-w-3xl mx-auto px-4 py-16">
    <h1 class="text-3xl font-bold mb-10">{m.contact_heading()}</h1>

    <!-- Social icon row -->
    <div class="flex gap-4 mb-10">
        {#each socials as social}
            <a
            href={social.href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={social.label}
            class="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center hover:border-[#156793] hover:text-[#156793] transition-colors group"
            >
            <svg
                    role="img"
                    viewBox="0 0 24 24"
                    class="w-5 h-5 fill-gray-600 group-hover:fill-[#156793] transition-colors"
            >
                <path d={social.icon.path} />
            </svg>
            </a>
        {/each}
    </div>

    <p class="text-gray-700 leading-relaxed max-w-xl mb-12">{m.contact_intro()}</p>

    <!-- Email row -->
    <a
    href="mailto:{email}"
    class="flex items-center gap-4 group border border-gray-300 px-5 py-4 hover:border-[#156793] transition-colors"
    >
    <span class="text-xs font-semibold uppercase tracking-wider text-[#156793] w-24 shrink-0">{m.contact_email_label()}</span>
    <span class="text-gray-800 group-hover:text-[#156793] transition-colors">{email}</span>
    </a>
</div>