Faq 4

"use client";

import { ChevronRightIcon } from "lucide-react";
import { useState } from "react";

import { Icons } from "@/components/icons";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

const tab_1FAQs = [
  {
    description:
      "Our predictive analytics engine uses advanced machine learning algorithms trained on billions of data points. It analyzes historical patterns, seasonal trends, and external factors to provide highly accurate forecasts with confidence intervals.",
    id: "01",
    title: "How accurate are the predictive analytics forecasts?",
  },
  {
    description:
      "Yes, you can customize prediction models based on your specific business needs. Define your own variables, adjust weighting factors, and incorporate industry-specific indicators to tailor forecasts to your unique requirements.",
    id: "02",
    title: "Can I customize the prediction models for my business?",
  },
  {
    description:
      "Our system can forecast customer churn, revenue trends, inventory needs, demand fluctuations, and more. You can set up multiple prediction models running simultaneously for different aspects of your business.",
    id: "03",
    title: "What types of predictions can the system generate?",
  },
  {
    description:
      "Predictions are updated in real-time as new data comes in. You can configure refresh intervals from minutes to hours depending on your data volume and business needs. The system automatically retrains models to maintain accuracy.",
    id: "04",
    title: "How often are predictions updated?",
  },
];

const tab_2FAQs = [
  {
    description:
      "Dashboards refresh in real-time with sub-second latency. Live data streams are processed instantly, and you'll see updates as they happen without needing to manually refresh your browser.",
    id: "11",
    title: "How quickly do real-time dashboards update?",
  },
  {
    description:
      "Absolutely. Our drag-and-drop dashboard builder lets you create custom visualizations, choose from 50+ chart types, set up custom metrics, and arrange widgets to match your workflow. Save multiple dashboard configurations for different use cases.",
    id: "12",
    title: "Can I create custom real-time dashboards?",
  },
  {
    description:
      "Yes, you can set up intelligent alerts based on any metric or combination of metrics. Define thresholds, anomaly detection rules, and trend-based triggers. Receive notifications via email, SMS, Slack, or webhook integrations.",
    id: "13",
    title: "Are there alerts for critical metrics?",
  },
  {
    description:
      "Our platform can handle millions of events per second with consistent performance. Built on distributed architecture, it scales automatically to match your data volume without degradation in real-time processing speed.",
    id: "14",
    title: "What's the maximum data volume for real-time processing?",
  },
];

const tab_3FAQs = [
  {
    description:
      "Yes, our visual workflow builder lets you create complex automation rules without coding. Use conditional logic, loops, delays, and branching to design sophisticated workflows. Advanced users can also use JavaScript for custom logic.",
    id: "21",
    title: "Can I automate repetitive tasks without coding?",
  },
  {
    description:
      "Beam integrates with 500+ applications including popular tools like Salesforce, HubSpot, Slack, Google Workspace, Microsoft 365, Jira, and more. Custom integrations can be built using our REST API and webhook system.",
    id: "22",
    title: "Which tools can I integrate into my workflows?",
  },
  {
    description:
      "Beam analyzes your workflow execution data to identify bottlenecks, inefficiencies, and failure points. Our AI provides actionable recommendations to optimize performance, reduce errors, and improve overall workflow efficiency.",
    id: "23",
    title: "How does Beam identify workflow bottlenecks?",
  },
  {
    description:
      "Yes, you can create approval workflows with multiple approval stages, parallel approvals, and conditional routing. Track approval status, set up automatic reminders, and maintain a complete audit trail of all approval decisions.",
    id: "24",
    title: "Can I set up approval workflows with multiple stages?",
  },
];

const tab_4FAQs = [
  {
    description:
      "Beam supports email, SMS, push notifications, social media (Facebook, Instagram, Twitter, LinkedIn), in-app messages, and web push notifications. All channels can be orchestrated from a single campaign interface.",
    id: "31",
    title: "Which channels are supported for campaigns?",
  },
  {
    description:
      "Yes, our journey builder lets you create sophisticated cross-channel campaigns with conditional logic. Automatically route customers through different channels based on their behavior, preferences, and engagement patterns.",
    id: "32",
    title: "Can I create cross-channel customer journeys?",
  },
  {
    description:
      "Built-in A/B and multivariate testing lets you test subject lines, content, images, timing, and channel selection. Automatic winner selection and statistical significance calculations help you optimize campaign performance.",
    id: "33",
    title: "How do I test different campaign variations?",
  },
  {
    description:
      "Track opens, clicks, conversions, revenue attribution, engagement rates, and channel performance in real-time. Custom conversion goals, UTM tracking, and revenue attribution models provide deep insights into campaign ROI.",
    id: "34",
    title: "What metrics can I track for campaign performance?",
  },
];

export default function Component() {
  const [expandedItem, setExpandedItem] = useState<string[]>([
    "01",
    "11",
    "21",
    "31",
  ]);

  return (
    <section className="relative w-full overflow-hidden bg-white py-12 md:py-24 dark:bg-background">
      <svg
        className="absolute top-0 -right-16 text-neutral-100 dark:text-neutral-900"
        fill="none"
        height="413"
        viewBox="0 0 615 413"
        width="615"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_568_896)">
          <path
            d="M53.6842 -174C10.9702 -71.2132 6.62611 40.7282 53.6842 105.688C108.466 181.309 232.908 193.262 447.569 52.9833C191.422 724.946 730.375 87.8948 560.032 392"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="40"
          />
        </g>
        <defs>
          <clipPath id="clip0_568_896">
            <rect fill="white" height="413" width="615" />
          </clipPath>
        </defs>
      </svg>
      <div className="mx-auto max-w-5xl px-6 lg:px-0">
        <div className="mb-16 space-y-6">
          <Badge
            className="border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
            variant="secondary"
          >
            <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
            Empower Innovation!
          </Badge>

          <h2 className="font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
            Want to learn more?
          </h2>
        </div>

        <div className="mx-auto w-full max-w-5xl">
          <Tabs
            className="w-full flex-col gap-6 md:flex-row md:gap-10"
            defaultValue="tab-1"
            orientation="vertical"
          >
            <TabsList className="h-fit w-full md:w-60 md:p-1.5">
              <TabsTab
                className="p-2 text-black dark:text-neutral-100"
                value="tab-1"
              >
                Predictive Analytics
                <ChevronRightIcon className="ml-auto" />
              </TabsTab>
              <TabsTab
                className="p-2 text-black dark:text-neutral-100"
                value="tab-2"
              >
                Real-Time Insights
                <ChevronRightIcon className="ml-auto" />
              </TabsTab>
              <TabsTab
                className="p-2 text-black dark:text-neutral-100"
                value="tab-3"
              >
                Workflow Optimization
                <ChevronRightIcon className="ml-auto" />
              </TabsTab>
              <TabsTab
                className="p-2 text-black dark:text-neutral-100"
                value="tab-4"
              >
                Multi-Channel Campaigns
                <ChevronRightIcon className="ml-auto" />
              </TabsTab>
            </TabsList>
            <TabsPanel value="tab-1">
              <div>
                <Accordion
                  className="space-y-0"
                  onValueChange={(value) => setExpandedItem(value)}
                  value={expandedItem}
                >
                  {tab_1FAQs.map((faq) => (
                    <AccordionItem
                      className={
                        "overflow-hidden rounded-none border-0 border-t transition-colors first:border-t-0"
                      }
                      key={faq.id}
                      value={faq.id}
                    >
                      <AccordionTrigger
                        className={`cursor-pointer font-semibold text-base hover:no-underline data-[state=closed]:pb-6 sm:text-lg sm:data-[state=closed]:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-100"
                            : "text-neutral-700 hover:text-neutral-900 dark:text-neutral-400"
                        }`}
                      >
                        <span className="font-medium text-base sm:text-lg">
                          {faq.title}
                        </span>
                      </AccordionTrigger>
                      <AccordionContent
                        className={`ml-1 pb-6 sm:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-200"
                            : "text-neutral-600 dark:text-neutral-700"
                        }`}
                      >
                        {faq.description}

                        <div className="space-x-2 pt-4">
                          <Button variant="outline">
                            <Icons.thumbsUp />
                            Helpful
                          </Button>
                          <Button variant="outline">
                            <Icons.thumbsDown />
                            Not Helpful
                          </Button>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            </TabsPanel>
            <TabsPanel value="tab-2">
              <div>
                <Accordion
                  className="space-y-0"
                  onValueChange={(value) => setExpandedItem(value)}
                  value={expandedItem}
                >
                  {tab_2FAQs.map((faq) => (
                    <AccordionItem
                      className={
                        "overflow-hidden rounded-none border-0 border-t transition-colors first:border-t-0"
                      }
                      key={faq.id}
                      value={faq.id}
                    >
                      <AccordionTrigger
                        className={`cursor-pointer font-semibold text-base hover:no-underline data-[state=closed]:pb-6 sm:text-lg sm:data-[state=closed]:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-100"
                            : "text-neutral-700 hover:text-neutral-900 dark:text-neutral-400"
                        }`}
                      >
                        <span className="font-medium text-base sm:text-lg">
                          {faq.title}
                        </span>
                      </AccordionTrigger>
                      <AccordionContent
                        className={`ml-1 pb-6 sm:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-300"
                            : "text-neutral-600 dark:text-neutral-700"
                        }`}
                      >
                        {faq.description}

                        <div className="space-x-2 pt-4">
                          <Button variant="outline">
                            <Icons.thumbsUp />
                            Helpful
                          </Button>
                          <Button variant="outline">
                            <Icons.thumbsDown />
                            Not Helpful
                          </Button>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            </TabsPanel>
            <TabsPanel value="tab-3">
              <div>
                <Accordion
                  className="space-y-0"
                  onValueChange={(value) => setExpandedItem(value)}
                  value={expandedItem}
                >
                  {tab_3FAQs.map((faq) => (
                    <AccordionItem
                      className={
                        "overflow-hidden rounded-none border-0 border-t transition-colors first:border-t-0"
                      }
                      key={faq.id}
                      value={faq.id}
                    >
                      <AccordionTrigger
                        className={`cursor-pointer font-semibold text-base hover:no-underline data-[state=closed]:pb-6 sm:text-lg sm:data-[state=closed]:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-100"
                            : "text-neutral-700 hover:text-neutral-900 dark:text-neutral-400"
                        }`}
                      >
                        <span className="font-medium text-base sm:text-lg">
                          {faq.title}
                        </span>
                      </AccordionTrigger>
                      <AccordionContent
                        className={`ml-1 pb-6 sm:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-300"
                            : "text-neutral-600 dark:text-neutral-700"
                        }`}
                      >
                        {faq.description}

                        <div className="space-x-2 pt-4">
                          <Button variant="outline">
                            <Icons.thumbsUp />
                            Helpful
                          </Button>
                          <Button variant="outline">
                            <Icons.thumbsDown />
                            Not Helpful
                          </Button>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            </TabsPanel>
            <TabsPanel value="tab-4">
              <div>
                <Accordion
                  className="space-y-0"
                  onValueChange={(value) => setExpandedItem(value)}
                  value={expandedItem}
                >
                  {tab_4FAQs.map((faq) => (
                    <AccordionItem
                      className={
                        "overflow-hidden rounded-none border-0 border-t transition-colors first:border-t-0"
                      }
                      key={faq.id}
                      value={faq.id}
                    >
                      <AccordionTrigger
                        className={`cursor-pointer font-semibold text-base hover:no-underline data-[state=closed]:pb-6 sm:text-lg sm:data-[state=closed]:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-100"
                            : "text-neutral-700 hover:text-neutral-900 dark:text-neutral-400"
                        }`}
                      >
                        <span className="font-medium text-base sm:text-lg">
                          {faq.title}
                        </span>
                      </AccordionTrigger>
                      <AccordionContent
                        className={`ml-1 pb-6 sm:pb-8 ${
                          expandedItem.includes(faq.id)
                            ? "text-neutral-900 dark:text-neutral-300"
                            : "text-neutral-600 dark:text-neutral-700"
                        }`}
                      >
                        {faq.description}

                        <div className="space-x-2 pt-4">
                          <Button variant="outline">
                            <Icons.thumbsUp />
                            Helpful
                          </Button>
                          <Button variant="outline">
                            <Icons.thumbsDown />
                            Not Helpful
                          </Button>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            </TabsPanel>
          </Tabs>
        </div>
      </div>
    </section>
  );
}