import { useState, useEffect, useRef } from "react"; import Layout from "@/components/Layout"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import LoadingScreen from "@/components/LoadingScreen"; import { aethexToast } from "@/lib/aethex-toast"; import { Link } from "react-router-dom"; import { Headphones, MessageCircle, Clock, CheckCircle, ArrowRight, Search, Book, Video, Mail, Phone, HelpCircle, FileText, Settings, Bug, Sparkles, Shield, Zap, } from "lucide-react"; export default function Support() { const [isLoading, setIsLoading] = useState(true); const [selectedCategory, setSelectedCategory] = useState("all"); const toastShownRef = useRef(false); useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); if (!toastShownRef.current) { aethexToast.system("Support center loaded successfully"); toastShownRef.current = true; } }, 1000); return () => clearTimeout(timer); }, []); const supportOptions = [ { title: "Live Chat Support", description: "Get instant help from our support team", icon: MessageCircle, availability: "24/7", responseTime: "< 5 minutes", bestFor: "Urgent issues, quick questions", color: "from-green-500 to-emerald-600", }, { title: "Email Support", description: "Detailed assistance for complex problems", icon: Mail, availability: "Business hours", responseTime: "< 4 hours", bestFor: "Technical issues, account problems", color: "from-blue-500 to-cyan-600", }, { title: "Phone Support", description: "Direct conversation with technical experts", icon: Phone, availability: "Mon-Fri 9AM-6PM PST", responseTime: "Immediate", bestFor: "Enterprise customers, urgent issues", color: "from-purple-500 to-indigo-600", }, { title: "Community Forum", description: "Get help from the community and experts", icon: Headphones, availability: "24/7", responseTime: "< 2 hours", bestFor: "General questions, discussions", color: "from-orange-500 to-red-600", }, ]; const faqs = [ { category: "Getting Started", questions: [ { question: "How do I create my first AeThex project?", answer: "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.", helpful: 89, }, { question: "What are the system requirements?", answer: "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.", helpful: 76, }, ], }, { category: "Technical Issues", questions: [ { question: "My game is running slowly, how can I optimize it?", answer: "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.", helpful: 94, }, { question: "How do I fix deployment errors?", answer: "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.", helpful: 82, }, ], }, { category: "Billing & Account", questions: [ { question: "How do I upgrade my plan?", answer: "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.", helpful: 91, }, { question: "Can I cancel my subscription anytime?", answer: "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.", helpful: 88, }, ], }, ]; const resources = [ { title: "Documentation", description: "Comprehensive guides and API references", icon: Book, link: "/docs", color: "from-blue-500 to-cyan-600", }, { title: "Video Tutorials", description: "Step-by-step visual learning", icon: Video, link: "/tutorials", color: "from-red-500 to-pink-600", }, { title: "System Status", description: "Real-time service status and updates", icon: Settings, link: "/status", color: "from-green-500 to-emerald-600", }, { title: "Feature Requests", description: "Suggest new features and improvements", icon: Sparkles, link: "/feedback", color: "from-yellow-500 to-orange-600", }, ]; const categories = [ "all", "getting-started", "technical", "billing", "account", ]; const filteredFaqs = selectedCategory === "all" ? faqs : faqs.filter((faq) => faq.category .toLowerCase() .replace(/\s+/g, "-") .includes(selectedCategory.replace("-", " ")), ); if (isLoading) { return ( ); } return (
{/* Hero Section */}
Support Center

We're Here to Help

Get the support you need to succeed with AeThex. Our team of experts is ready to help you overcome any challenge.

{/* Search Bar */}
{/* Support Options */}

Choose Your Support Channel

Multiple ways to get help based on your needs

{supportOptions.map((option, index) => { const Icon = option.icon; return (
{option.title} {option.description}
Availability: {option.availability}
Response Time: {option.responseTime}
Best For: {option.bestFor}
); })}
{/* FAQ Section */}

Frequently Asked Questions

Quick answers to common questions

{/* Category Filter */}
{categories.map((category, index) => ( ))}
{/* FAQ Cards */}
{filteredFaqs.map((category, categoryIndex) => (

{category.category}

{category.questions.map((faq, faqIndex) => (

{faq.question}

{faq.answer}

{faq.helpful}% found this helpful
))}
))}
{/* Resources */}

Self-Help Resources

Everything you need to succeed with AeThex

{resources.map((resource, index) => { const Icon = resource.icon; return (
{resource.title} {resource.description}
); })}
{/* Emergency Support */}

Critical Issue?

If you're experiencing a critical production issue that's affecting your users, contact our emergency support line for immediate assistance.

{/* CTA Section */}

Still Need Help?

Our support team is standing by to help you succeed. Don't hesitate to reach out with any questions or concerns.

24/7 Availability

Always here for you

Expert Team

Technical specialists

Comprehensive Docs

Detailed guides

); }