@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/nuxt/app/components/{VicketSupportPage.vue → VicketSupportContent.vue}

@@ -1,317 +1,275 @@
-<script setup lang="ts">
-/* ── Reactive state ─────────────────────────────── */
-const templates = ref<Template[]>([]);
-const articles = ref<Article[]>([]);
-const faqs = ref<Faq[]>([]);
-const websiteName = ref("Support");
-const isLoading = ref(true);
-const error = ref("");
-const searchQuery = ref("");
-const dialogOpen = ref(false);
-const selectedArticle = ref<Article | null>(null);
-
-/* FAQ accordion open state */
-const openFaqIds = ref<Set<string>>(new Set());
-
-/* ── Computed ───────────────────────────────────── */
-const filteredArticles = computed(() => {
-  if (!searchQuery.value.trim()) return articles.value;
-  const q = searchQuery.value.toLowerCase();
-  return articles.value.filter(
-    (a) =>
-      a.title.toLowerCase().includes(q) ||
-      stripHtml(a.content).toLowerCase().includes(q),
-  );
-});
-
-const filteredFaqs = computed(() => {
-  if (!searchQuery.value.trim()) return faqs.value;
-  const q = searchQuery.value.toLowerCase();
-  return faqs.value.filter(
-    (f) =>
-      f.question.toLowerCase().includes(q) ||
-      f.answer.toLowerCase().includes(q),
-  );
-});
-
-const hasContent = computed(() => articles.value.length > 0 || faqs.value.length > 0);
-const hasResults = computed(() => filteredArticles.value.length > 0 || filteredFaqs.value.length > 0);
-
-/* ── FAQ accordion ──────────────────────────────── */
-const toggleFaq = (id: string) => {
-  const next = new Set(openFaqIds.value);
-  if (next.has(id)) {
-    next.delete(id);
-  } else {
-    next.add(id);
-  }
-  openFaqIds.value = next;
-};
-
-const isFaqOpen = (id: string) => openFaqIds.value.has(id);
-
-/* ── Data loading ───────────────────────────────── */
-onMounted(async () => {
-  isLoading.value = true;
-  error.value = "";
-  try {
-    const data = await fetchInit();
-    templates.value = data.templates || [];
-    articles.value = data.articles || [];
-    faqs.value = data.faqs || [];
-    websiteName.value = data.website?.name || "Support";
-  } catch (loadError) {
-    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
-  } finally {
-    isLoading.value = false;
-  }
-});
-</script>
-
-<template>
-  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-    <!-- Skeleton loading state -->
-    <div v-if="isLoading">
-      <div class="mx-auto flex max-w-5xl flex-col gap-6 px-6 pt-14 md:flex-row md:items-center md:justify-between">
-        <div class="flex-1">
-          <div class="mb-3 h-9 w-48 animate-pulse rounded-lg bg-slate-200" />
-          <div class="h-5 w-64 animate-pulse rounded-md bg-slate-200" />
-        </div>
-        <div class="h-10 w-40 animate-pulse rounded-full bg-slate-200" />
-      </div>
-      <div class="mx-auto mt-8 max-w-5xl px-6">
-        <div class="h-11 w-full animate-pulse rounded-xl bg-slate-200" />
-      </div>
-      <div class="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-8 px-6 md:grid-cols-2">
-        <div class="space-y-3">
-          <div class="h-5 w-36 animate-pulse rounded bg-slate-200" />
-          <div v-for="i in 3" :key="i" class="h-20 animate-pulse rounded-xl bg-slate-200" />
-        </div>
-        <div class="space-y-3">
-          <div class="h-5 w-52 animate-pulse rounded bg-slate-200" />
-          <div v-for="i in 3" :key="i" class="h-14 animate-pulse rounded-xl bg-slate-200" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Article detail view -->
-    <div v-else-if="selectedArticle" class="mx-auto max-w-5xl px-6">
-      <div class="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{{ websiteName }}</h1>
-          <p class="mt-1.5 text-slate-500">How can we help you today?</p>
-        </div>
-        <button
-          v-if="templates.length > 0"
-          type="button"
-          class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
-          @click="dialogOpen = true"
-        >
-          <!-- IconMessageCircle -->
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
-          Contact Support
-        </button>
-      </div>
-
-      <div class="pb-16">
-        <button
-          type="button"
-          class="-ml-2 mb-4 inline-flex cursor-pointer items-center gap-1.5 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-white hover:text-slate-900"
-          @click="selectedArticle = null"
-        >
-          <!-- IconArrowLeft -->
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
-          Back to articles
-        </button>
-
-        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
-          <h2 class="m-0 text-xl font-bold tracking-tight text-slate-900 md:text-2xl">{{ selectedArticle.title }}</h2>
-          <div
-            class="vk-message-content mt-5 text-sm leading-relaxed text-slate-500"
-            v-html="sanitizeHtml(selectedArticle.content)"
-          />
-        </div>
-      </div>
-
-      <VicketTicketDialog
-        :open="dialogOpen"
-        :templates="templates"
-        @close="dialogOpen = false"
-      />
-    </div>
-
-    <!-- Main hub view -->
-    <div v-else class="mx-auto max-w-5xl px-6">
-      <div class="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{{ websiteName }}</h1>
-          <p class="mt-1.5 text-slate-500">How can we help you today?</p>
-        </div>
-        <div v-if="templates.length > 0" class="flex items-center gap-3">
-          <span class="hidden text-sm text-slate-500 md:block">Can't find what you're looking for?</span>
-          <button
-            type="button"
-            class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
-            @click="dialogOpen = true"
-          >
-            <!-- IconMessageCircle -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
-            Contact Support
-          </button>
-        </div>
-      </div>
-
-      <!-- Error alert -->
-      <div v-if="error" class="pb-4">
-        <div
-          class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900"
-          role="alert"
-        >
-          <span class="mt-0.5 shrink-0">
-            <!-- IconAlert -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-          </span>
-          <span class="flex-1">{{ error }}</span>
-          <button
-            type="button"
-            class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
-            aria-label="Dismiss"
-            @click="error = ''"
-          >
-            <!-- IconX -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-          </button>
-        </div>
-      </div>
-
-      <!-- Search bar -->
-      <div v-if="hasContent" class="pb-8">
-        <div class="relative">
-          <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">
-            <!-- IconSearch -->
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
-          </span>
-          <input
-            type="text"
-            class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm text-slate-900 shadow-sm transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-            placeholder="Search articles and FAQs..."
-            v-model="searchQuery"
-          />
-        </div>
-      </div>
-
-      <!-- Content grid -->
-      <div v-if="hasResults" class="grid grid-cols-1 gap-10 pb-16 md:grid-cols-2 md:gap-12">
-        <!-- Articles -->
-        <div v-if="filteredArticles.length > 0">
-          <div class="mb-4 flex items-center gap-2">
-            <span class="text-blue-600">
-              <!-- IconArticle 18 -->
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
-            </span>
-            <h2 class="m-0 text-base font-bold tracking-tight text-slate-900">Popular Articles</h2>
-          </div>
-          <div class="space-y-1">
-            <button
-              v-for="article in filteredArticles"
-              :key="article.id"
-              type="button"
-              class="group flex w-full cursor-pointer items-start gap-3 rounded-xl border border-transparent bg-transparent p-3 text-left transition-all duration-150 hover:border-slate-200 hover:bg-white hover:shadow-sm"
-              @click="selectedArticle = article"
-            >
-              <div class="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
-                <!-- IconArticle 16 -->
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
-              </div>
-              <div class="min-w-0 flex-1">
-                <h3 class="m-0 text-sm font-semibold leading-snug text-slate-900 transition-colors group-hover:text-blue-600">{{ article.title }}</h3>
-                <p v-if="article.content" class="mt-0.5 line-clamp-2 text-xs leading-normal text-slate-500">
-                  {{ stripHtml(article.content).substring(0, 150) }}
-                </p>
-              </div>
-            </button>
-          </div>
-        </div>
-
-        <!-- FAQs -->
-        <div v-if="filteredFaqs.length > 0">
-          <div class="mb-4 flex items-center gap-2">
-            <span class="text-blue-600">
-              <!-- IconHelpCircle -->
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>
-            </span>
-            <h2 class="m-0 text-base font-bold tracking-tight text-slate-900">Frequently Asked Questions</h2>
-          </div>
-          <div class="space-y-2">
-            <div
-              v-for="faq in filteredFaqs"
-              :key="faq.id"
-              class="rounded-xl border border-slate-200 bg-white/50 transition-colors hover:bg-white/80"
-            >
-              <button
-                type="button"
-                :class="cn(
-                  'flex w-full cursor-pointer items-center justify-between gap-3 border-none bg-transparent px-4 py-3.5 text-left text-sm font-semibold text-slate-900',
-                  isFaqOpen(faq.id) && 'text-blue-600',
-                )"
-                :aria-expanded="isFaqOpen(faq.id)"
-                @click="toggleFaq(faq.id)"
-              >
-                {{ faq.question }}
-                <span :class="cn('shrink-0 text-slate-500 transition-transform duration-200', isFaqOpen(faq.id) && 'rotate-180')">
-                  <!-- IconChevronDown -->
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
-                </span>
-              </button>
-              <div :class="cn('grid grid-rows-[0fr] transition-[grid-template-rows] duration-250', isFaqOpen(faq.id) && 'grid-rows-[1fr]')">
-                <div class="overflow-hidden">
-                  <div class="whitespace-pre-wrap px-4 pb-4 text-sm leading-relaxed text-slate-500">
-                    {{ faq.answer }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- No search results -->
-      <div v-if="searchQuery.trim() && !hasResults" class="pb-16 text-center">
-        <p class="text-sm text-slate-500">No results found for &ldquo;{{ searchQuery }}&rdquo;</p>
-      </div>
-
-      <!-- Empty state -->
-      <div v-if="!hasContent && !error" class="pb-16 pt-4 text-center">
-        <div class="mx-auto max-w-sm rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
-          <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600">
-            <!-- IconMessageCircle 22 -->
-            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
-          </div>
-          <p class="m-0 text-sm font-medium text-slate-900">Need help? Our team is here for you.</p>
-          <button
-            type="button"
-            class="mt-5 inline-flex items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
-            @click="dialogOpen = true"
-          >
-            Contact Support
-          </button>
-        </div>
-      </div>
-
-      <VicketTicketDialog
-        :open="dialogOpen"
-        :templates="templates"
-        @close="dialogOpen = false"
-      />
-    </div>
-  </div>
-</template>
-
-<style>
-.vk-message-content p { margin-bottom: 0.5rem; }
-.vk-message-content p:last-child { margin-bottom: 0; }
-.vk-message-content a { color: #2563eb; text-decoration: underline; }
-.vk-message-content ul, .vk-message-content ol { margin: 0.25rem 0; padding-left: 1.5rem; }
-.vk-message-content pre { overflow-x: auto; border-radius: 6px; background: #f8fafc; padding: 0.75rem; font-size: 0.75rem; }
-.vk-message-content code { font-family: monospace; font-size: 0.85em; }
-</style>
+<script setup lang="ts">
+import type { Template, Article, Faq } from "vicket";
+import { cn, stripHtml, sanitizeHtml } from "vicket";
+
+/* ── Props ─────────────────────────────────────── */
+const props = defineProps<{
+  initData?: { website?: { name?: string }; templates: Template[]; articles?: Article[]; faqs?: Faq[] } | null;
+  initError?: string;
+}>();
+
+/* ── Reactive state ─────────────────────────────── */
+const templates = ref<Template[]>(props.initData?.templates || []);
+const articles = ref<Article[]>(props.initData?.articles || []);
+const faqs = ref<Faq[]>(props.initData?.faqs || []);
+const websiteName = ref(props.initData?.website?.name || "Support");
+const error = ref(props.initError || "");
+const searchQuery = ref("");
+const dialogOpen = ref(false);
+const selectedArticle = ref<Article | null>(null);
+
+/* FAQ accordion open state */
+const openFaqIds = ref<Set<string>>(new Set());
+
+/* ── Computed ───────────────────────────────────── */
+const filteredArticles = computed(() => {
+  if (!searchQuery.value.trim()) return articles.value;
+  const q = searchQuery.value.toLowerCase();
+  return articles.value.filter(
+    (a) =>
+      a.title.toLowerCase().includes(q) ||
+      stripHtml(a.content).toLowerCase().includes(q),
+  );
+});
+
+const filteredFaqs = computed(() => {
+  if (!searchQuery.value.trim()) return faqs.value;
+  const q = searchQuery.value.toLowerCase();
+  return faqs.value.filter(
+    (f) =>
+      f.question.toLowerCase().includes(q) ||
+      f.answer.toLowerCase().includes(q),
+  );
+});
+
+const hasContent = computed(() => articles.value.length > 0 || faqs.value.length > 0);
+const hasResults = computed(() => filteredArticles.value.length > 0 || filteredFaqs.value.length > 0);
+
+/* ── FAQ accordion ──────────────────────────────── */
+const toggleFaq = (id: string) => {
+  const next = new Set(openFaqIds.value);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  openFaqIds.value = next;
+};
+
+const isFaqOpen = (id: string) => openFaqIds.value.has(id);
+</script>
+
+<template>
+  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+    <!-- Article detail view -->
+    <div v-if="selectedArticle" class="mx-auto max-w-5xl px-6">
+      <div class="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{{ websiteName }}</h1>
+          <p class="mt-1.5 text-slate-500">How can we help you today?</p>
+        </div>
+        <button
+          v-if="templates.length > 0"
+          type="button"
+          class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+          @click="dialogOpen = true"
+        >
+          <!-- IconMessageCircle -->
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+          Contact Support
+        </button>
+      </div>
+
+      <div class="pb-16">
+        <button
+          type="button"
+          class="-ml-2 mb-4 inline-flex cursor-pointer items-center gap-1.5 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-white hover:text-slate-900"
+          @click="selectedArticle = null"
+        >
+          <!-- IconArrowLeft -->
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
+          Back to articles
+        </button>
+
+        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
+          <h2 class="m-0 text-xl font-bold tracking-tight text-slate-900 md:text-2xl">{{ selectedArticle.title }}</h2>
+          <div
+            class="mt-5 text-sm leading-relaxed text-slate-500 [&_a]:text-blue-600 [&_a]:underline [&_code]:font-mono [&_code]:text-[0.85em] [&_ol]:my-1 [&_ol]:pl-6 [&_p:last-child]:mb-0 [&_p]:mb-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-slate-50 [&_pre]:p-3 [&_pre]:text-xs [&_ul]:my-1 [&_ul]:pl-6"
+            v-html="sanitizeHtml(selectedArticle.content)"
+          />
+        </div>
+      </div>
+
+      <VicketTicketDialog
+        :open="dialogOpen"
+        :templates="templates"
+        @close="dialogOpen = false"
+      />
+    </div>
+
+    <!-- Main hub view -->
+    <div v-else class="mx-auto max-w-5xl px-6">
+      <div class="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{{ websiteName }}</h1>
+          <p class="mt-1.5 text-slate-500">How can we help you today?</p>
+        </div>
+        <div v-if="templates.length > 0" class="flex items-center gap-3">
+          <span class="hidden text-sm text-slate-500 md:block">Can't find what you're looking for?</span>
+          <button
+            type="button"
+            class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+            @click="dialogOpen = true"
+          >
+            <!-- IconMessageCircle -->
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+            Contact Support
+          </button>
+        </div>
+      </div>
+
+      <!-- Error alert -->
+      <div v-if="error" class="pb-4">
+        <div
+          class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900"
+          role="alert"
+        >
+          <span class="mt-0.5 shrink-0">
+            <!-- IconAlert -->
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+          </span>
+          <span class="flex-1">{{ error }}</span>
+          <button
+            type="button"
+            class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
+            aria-label="Dismiss"
+            @click="error = ''"
+          >
+            <!-- IconX -->
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Search bar -->
+      <div v-if="hasContent" class="pb-8">
+        <div class="relative">
+          <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">
+            <!-- IconSearch -->
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+          </span>
+          <input
+            type="text"
+            class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm text-slate-900 shadow-sm transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+            placeholder="Search articles and FAQs..."
+            v-model="searchQuery"
+          />
+        </div>
+      </div>
+
+      <!-- Content grid -->
+      <div v-if="hasResults" class="grid grid-cols-1 gap-10 pb-16 md:grid-cols-2 md:gap-12">
+        <!-- Articles -->
+        <div v-if="filteredArticles.length > 0">
+          <div class="mb-4 flex items-center gap-2">
+            <span class="text-blue-600">
+              <!-- IconArticle 18 -->
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
+            </span>
+            <h2 class="m-0 text-base font-bold tracking-tight text-slate-900">Popular Articles</h2>
+          </div>
+          <div class="space-y-1">
+            <button
+              v-for="article in filteredArticles"
+              :key="article.id"
+              type="button"
+              class="group flex w-full cursor-pointer items-start gap-3 rounded-xl border border-transparent bg-transparent p-3 text-left transition-all duration-150 hover:border-slate-200 hover:bg-white hover:shadow-sm"
+              @click="selectedArticle = article"
+            >
+              <div class="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
+                <!-- IconArticle 16 -->
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <h3 class="m-0 text-sm font-semibold leading-snug text-slate-900 transition-colors group-hover:text-blue-600">{{ article.title }}</h3>
+                <p v-if="article.content" class="mt-0.5 line-clamp-2 text-xs leading-normal text-slate-500">
+                  {{ stripHtml(article.content).substring(0, 150) }}
+                </p>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- FAQs -->
+        <div v-if="filteredFaqs.length > 0">
+          <div class="mb-4 flex items-center gap-2">
+            <span class="text-blue-600">
+              <!-- IconHelpCircle -->
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>
+            </span>
+            <h2 class="m-0 text-base font-bold tracking-tight text-slate-900">Frequently Asked Questions</h2>
+          </div>
+          <div class="space-y-2">
+            <div
+              v-for="faq in filteredFaqs"
+              :key="faq.id"
+              class="rounded-xl border border-slate-200 bg-white/50 transition-colors hover:bg-white/80"
+            >
+              <button
+                type="button"
+                :class="cn(
+                  'flex w-full cursor-pointer items-center justify-between gap-3 border-none bg-transparent px-4 py-3.5 text-left text-sm font-semibold text-slate-900',
+                  isFaqOpen(faq.id) && 'text-blue-600',
+                )"
+                :aria-expanded="isFaqOpen(faq.id)"
+                @click="toggleFaq(faq.id)"
+              >
+                {{ faq.question }}
+                <span :class="cn('shrink-0 text-slate-500 transition-transform duration-200', isFaqOpen(faq.id) && 'rotate-180')">
+                  <!-- IconChevronDown -->
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
+                </span>
+              </button>
+              <div :class="cn('grid grid-rows-[0fr] transition-[grid-template-rows] duration-250', isFaqOpen(faq.id) && 'grid-rows-[1fr]')">
+                <div class="overflow-hidden">
+                  <div class="whitespace-pre-wrap px-4 pb-4 text-sm leading-relaxed text-slate-500">
+                    {{ faq.answer }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- No search results -->
+      <div v-if="searchQuery.trim() && !hasResults" class="pb-16 text-center">
+        <p class="text-sm text-slate-500">No results found for &ldquo;{{ searchQuery }}&rdquo;</p>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="!hasContent && !error" class="pb-16 pt-4 text-center">
+        <div class="mx-auto max-w-sm rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+          <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600">
+            <!-- IconMessageCircle 22 -->
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+          </div>
+          <p class="m-0 text-sm font-medium text-slate-900">Need help? Our team is here for you.</p>
+          <button
+            type="button"
+            class="mt-5 inline-flex items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+            @click="dialogOpen = true"
+          >
+            Contact Support
+          </button>
+        </div>
+      </div>
+
+      <VicketTicketDialog
+        :open="dialogOpen"
+        :templates="templates"
+        @close="dialogOpen = false"
+      />
+    </div>
+  </div>
+</template>