import Container from "@/components/NAWebsite/Container";
import * as Accordion from "@radix-ui/react-accordion";
import Link, { LinkProps } from "next/link";
import { SectionTitle } from "./Section";

function InlineLink({
  children,
  ...props
}: LinkProps & React.ComponentPropsWithoutRef<"a">) {
  return (
    <Link
      {...props}
      className="text-carbon underline transition-colors hover:text-white"
    >
      {children}
    </Link>
  );
}

export default function FAQSection() {
  const faqs = [
    {
      q: "How can I get support?",
      a: (
        <>
          <p>You may:</p>
          <ul>
            <li>
              <InlineLink
                href="https://discord.com/invite/vYU9h56kAX"
                target="_blank"
                rel="noopener noreferrer"
              >
                Join our Discord
              </InlineLink>{" "}
              (recommended)
            </li>
            <li>
              <InlineLink
                href="https://slack.tidb.io/invite?team=tidb-community&channel=everyone&ref=pingcap"
                target="_blank"
                rel="noopener noreferrer"
              >
                Ask questions in our Slack
              </InlineLink>
            </li>
            <li>
              <InlineLink
                href="https://tidb.support.pingcap.com/"
                target="_blank"
                rel="noopener noreferrer"
              >
                Send support tickets
              </InlineLink>
            </li>
          </ul>
        </>
      ),
    },
    {
      q: "Compare TiDB vs a specialized vector database?",
      a: (
        <>
          <p>
            Specialized vector databases like Pinecone only support vector
            search and cannot perform other typical queries, which could be a
            burden for your AI App development.
          </p>
          <p>
            Take GraphRAG as an example, when vector data is stored in a
            specialized vector database, you still need another database to
            query graph relationships and other data in common business logics
            like user management, authentication, content management and so on.
          </p>
          <p>
            By using TiDB, you can store and query all data in one place — less
            learning cost, less maintenance cost, move faster, try with any
            ideas you like, and put more time on your AI App development.
          </p>
        </>
      ),
    },
    {
      q: "Compare TiDB vs other traditional databases?",
      a: (
        <>
          <p>
            TiDB Serverless is a real serverless service — pay as you go
            according to how many compute and storage resources you use, which
            means:
          </p>
          <ul>
            <li>
              No need to estimate which plan or instance type is suitable for
              you.
            </li>
            <li>No risk of overprovisioning or missing capacity.</li>
            <li>
              Save your money when your application is not busy, which is common
              for most apps.
            </li>
          </ul>
        </>
      ),
    },
    {
      q: "What's the difference between TiDB and TiDB Serverless?",
      a: (
        <p>
          TiDB is free and{" "}
          <InlineLink
            href="https://github.com/pingcap/tidb"
            target="_blank"
            rel="noopener noreferrer"
          >
            open-source
          </InlineLink>{" "}
          under the Apache 2.0 License. TiDB Serverless is a fully-managed
          database service build over TiDB.
        </p>
      ),
    },
    {
      q: "What cloud does TiDB Serverless support?",
      a: (
        <>
          <p>
            TiDB Serverless is running on AWS, available in the following
            regions currently:
          </p>
          <ul>
            <li>us-west-2: US West (Oregon)</li>
            <li>us-east-1: US East (N. Virginia)</li>
            <li>ap-southeast-1: Asia Pacific (Singapore)</li>
            <li>ap-northeast-1: Asia Pacific (Tokyo)</li>
            <li>eu-central-1: Europe (Frankfurt)</li>
          </ul>
          <p>
            Note that you can connect to TiDB Serverless from anywhere in the
            world no matter which region your data is stored in.
          </p>
          <p>
            <InlineLink
              href="https://www.pingcap.com/contact-us/"
              target="_blank"
              rel="noopener noreferrer"
            >
              Contact us
            </InlineLink>{" "}
            if you want to try in another region.
          </p>
        </>
      ),
    },
  ];

  return (
    <div className="bg-black py-10 md:py-20">
      <Container>
        <div>
          <SectionTitle>FAQ</SectionTitle>
          <Accordion.Root
            type="multiple"
            className="pt-0 md:pt-8"
          >
            {faqs.map((faq, index) => (
              <Accordion.Item value={`faq-${index}`} key={index} className="border-b border-carbon-900 py-3">
                <Accordion.Header>
                  <Accordion.Trigger
                    className="group flex gap-x-5 w-full items-center py-4 px-5 text-left text-[22px] font-medium text-white transition-colors"
                    data-gtag={`event:faq_click,title:${faq.q}`}
                  >
                    <svg
                      className="fill-white"
                      width="18"
                      height="18"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <rect
                        y="8"
                        width="18"
                        height="2"
                        rx="1"
                        className="origin-center transition-transform group-data-[state=open]:rotate-180"
                      ></rect>
                      <rect
                        y="8"
                        width="18"
                        height="2"
                        rx="1"
                        className="origin-center -rotate-90 transition-transform group-data-[state=open]:rotate-180"
                      ></rect>
                    </svg>
                    <div className="flex-1">{faq.q}</div>
                  </Accordion.Trigger>
                </Accordion.Header>
                <Accordion.Content className="overflow-hidden leading-6 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
                  <div className="prose prose-slate pl-[60px] pb-4 text-carbon max-w-screen-lg">{faq.a}</div>
                </Accordion.Content>
              </Accordion.Item>
            ))}
          </Accordion.Root>
        </div>
      </Container>
    </div>
  );
}