function FAQSection() {
  const [openIdx, setOpenIdx] = React.useState(-1);

  return (
    <section id="faq" style={{ background: 'var(--ink-dark)', padding: 'clamp(3rem, 8vh, 6rem) clamp(1.5rem, 6vw, 6rem)', paddingTop: 'max(64px, clamp(3rem, 8vh, 6rem))' }}>
      <SectionReveal>
        <h2 style={{
          fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 'clamp(32px, 3.5vw, 40px)',
          color: 'var(--paper-cream)', textAlign: 'center', marginBottom: 40,
        }}>Questions we hear often.</h2>
      </SectionReveal>

      <div style={{ maxWidth: 700, margin: '0 auto' }}>
        {FAQ_DATA.map((item, i) => (
          <SectionReveal key={i} delay={i * 60}>
            <div style={{
              background: 'rgba(245,240,230,0.08)', border: '1px solid rgba(245,240,230,0.15)',
              borderRadius: 4, marginBottom: 8, overflow: 'hidden',
            }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{
                width: '100%', background: 'none', border: 'none', padding: '18px 20px',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                cursor: 'pointer', textAlign: 'left',
              }}>
                <span style={{ fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 15, color: 'var(--paper-cream)' }}>{item.q}</span>
                <span style={{
                  color: 'var(--flower-pink)', fontSize: 18, transition: 'transform 0.25s',
                  transform: openIdx === i ? 'rotate(45deg)' : 'none', flexShrink: 0, marginLeft: 12,
                }}>+</span>
              </button>
              <div style={{
                maxHeight: openIdx === i ? 300 : 0, overflow: 'hidden',
                transition: 'max-height 0.25s ease-out',
              }}>
                <p style={{
                  fontFamily: 'var(--font-ui)', fontSize: 14, color: 'rgba(245,240,230,0.75)',
                  lineHeight: 1.7, padding: '0 20px 18px',
                }}>{item.a}</p>
              </div>
            </div>
          </SectionReveal>
        ))}
      </div>
    </section>
  );
}

window.FAQSection = FAQSection;