"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { TrendingUp } from "lucide-react";

export default function SupportPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="AIFlow"
          button={{
            text: "Get Started",
            href: "https://app.aiflow.io/signup"
          }}
        />
      </div>

      <div id="support-faq" data-section="support-faq">
        <FaqDouble
          title="Support & Help Center"
          description="Find answers to frequently asked questions about AIFlow features, implementation, and best practices"
          tag="Help Center"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How do I get started with AIFlow?",
              content: "Getting started is simple: 1) Sign up for a free trial, 2) Complete the onboarding wizard, 3) Choose from our template library or build from scratch, 4) Connect your first integration, 5) Test and deploy your workflow. Our setup wizard guides you through each step."
            },
            {
              id: "2",
              title: "What support channels are available?",
              content: "We offer multiple support channels: Email support (all plans), Live chat (Professional and Enterprise), Phone support (Enterprise only), Community forum, Knowledge base, and Video tutorials. Response times vary by plan level."
            },
            {
              id: "3",
              title: "Do you provide implementation assistance?",
              content: "Yes! Professional plan customers get priority email support and implementation guidance. Enterprise customers receive dedicated onboarding with a customer success manager and optional professional services for complex implementations."
            },
            {
              id: "4",
              title: "How do I troubleshoot workflow failures?",
              content: "Use our built-in debugging tools: 1) Check the workflow execution log, 2) Review error messages and suggested fixes, 3) Use the step-by-step debugger, 4) Test individual workflow components, 5) Contact support with workflow ID for assistance."
            },
            {
              id: "5",
              title: "Can I get training for my team?",
              content: "Absolutely! We offer self-paced online courses, live webinars, and custom training sessions. Enterprise customers can arrange on-site or virtual training workshops for their teams."
            },
            {
              id: "6",
              title: "What are your support hours?",
              content: "Email support: 24/7 with response within 24 hours (12 hours for Professional, 4 hours for Enterprise). Live chat: Monday-Friday 9AM-6PM EST. Phone support (Enterprise): Monday-Friday 8AM-8PM EST, with emergency after-hours support available."
            }
          ]}
        />
      </div>

      <div id="support-metrics" data-section="support-metrics">
        <MetricCardTwo
          title="Support Performance"
          description="Our commitment to providing exceptional customer support across all channels"
          tag="Support Stats"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",
              value: "< 4hrs",
              description: "Average response time"
            },
            {
              id: "2",
              value: "95%",
              description: "First contact resolution"
            },
            {
              id: "3",
              value: "4.8/5",
              description: "Customer satisfaction score"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="AIFlow"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Pricing", href: "/pricing" },
                { label: "Features", href: "/features" },
                { label: "Blog", href: "https://aiflow.io/blog" }
              ]
            },
            {
              items: [
                { label: "Documentation", href: "https://docs.aiflow.io" },
                { label: "API Reference", href: "https://api.aiflow.io/docs" },
                { label: "Support", href: "/support" },
                { label: "Community", href: "https://community.aiflow.io" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Careers", href: "https://aiflow.io/careers" },
                { label: "Contact", href: "/contact" },
                { label: "Privacy Policy", href: "https://aiflow.io/privacy" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}