'use client';

import * as React from 'react';
import { motion } from 'motion/react';

import { cn } from '@workspace/ui/lib/utils';
import { Button } from '@workspace/ui/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui/card';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@workspace/ui/components/ui/accordion';

// Mock FAQ data
const FAQ_ITEMS = [
  {
    question: "What uptime can I expect?",
    answer: "We design for 99.9%+ uptime through redundant hardware, proactive monitoring, and colocation in Tier III+ facilities. Downtime is planned and communicated well in advance."
  },
  {
    question: "How is support handled?",
    answer: "You get direct access to our engineering team via Slack, email, or phone. We provide 24/7 monitoring and alerting. Support is included in your managed ops package."
  },
  {
    question: "Do I need to retrain my team?",
    answer: "Minimal retraining is required. We integrate with your existing tools and workflows. Our 'Desire Paths' process ensures the system fits how your team already works, then we automate the boring parts."
  },
  {
    question: "How secure is my data?",
    answer: "Your data resides on hardware you own, in a physically secure facility. Access is strictly controlled. We implement industry best practices for network security, encryption, and access management. You control the keys."
  },
  {
    question: "How are upgrades handled?",
    answer: "Upgrades are planned, tested, and executed with zero downtime. We handle OS, firmware, and application updates as part of our managed service. You approve changes to critical systems."
  },
  {
    question: "Is my data used for AI training?",
    answer: "No. Your data never leaves your hardware or our managed environment without your explicit permission. When local AI inference is used, it happens entirely on your stack. There is zero data leakage to third parties."
  }
];

export interface FAQAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string; // Optional title for the section
}

export function FAQAccordion({ title, className, ...props }: FAQAccordionProps) {
  return (
    <div className={cn("w-full", className)} {...props}>
      {title && <h2 className="text-2xl font-bold mb-8 text-center">{title}</h2>}
      <Accordion type="single" collapsible className="w-full max-w-3xl mx-auto">
        {FAQ_ITEMS.map((item, index) => (
          <AccordionItem key={index} value={`item-${index}`}>
            <AccordionTrigger>{item.question}</AccordionTrigger>
            <AccordionContent>
              {item.answer}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}