Split with support

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  Badge,
  Button,
} from "@cooud-ui/ui";

const FAQ_ITEMS = [
  {
    question: "What exactly do I get with Cooud?",
    answer:
      "A themeable component library plus a registry of copy-paste product sections. Add what you need with the CLI and everything inherits your tokens, radius, and color scale automatically.",
  },
  {
    question: "Do the components work with my existing stack?",
    answer:
      "Yes. Components are framework-agnostic React built on accessible primitives and Tailwind, so they drop into Next.js, Remix, Vite, or any modern React setup.",
  },
  {
    question: "How do themes work?",
    answer:
      "Themes are driven entirely by CSS tokens. Swap a palette and every surface, border, and gradient updates live — no per-component overrides and no rebuild required.",
  },
  {
    question: "Is everything accessible out of the box?",
    answer:
      "Accessibility is the default, not an add-on. Focus management, keyboard interaction, and ARIA semantics are built in and verified, so you pass audits without a last-minute scramble.",
  },
  {
    question: "Can I cancel anytime?",
    answer:
      "Absolutely. Plans are month-to-month with no lock-in, and anything you've already added to your codebase is yours to keep.",
  },
];

export function FaqSplitBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto grid max-w-5xl gap-12 lg:grid-cols-2">
        <div>
          <Badge variant="secondary">FAQ</Badge>
          <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
            Frequently asked questions
          </h2>
          <p className="mt-4 max-w-md text-fg-secondary">
            Answers to the questions we hear most. We keep this short so you can get back to
            building.
          </p>
          <div className="mt-8 rounded-2xl border border-border bg-surface-inset p-5">
            <p className="text-sm font-medium text-fg">Still have questions?</p>
            <p className="mt-1 text-sm text-fg-secondary">
              Our team usually replies within a few hours.
            </p>
            <Button variant="outline" className="mt-4">
              Contact support
            </Button>
          </div>
        </div>

        <Accordion type="single" collapsible>
          {FAQ_ITEMS.map((item) => (
            <AccordionItem key={item.question} value={item.question}>
              <AccordionTrigger>{item.question}</AccordionTrigger>
              <AccordionContent>{item.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}