nettown_frontend/src/routes/(app)/dashboard/help/+page.svelte

<script>
	import { HelpCircle, MessageCircle, Mail, Book, Globe, FileText, MoreHorizontal, ChevronDown } from 'lucide-svelte';
	let expandedFaq = null;

	const supportChannels = [
		{
			title: 'Central de Ajuda',
			description: 'Acesse nossa base de conhecimento com artigos e tutoriais',
			icon: Book,
			action: 'Acessar',
			link: '#'
		},
		{
			title: 'E-mail de Suporte',
			description: 'Envie suas dúvidas para nossa equipe de suporte',
			icon: Mail,
			action: 'Enviar',
			link: 'mailto:support@nettown.com'
		},
		{
			title: 'Chat ao Vivo',
			description: 'Converse com nossa equipe em tempo real',
			icon: MessageCircle,
			action: 'Iniciar Chat',
			link: '#'
		},
		{
			title: 'Documentação',
			description: 'Leia a documentação técnica e guias de integração',
			icon: FileText,
			action: 'Ler Docs',
			link: '#'
		}
	];

	const faqs = [
		{
			question: 'Como funciona a análise de sentimento?',
			answer: 'Nossa análise de sentimento utiliza inteligência artificial para avaliar o tom e a emoção em conversas. O sistema analisa mensagens de texto e categoriza o sentimento em positivo, negativo ou neutro.'
		},
		{
			question: 'Quais plataformas são suportadas?',
			answer: 'Atualmente suportamos integração com WhatsApp Business. Estamos trabalhando em suporte para outras plataformas como Messenger, Telegram e SMS.'
		},
		{
			question: 'Como faço para integrar minha conta do WhatsApp?',
			answer: 'Você pode integrar sua conta do WhatsApp Business através das configurações de integrações. Será necessário ter um número de telefone comercial e acesso à sua conta do Meta Business.'
		},
		{
			question: 'Posso exportar meus dados?',
			answer: 'Sim! Você pode exportar seus dados em formato CSV ou Excel a qualquer momento. Esta opção está disponível nas configurações de conta.'
		},
		{
			question: 'Qual é o tempo de resposta do suporte?',
			answer: 'Nosso tempo médio de resposta é de 24 horas para suporte por email. Se você tem um plano Profissional ou Empresa, oferecemos suporte prioritário com tempo de resposta de até 4 horas.'
		},
		{
			question: 'Como posso cancelar minha assinatura?',
			answer: 'Você pode cancelar sua assinatura a qualquer momento através da seção de Assinatura em seu perfil. Seu acesso será mantido até o final do ciclo de faturamento atual.'
		}
	];

	function toggleFaq(index) {
		expandedFaq = expandedFaq === index ? null : index;
	}
</script>

<div class="mx-auto max-w-4xl space-y-6">
	<!-- Header -->
	<div class="rounded-xl border border-slate-200 bg-white p-5 md:p-6 shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#161f30]">
		<div class="flex items-center gap-3">
			<div class="h-8 w-8 shrink-0 rounded-lg bg-indigo-500/20 text-indigo-500 flex items-center justify-center">
				<HelpCircle size={20} strokeWidth={2.5} />
			</div>
			<h1 class="text-xl font-bold text-slate-900 dark:text-white">Ajuda e Suporte</h1>
		</div>
		<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
			Encontre respostas para suas dúvidas e entre em contato com nosso suporte
		</p>
	</div>

	<!-- Support Channels -->
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
		{#each supportChannels as channel}
			{@const Icon = channel.icon}
			<a
				href={channel.link}
				class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition-all duration-200 dark:border-slate-800 dark:bg-[#161f30] hover:border-indigo-400 dark:hover:border-indigo-500 hover:shadow-md"
			>
				<div class="flex items-start justify-between mb-3">
					<div class="h-10 w-10 rounded-lg bg-indigo-500/10 text-indigo-600 flex items-center justify-center dark:bg-indigo-900/30 dark:text-indigo-400">
						<Icon size={20} strokeWidth={2} />
					</div>
					<button class="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
						<MoreHorizontal size={16} />
					</button>
				</div>
				<h3 class="font-semibold text-slate-900 dark:text-white mb-1">{channel.title}</h3>
				<p class="text-sm text-slate-600 dark:text-slate-400 mb-4">{channel.description}</p>
				<button class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300">
					{channel.action} →
				</button>
			</a>
		{/each}
	</div>

	<!-- FAQ Section -->
	<div class="space-y-4">
		<h2 class="text-lg font-semibold text-slate-900 dark:text-white">Perguntas Frequentes</h2>

		<div class="rounded-xl border border-slate-200 bg-white shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#161f30] divide-y divide-slate-200 dark:divide-slate-800">
			{#each faqs as faq, index}
				<div class="p-5 hover:bg-slate-50 transition-colors duration-150 dark:hover:bg-slate-800/50">
					<button
						onclick={() => toggleFaq(index)}
						class="w-full flex items-center justify-between"
					>
						<h3 class="text-sm font-medium text-slate-900 dark:text-white text-left">{faq.question}</h3>
						<ChevronDown
							size={18}
							class="text-slate-400 shrink-0 transition-transform duration-200 {expandedFaq === index ? 'rotate-180' : ''}"
						/>
					</button>

					{#if expandedFaq === index}
						<p class="mt-3 text-sm text-slate-600 dark:text-slate-400 text-left">
							{faq.answer}
						</p>
					{/if}
				</div>
			{/each}
		</div>
	</div>

	<!-- Contact Info -->
	<div class="rounded-xl border border-slate-200 bg-white p-5 md:p-6 shadow-sm transition-colors duration-200 dark:border-slate-800 dark:bg-[#161f30]">
		<h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Não encontrou o que procura?</h2>
		<p class="text-slate-600 dark:text-slate-400 mb-4">
			Entre em contato com nossa equipe de suporte através de qualquer um dos canais acima. Estamos aqui para ajudá-lo!
		</p>
		<div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
			<p><strong class="text-slate-900 dark:text-white">E-mail:</strong> support@nettown.com</p>
			<p><strong class="text-slate-900 dark:text-white">Horário de atendimento:</strong> Segunda à Sexta, 9:00 às 18:00</p>
		</div>
	</div>
</div>