---
const FAQData = [
  {
    question: 'Can I upgrade or downgrade my plan at any time?',
    answer:
      'Yes, you can easily upgrade or downgrade your plan at any time. Simply navigate to the account settings in your dashboard and choose the desired plan. The changes will be reflected immediately, and any adjustments in pricing will be applied on your next billing cycle. Our support team is more than happy to provide guidance and recommendations.',
  },
  {
    question: 'How to claim your 25% discount offer?',
    answer:
      'To claim your 25% discount, simply sign up for an account and enter the promotional code at checkout. The discount will be applied automatically to your purchase.',
  },
  {
    question: "What's your refund policy?",
    answer:
      "We offer a 30-day money-back guarantee on all our plans. If you're not satisfied with our product, simply contact our support team within 30 days of purchase for a full refund.",
  },
  {
    question: 'How to get support for the product?',
    answer:
      "Our dedicated support team is here to help. You can reach out to us through the contact form on our website, send an email, or engage with us via live chat. We'll be happy to assist you with any questions or concerns you may have",
  },
];
---

<section class="relative -mt-8 pt-12 pb-16 sm:mt-0 sm:pt-16">
  <div class="absolute -top-10" id="FAQ"></div>
  <div class="fade-in">
    <div class="relative z-10 container mx-auto w-11/12 px-2 sm:w-full sm:px-8 lg:px-4">
      <div class="mx-auto md:max-w-4xl">
        <p class="block-subtitle mb-7 text-center">Have any questions?</p>
        <h2 class="block-big-title mb-16 text-center">Frequently Asked Questions</h2>
        <div class="-m-1 mb-11 flex flex-wrap">
          {
            FAQData.map((item, index) => (
              <div class="w-full p-1">
                <div
                  class="faq-box card mb-4 cursor-pointer rounded-3xl px-5 py-5 sm:px-8 sm:py-6"
                  data-open={index === 0 ? 'true' : 'false'}
                >
                  <button
                    type="button"
                    class="flex w-full cursor-pointer items-center justify-between bg-transparent text-left"
                    aria-expanded={index === 0 ? 'true' : 'false'}
                    aria-controls={`faq-panel-${index}`}
                    id={`faq-header-${index}`}
                  >
                    <h3 class="content-title">{item.question}</h3>
                    <svg
                      width="28px"
                      height="30px"
                      viewBox="0 0 20 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class={`faq-chevron text-secondaryColor ml-4 shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ${index === 0 ? 'rotate-[180deg]' : 'rotate-[270deg]'}`}
                      aria-hidden="true"
                    >
                      <path
                        d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </button>
                  <div
                    class={`faq-answer-grid ${index === 0 ? 'faq-open' : ''}`}
                    id={`faq-panel-${index}`}
                    role="region"
                    aria-labelledby={`faq-header-${index}`}
                  >
                    <div class="faq-answer-inner">
                      <p class="text-secondaryText pt-4">{item.answer}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .faq-answer-grid {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 150ms ease;
  }
  .faq-answer-grid.faq-open {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .faq-answer-inner {
    overflow: hidden;
    min-height: 0;
  }
</style>

<script>
  const initFaq = () => {
    document.querySelectorAll('.faq-box').forEach((box) => {
      const btn = box.querySelector('button');
      box.addEventListener('click', () => {
        const answerGrid = box.querySelector('.faq-answer-grid');
        const chevron = box.querySelector('.faq-chevron');
        const isOpen = box.getAttribute('data-open') === 'true';

        if (isOpen) {
          answerGrid?.classList.remove('faq-open');
          chevron?.classList.remove('rotate-[180deg]');
          chevron?.classList.add('rotate-[270deg]');
          box.setAttribute('data-open', 'false');
          btn?.setAttribute('aria-expanded', 'false');
        } else {
          answerGrid?.classList.add('faq-open');
          chevron?.classList.add('rotate-[180deg]');
          chevron?.classList.remove('rotate-[270deg]');
          box.setAttribute('data-open', 'true');
          btn?.setAttribute('aria-expanded', 'true');
        }
      });
    });
  };

  document.addEventListener('astro:page-load', initFaq);
</script>
