import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
import { MinusSmallIcon, PlusSmallIcon } from '@heroicons/react/24/outline'

const faqs = [
  {
    question: "What is VerseFest 2024?",
    answer:
      "VerseFest 2024 is a global virtual festival hosted on the OurVerse metaverse platform. It’s designed to bring together innovators, creators, and enthusiasts from around the world for three days of immersive experiences, cutting-edge presentations, and dynamic networking opportunities. From insightful talks by industry leaders to interactive demos and futuristic entertainment, VerseFest 2024 is where the digital world meets real-world possibilities.",
  },
  {
    question: "How can I participate in VerseFest 2024?",
    answer:
      "Participation in VerseFest 2024 is easy and free! Simply sign up on our website, and you’ll receive access to the OurVerse platform, where all events will take place. Whether you’re attending as a viewer, a participant in workshops, or even as a startup looking to pitch in our LaunchPad Arena, there’s something for everyone. Don’t miss the chance to be part of this groundbreaking virtual event.",
  },
  {
    question: "What can I expect from the event schedule?",
    answer:
      "VerseFest 2024 offers a jam-packed schedule across three days, filled with a variety of events to suit different interests. Expect a mix of inspiring keynote presentations, hands-on workshops, startup showcases in the LaunchPad Arena, interactive demos, and futuristic entertainment in venues like the HoloBeats Club. The event is designed to be flexible, so you can join the sessions that interest you most at your own pace.",
  },
  {
    question: "What technology do I need to join VerseFest 2024?",
    answer:
      "All you need is a stable internet connection and a device such as a computer, tablet, or smartphone. OurVerse is compatible with most modern web browsers, and no additional software or hardware is required to participate in most events. However, for an optimal experience in our more immersive environments like the HoloLounge or HoloBeats Club, we recommend using a computer with a good graphics card.",
  },
  {
    question: "Can I network with other attendees during VerseFest 2024?",
    answer:
      "Absolutely! VerseFest 2024 is designed to be an interactive experience, allowing you to connect with other attendees through various networking features. Join virtual meetups, participate in live Q&A sessions, or visit the Freelance Oasis to connect with like-minded professionals. There are also plenty of social spaces like the HoloLounge and the AI Colosseum where you can meet others and discuss the latest trends and ideas.",
  },
  {
    question: "Will the sessions be recorded and available after the event?",
    answer:
      "Yes, most sessions will be recorded and made available to registered participants after the event. This way, if you miss a session or want to revisit a particular talk or workshop, you can do so at your convenience. Keep an eye on your email and the OurVerse platform for updates on when and where you can access the recordings.",
  },
  // More questions...
]

export default function FAQ() {
  return (
    <div className="bg-white">
      <div className="mx-auto max-w-7xl px-6 lg:px-8 lg:py-4 pt-12 pb-20 mb-20">
        <div className="mx-auto max-w-4xl divide-y divide-purple-900/10">
          <h2 className="lg:text-4xl text-3xl font-medium leading-10 tracking-tight text-purple-700">Frequently Asked Questions</h2>
          <dl className="mt-10 space-y-6 divide-y divide-purple-900/10">
            {faqs.map((faq) => (
              <Disclosure key={faq.question} as="div" className="pt-6">
                <dt>
                  <DisclosureButton className="group flex w-full items-start justify-between text-left">
                    <span className="text-lg text-purple-700 font-semibold leading-7">{faq.question}</span>
                    <span className="ml-6 flex h-7 items-center">
                      <PlusSmallIcon aria-hidden="true" className="h-6 w-6 group-data-[open]:hidden" />
                      <MinusSmallIcon aria-hidden="true" className="h-6 w-6 [.group:not([data-open])_&]:hidden" />
                    </span>
                  </DisclosureButton>
                </dt>
                <DisclosurePanel as="dd" className="mt-2 pr-12">
                  <p className="text-base leading-7 text-purple-900">{faq.answer}</p>
                </DisclosurePanel>
              </Disclosure>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}
