import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/default/ui/accordion/radix";
import { Container } from "@/registry/default/components/container/container";

const faq = [
  {
    question: "What is good UI",
    answer:
      "Good UI (User Interface) design is intuitive, invisible, and user-centric, allowing users to achieve goals effortlessly through clear, consistent, and aesthetic layouts.",
  },
  {
    question: "Design Tokens",
    answer:
      "Design tokens are named, reusable variables that store fundamental design decisions (like colors, typography, spacing, and animations) as the single source of truth, bridging design and development to ensure consistency across platforms and applications, allowing for easy theming (like dark mode) and scalability by updating one value to affect many instances.",
  },
  {
    question: "Why Base UI",
    answer:
      "Base UI is an open-source, unstyled React component library designed for building accessible user interfaces. Created by the team behind Material UI, Radix, and Floating UI, it provides the 'headless' (logic-only) foundation for components, allowing developers complete control over styling, CSS, and design implementation. ",
  },
  {
    question: "Tailwind CSS is what?",
    answer:
      "Tailwind CSS is a utility-first framework that enables rapid UI development by applying low-level, predefined CSS classes directly within HTML",
  },
  {
    question: "Does run Token ui with AI",
    answer:
      "Token UI run with Shdcn/MCP, Claude webdesign skills and DesignOS to generate new components, blocks and templates with AI. We are working on a public release of the AI features in the next few months.",
  },
];

const FAQ = () => {
  return (
    <section className="py-16 @container">
      <Container className="flex flex-col gap-12 @lg:flex-row">
        <div className="flex @md:flex-1/2 @5xl:flex-1/3">
          <h2 className="font-semibold text-xl leading-tight tracking-[-0.035em] @4xl:text-5xl">
            Brand New Token UI FAQs
          </h2>
        </div>

        <div className="flex @md:flex-1/2 @5xl:flex-2/3">
          <Accordion
            className="min-w-full"
            defaultValue="question-0"
            type="single"
          >
            {faq.map(({ question, answer }, index) => (
              <AccordionItem key={question} value={`question-${index}`}>
                <AccordionTrigger className="text-left text-xl">
                  {question}
                </AccordionTrigger>
                <AccordionContent className="text-base text-muted-foreground">
                  {answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </Container>
    </section>
  );
};

export default FAQ;