radionica3d/src/pages/HelpCenter.vue

<template>
  <div class="min-h-screen bg-background flex flex-col">
    <Header />
    <main class="flex-grow pt-24 pb-20">
    <div class="container mx-auto px-4 py-12">
      <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="mb-12">
          <h1 class="text-4xl md:text-5xl font-display font-bold text-foreground mb-4">
            {{ t("footer.help") }}
          </h1>
          <p class="text-lg text-foreground/60">
            {{ t("help.subtitle") }}
          </p>
        </div>

        <!-- Search -->
        <div class="mb-12">
          <div class="relative max-w-2xl mx-auto">
            <input 
              type="text" 
              v-model="searchQuery"
              :placeholder="t('help.search.placeholder')"
              class="w-full px-6 py-4 pl-12 border border-gray-300 rounded-xl focus:outline-none focus:border-primary"
            />
            <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        <!-- Categories -->
        <div class="mb-12">
          <h2 class="text-2xl font-display font-bold text-foreground mb-8">
            {{ t("help.categories.title") }}
          </h2>
          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <router-link 
              to="/help/ordering"
              class="bg-gray-50 rounded-xl p-6 hover:bg-primary/5 hover:border-primary/30 border border-transparent transition-all"
            >
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
              </div>
              <h3 class="text-lg font-display font-bold text-foreground mb-2">
                {{ t("help.categories.ordering.title") }}
              </h3>
              <p class="text-sm text-foreground/70">
                {{ t("help.categories.ordering.description") }}
              </p>
            </router-link>

            <router-link 
              to="/help/pricing"
              class="bg-gray-50 rounded-xl p-6 hover:bg-primary/5 hover:border-primary/30 border border-transparent transition-all"
            >
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="text-lg font-display font-bold text-foreground mb-2">
                {{ t("help.categories.pricing.title") }}
              </h3>
              <p class="text-sm text-foreground/70">
                {{ t("help.categories.pricing.description") }}
              </p>
            </router-link>

            <router-link 
              to="/help/shipping"
              class="bg-gray-50 rounded-xl p-6 hover:bg-primary/5 hover:border-primary/30 border border-transparent transition-all"
            >
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                </svg>
              </div>
              <h3 class="text-lg font-display font-bold text-foreground mb-2">
                {{ t("help.categories.shipping.title") }}
              </h3>
              <p class="text-sm text-foreground/70">
                {{ t("help.categories.shipping.description") }}
              </p>
            </router-link>

            <router-link 
              to="/help/technical"
              class="bg-gray-50 rounded-xl p-6 hover:bg-primary/5 hover:border-primary/30 border border-transparent transition-all"
            >
              <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
              </div>
              <h3 class="text-lg font-display font-bold text-foreground mb-2">
                {{ t("help.categories.technical.title") }}
              </h3>
              <p class="text-sm text-foreground/70">
                {{ t("help.categories.technical.description") }}
              </p>
            </router-link>
          </div>
        </div>

        <!-- FAQ -->
        <div class="mb-12">
          <h2 class="text-2xl font-display font-bold text-foreground mb-8">
            {{ t("help.faq.title") }}
          </h2>
          <div class="space-y-4">
            <div 
              v-for="(faq, index) in filteredFaqs" 
              :key="index"
              class="border border-gray-200 rounded-xl overflow-hidden"
            >
              <button 
                @click="toggleFaq(index)"
                class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors"
              >
                <span class="font-display font-bold text-foreground">
                  {{ faq.question }}
                </span>
                <svg 
                  class="w-5 h-5 text-gray-400 transition-transform duration-200"
                  :class="{ 'rotate-180': openFaqs[index] }"
                  fill="none" 
                  stroke="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <div 
                v-if="openFaqs[index]"
                class="px-6 py-4 border-t border-gray-200 bg-gray-50"
              >
                <p class="text-foreground/70">
                  {{ faq.answer }}
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- Contact Support -->
        <div class="bg-primary/5 rounded-2xl p-8 text-center">
          <h2 class="text-2xl font-display font-bold text-foreground mb-4">
            {{ t("help.contact.title") }}
          </h2>
          <p class="text-foreground/70 mb-6 max-w-2xl mx-auto">
            {{ t("help.contact.description") }}
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <router-link 
              to="/contact"
              class="inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors"
            >
              {{ t("help.contact.button") }}
            </router-link>
            <a 
              href="mailto:support@radionica3d.me"
              class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-foreground font-bold rounded-lg hover:bg-gray-50 transition-colors"
            >
              {{ t("help.contact.email") }}
            </a>
          </div>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

const { t } = useI18n();

const searchQuery = ref("");
const openFaqs = ref<boolean[]>([]);

const faqs = [
  {
    question: t("help.faq.q1.question"),
    answer: t("help.faq.q1.answer"),
  },
  {
    question: t("help.faq.q2.question"),
    answer: t("help.faq.q2.answer"),
  },
  {
    question: t("help.faq.q3.question"),
    answer: t("help.faq.q3.answer"),
  },
  {
    question: t("help.faq.q4.question"),
    answer: t("help.faq.q4.answer"),
  },
  {
    question: t("help.faq.q5.question"),
    answer: t("help.faq.q5.answer"),
  },
];

const filteredFaqs = computed(() => {
  if (!searchQuery.value.trim()) return faqs;
  
  const query = searchQuery.value.toLowerCase();
  return faqs.filter(faq => 
    faq.question.toLowerCase().includes(query) || 
    faq.answer.toLowerCase().includes(query)
  );
});

const toggleFaq = (index: number) => {
  openFaqs.value[index] = !openFaqs.value[index];
};
</script>