<template>
  <header class="hero-section-gradient from-blue-600 to-indigo-700 py-20 text-white">
    <div class="hero-container text-center">
      <h1 class="hero-title mb-6">{{ t('contact.title') }}</h1>
      <p class="hero-subtitle mb-10 text-blue-100">{{ t('contact.subtitle') }}</p>
      <a :href="DISCORD_INVITE_LINK" target="_blank" class="discord-hero-btn">
        <i class="fa-brands fa-discord text-2xl"></i>
        {{ t('contact.joinDiscord') }}
      </a>
    </div>
  </header>

  <main class="main-container py-16 px-4">
    <div class="contact-grid">
      <div class="contact-card">
        <h2 class="contact-card-title">
          <i class="fa-solid fa-envelope text-3xl text-indigo-500"></i> {{ t('contact.emailUs') }}
        </h2>
        <p class="contact-card-desc">{{ t('contact.emailDesc') }}</p>
        <div class="email-link cursor-pointer" @click="openEmail">
          contact@teletype.hu
        </div>
      </div>

      <div class="contact-card">
        <h2 class="contact-card-title">
          <i class="fa-solid fa-comments text-3xl text-indigo-500"></i> {{ t('contact.community') }}
        </h2>
        <p class="contact-card-desc">{{ t('contact.communityDesc') }}</p>

        <div class="community-grid-3">
          <div class="community-section border-[#5865F2]">
            <h3 class="community-section-title text-[#5865F2]"><i class="fa-brands fa-discord"></i> Discord</h3>
            <p class="community-section-desc">{{ t('contact.discord.desc') }}</p>
            <a :href="DISCORD_INVITE_LINK" target="_blank" class="community-link-discord">
              {{ t('contact.discord.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
            </a>
          </div>

          <div class="community-section border-green-500">
            <h3 class="community-section-title text-green-700"><i class="fa-solid fa-terminal"></i> IRC</h3>
            <p class="community-section-desc">{{ t('contact.irc.desc') }}</p>
            <div class="irc-box">
              <span class="irc-network">Network: Libera.Chat</span>
              <code class="irc-channel">#teletypegames</code>
            </div>
          </div>

          <div class="community-section border-amber-500">
            <h3 class="community-section-title text-amber-700"><i class="fa-solid fa-tower-broadcast"></i> BBS</h3>
            <p class="community-section-desc">{{ t('contact.bbs.desc') }}</p>
            <div class="bbs-box">
              <span class="bbs-host">Host: games.teletype.hu</span>
              <code class="bbs-port">Port: 2323</code>
            </div>
          </div>
        </div>
      </div>

      <div class="contact-card">
        <h2 class="contact-card-title">
          <i class="fa-solid fa-share-nodes text-3xl text-indigo-500"></i> {{ t('contact.social') }}
        </h2>
        <p class="contact-card-desc">{{ t('contact.socialDesc') }}</p>

        <div class="social-grid">
          <div class="community-section border-red-600">
            <h3 class="community-section-title text-red-600"><i class="fa-brands fa-youtube"></i> YouTube</h3>
            <p class="community-section-desc">{{ t('contact.youtube.desc') }}</p>
            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="community-link-youtube">
              {{ t('contact.youtube.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
            </a>
          </div>

          <div class="community-section border-[#1877F2]">
            <h3 class="community-section-title text-[#1877F2]"><i class="fa-brands fa-facebook"></i> Facebook</h3>
            <p class="community-section-desc">{{ t('contact.facebook.desc') }}</p>
            <a href="https://www.facebook.com/teletypegames" target="_blank" class="community-link-facebook">
              {{ t('contact.facebook.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
            </a>
          </div>

          <div class="community-section border-[#0A66C2]">
            <h3 class="community-section-title text-[#0A66C2]"><i class="fa-brands fa-linkedin"></i> LinkedIn</h3>
            <p class="community-section-desc">{{ t('contact.linkedin.desc') }}</p>
            <a href="https://www.linkedin.com/company/teletypegames/" target="_blank" class="community-link-linkedin">
              {{ t('contact.linkedin.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
            </a>
          </div>

          <div class="community-section border-[#1DB954]">
            <h3 class="community-section-title text-[#1DB954]"><i class="fa-brands fa-spotify"></i> Spotify</h3>
            <p class="community-section-desc">{{ t('contact.spotify.desc') }}</p>
            <a href="https://open.spotify.com/playlist/4T7hMkdiERkkW7HaPXqgfX?si=7cdaa091c3274422" target="_blank" class="community-link-spotify">
              {{ t('contact.spotify.link') }} <i class="fa-solid fa-arrow-right text-xs"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="contact-card spotify-card">
        <div class="spotify-card-header">
          <div class="spotify-icon-wrap">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" />
            </svg>
          </div>
          <div>
            <h2 class="spotify-card-title">Teletype Games Party</h2>
            <p class="spotify-card-subtitle">Spotify Playlist</p>
          </div>
        </div>
        <div class="spotify-embed-wrap">
          <iframe
            style="border-radius: 12px"
            src="https://open.spotify.com/embed/playlist/4T7hMkdiERkkW7HaPXqgfX?utm_source=generator&theme=0"
            width="100%"
            height="352"
            frameBorder="0"
            allowfullscreen
            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
            loading="lazy"
          ></iframe>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { CONFIG } from '../../lib/config'

const { t } = useI18n()

const DISCORD_INVITE_LINK = CONFIG.discordInvite

function openEmail() {
  window.location.href = 'mailto:contact@teletype.hu'
}
</script>

<style scoped>
.discord-hero-btn {
  @apply inline-flex items-center gap-3 bg-[#5865F2] hover:bg-[#4752C4] text-white font-black py-4 px-8 rounded-full text-lg transition-all transform hover:scale-105 shadow-xl;
}
.contact-grid {
  @apply grid grid-cols-1 gap-12 max-w-5xl mx-auto;
}
.contact-card {
  @apply bg-white p-8 rounded-2xl shadow-xl border border-gray-100;
}
.contact-card-title {
  @apply text-2xl font-black text-gray-900 mb-6 flex items-center gap-3;
}
.contact-card-desc {
  @apply text-gray-600 mb-6 leading-relaxed;
}
.email-link {
  @apply text-indigo-600 font-bold text-xl hover:underline transition-all;
}
.community-section {
  @apply border-l-4 pl-4;
}
.community-section-title {
  @apply text-lg font-bold mb-2;
}
.community-section-desc {
  @apply text-gray-600 text-sm mb-3;
}
.community-link-discord {
  @apply text-[#5865F2] font-bold hover:underline inline-flex items-center gap-1;
}
.community-link-youtube {
  @apply text-red-600 font-bold hover:underline inline-flex items-center gap-1;
}
.community-link-facebook {
  @apply text-[#1877F2] font-bold hover:underline inline-flex items-center gap-1;
}
.community-link-linkedin {
  @apply text-[#0A66C2] font-bold hover:underline inline-flex items-center gap-1;
}
.community-link-spotify {
  @apply text-[#1DB954] font-bold hover:underline inline-flex items-center gap-1;
}
.spotify-card {
  @apply bg-gradient-to-br from-slate-900 via-slate-900 to-emerald-950 border-slate-800 text-white;
}
.spotify-card-header {
  @apply flex items-center gap-4 mb-6 text-[#1DB954];
}
.spotify-icon-wrap {
  @apply w-14 h-14 rounded-2xl bg-[#1DB954]/10 border border-[#1DB954]/20 flex items-center justify-center;
}
.spotify-card-title {
  @apply text-2xl font-black text-white;
}
.spotify-card-subtitle {
  @apply text-[#1DB954] text-sm font-bold;
}
.spotify-embed-wrap {
  @apply rounded-xl overflow-hidden;
}
.community-grid-3 {
  @apply grid grid-cols-1 sm:grid-cols-3 gap-4;
}
.social-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4;
}
.irc-box {
  @apply bg-green-100 p-4 rounded-xl border border-green-200 mt-3 inline-block;
}
.irc-network {
  @apply block text-xs font-semibold text-green-500 uppercase tracking-wider mb-1;
}
.irc-channel {
  @apply text-green-800 font-mono text-lg font-bold;
}
.bbs-box {
  @apply bg-amber-50 p-4 rounded-xl border border-amber-100 mt-3 inline-block;
}
.bbs-host {
  @apply block text-xs font-semibold text-amber-500 uppercase tracking-wider mb-1;
}
.bbs-port {
  @apply text-amber-700 font-mono text-lg font-bold;
}
</style>
