/* global React */
const DS_FAQ = window.SubEarthDesignSystem_9ae0a6;

function Faq() {
  const { Eyebrow } = window.SubEarthDesignSystem_9ae0a6;
  const qs = [
    { q: 'What does it do?', a: 'It distorts your low and high band together, using some fancy math. Each mode represents a different equation. They will distort your sounds in a unique way that you might not get from your typical multiband distortion. This unique approach to will be taken further with future updates. More modes will be introduced in the future.' },
    { q: 'Is there a Trial or Demo?', a: 'There is not yet a demo or trial. This will be an option in the future after I have polled what users prefer. A lite version exists, but it is not yet released.' },
    { q: 'Do updates cost extra?', a: 'No. Never.' },
    { q: 'What are the system requirements?', a: 'macOS 11+ or Windows 10+, 64-bit, any modern DAW.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: 'var(--section-y) var(--gutter)' }}>
      <div style={{ maxWidth: '820px', margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', marginBottom: 'var(--space-12)' }}>
          <Eyebrow index="04">Questions</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--tr-tight)', lineHeight: 1.0, margin: 0, fontSize: 'var(--fs-d2)' }}>FAQ</h2>
        </div>
        <div>
          {qs.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: '1px solid var(--line)' }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 'var(--space-6)', padding: 'var(--space-6) 0', background: 'transparent',
                    border: 'none', cursor: 'pointer', textAlign: 'left',
                  }}
                >
                  <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 'var(--fs-lg)', color: 'var(--text-primary)' }}>{item.q}</span>
                  <span style={{
                    flex: '0 0 auto', width: '30px', height: '30px', borderRadius: '50%',
                    boxShadow: 'var(--ring-strong)', display: 'grid', placeItems: 'center',
                    color: 'var(--text-secondary)', fontSize: '16px',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform var(--dur) var(--ease-out)',
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? '400px' : '0', overflow: 'hidden',
                  transition: 'max-height var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out)',
                  opacity: isOpen ? 1 : 0,
                }}>
                  <p style={{ margin: 0, paddingBottom: 'var(--space-6)', maxWidth: '60ch', color: 'var(--text-secondary)', fontSize: 'var(--fs-md)', lineHeight: 1.6 }}>{item.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;
window.__appReady.Faq = true;