import Link from 'next/link'
import Image from 'next/image'
import { Container } from '@/components/Container'

const faqs = [
  [
    {
      question: 'What is an \'instance\'?',
      answer:
        'An instance is one server running some fediverse software. It forms a network with all other instances, to create a social network'
    },
    {
        question: 'What is the fediverse?',
        answer:
            'The fediverse is a network of independent servers running different social media software, all communicating through the ActivityPub protocol. It is a decentralized network, where each server is independent and can be run by anyone.'
    },
    {
        question: 'Why do I have to choose an instance?',
        answer:
         'For the same reason you need to choose an email provider (like gmail). You need a way to send activitypub data, and an instance lets you do that.'
    }
  ],
  [
    {
      question: 'Why did you fork from Pleroma?',
      answer:
        'Long story. Boils down to not having faith that pleroma dev will ever recover. A longer-form explanation is available at https://coffee-and-dreams.uk/development/2022/06/24/akkoma.html',
    },
    {
      question: 'Why did you remove chats?',
        answer:
         'Chats were incredibly poorly implemented in pleroma, and added far more complexity to the codebase than they were worth. It is my view that real-time chats do not fall into the scope of an activitypub implementation, and should be handled by a separate service. I have no plans to add them back in.'
    },
    {
        question: 'Is it possible to migrate to Akkoma from Pleroma?',
        answer: 'Yes, entirely! Check the documentation for more info.'
    },
    {
        question: 'Is it possible to migrate from Akkoma back to Pleroma?',
        answer: 'Yes, although it\'s not as easy. You\'d have to roll back migrations, but all akkoma changes are 100% reversible and non-destructive.'
    }
  ]
]

export function Faqs() {
  return (
    <section
      id="faqs"
      aria-labelledby="faqs-title"
      className="border-t border-gray-200 py-20 sm:py-32"
    >
      <Container>
        <div className="mx-auto max-w-2xl lg:mx-0">
          <h2
            id="faqs-title"
            className="text-3xl font-medium tracking-tight text-gray-900"
          >
            Frequently asked questions
          </h2>
          <p className="mt-2 text-lg text-gray-600">
            If you have anything else you want to ask, hop on the #akkoma channel at <span className={"font-mono"}>ircs://irc.akkoma.dev:6697</span>,
            or the webchat at <Link className="text-blue-600" href={"https://irc.akkoma.dev"}>irc.akkoma.dev</Link> <br />
            or raise an issue on <Link className="text-blue-600" href={"https://akkoma.dev/AkkomaGang/akkoma"}>the gitea</Link>!
          </p>
        </div>
        <ul
          role="list"
          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
        >
          {faqs.map((column, columnIndex) => (
            <li key={columnIndex}>
              <ul role="list" className="space-y-10">
                {column.map((faq, faqIndex) => (
                  <li key={faqIndex}>
                    <h3 className="text-lg font-semibold leading-6 text-gray-900">
                      {faq.question}
                    </h3>
                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </Container>
    </section>
  )
}
