// FAQ accordion section
const FAQ = () => {
  const M = window.Motion.motion;
  const AnimatePresence = window.Motion.AnimatePresence;
  const [openIdx, setOpenIdx] = React.useState(-1);

  const items = [
    {
      q: 'How do I contact you?',
      a: 'I’m not very active on social media. Please send any questions or ideas to bobafriendsglobal@gmail.com. I read every message :)',
    },
    {
      q: 'Can I make content about Boba Tale on social media?',
      a: 'Absolutely! You’re free to monetize videos and posts featuring Boba Tale.',
    },
    {
      q: 'How did you make Boba Tale?',
      a: 'I came up with the idea based on my experience working as a barista throughout college. During COVID, I started working on the game on and off in my free time. I used Construct 3 to build the prototype and Procreate to create all of the game assets. The first playable build was released in 2020 and v2 was released the following year.',
    },
    {
      q: 'How do I buy coins and gems for Boba Tale?',
      a: 'You can buy coins and gems in the Cash Shop by clicking + in game menu.',
    },
    {
      q: 'What game engine or language do you use?',
      a: 'Previously I used Construct 3, but most of the games have been rebuilt with Unity.',
    },
    {
      q: 'Who is your game publisher?',
      a: 'All games are self-published by me on iOS and Android.',
    },
    {
      q: 'How do I download the latest version?',
      a: 'iOS typically has the newest version. Android can be 1–2 versions behind while I test on various devices (and emulators like BlueStacks or Nox), but I aim to keep both platforms as up to date as possible. Please contact me if the game doesn\'t work on your device.',
    },
  ];

  return (
    <section style={{ background: 'var(--brand-white)' }}>
      <div className="container">
        <div id="faq" className="center" style={{ marginBottom: 40 }}>
          <Eyebrow
            variant="on-light"
            icon={<img src="public/icon-question.svg" alt="" aria-hidden="true" style={{ width: 20, height: 20, display: 'block' }} />}
          >
            About The Creator
          </Eyebrow>
          <h2 className="h-section" style={{ marginTop: 14 }}>Frequently Asked Questions</h2>
        </div>

        <div style={{ maxWidth: 840, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {items.map((item, i) => {
            const isOpen = openIdx === i;
            return (
              <M.div
                key={i}
                initial={{ opacity: 0, y: 14 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-40px' }}
                transition={{ duration: 0.5, delay: i * 0.04, ease: [0.22, 1, 0.36, 1] }}
                style={{
                  background: 'var(--brand-gray)',
                  borderRadius: 14,
                  overflow: 'hidden',
                  border: '1px solid #E4EBF0'
                }}>
                <button
                  onClick={() => setOpenIdx(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: '100%',
                    background: 'transparent',
                    border: 'none',
                    padding: '18px 22px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 16,
                    textAlign: 'left',
                    color: 'var(--brand-black)',
                    fontSize: 20,
                    fontWeight: 600,
                  }}
                >
                  <span>{item.q}</span>
                  <M.span
                    style={{
                      width: 36, height: 36, borderRadius: '50%',
                      background: 'var(--brand-white)',
                      border: '1px solid #E4EBF0',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                      color: 'var(--brand-black)',
                    }}
                  >
                    {isOpen ? (
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ width: 16, height: 16 }} aria-hidden="true">
                        <path d="M5 12h14"/>
                      </svg>
                    ) : (
                      <Icon.Plus style={{ width: 16, height: 16 }} />
                    )}
                  </M.span>
                </button>

                <AnimatePresence initial={false}>
                  {isOpen && (
                    <M.div
                      key="content"
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: 'auto', opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
                      style={{ overflow: 'hidden' }}
                    >
                      <div style={{
                        margin: '0 22px',
                        padding: '16px 0 20px',
                        borderTop: '1px solid #E4EBF0',
                        color: 'var(--text-muted)',
                        fontSize: 18,
                        lineHeight: 1.6,
                      }}>
                        {item.a}
                      </div>
                    </M.div>
                  )}
                </AnimatePresence>
              </M.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;