// Apricus — FAQ (accordéon)
function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = React.useState(0);
  const D = 'var(--font-display)';
  return (
    <section ref={ref} style={{ background: 'url(assets/textures/paper-terracotta.jpg)', backgroundSize: 'cover', padding: '92px 40px' }}>
      <div className="apr-fade" style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Eyebrow style={{ justifyContent: 'center', color: 'var(--apr-citron-soft)' }}>Questions fréquentes</Eyebrow>
          <h2 style={{ fontFamily: D, fontSize: 'clamp(30px,3.8vw,46px)', lineHeight: 1.06,
            letterSpacing: '-0.02em', color: 'var(--apr-cream)', margin: '14px 0 0' }}>
            <span style={{ fontWeight: 300 }}>Tout ce qu'il faut </span>
            <span style={{ fontWeight: 900 }}>savoir</span>
          </h2>
        </div>
        <div style={{ borderTop: '1px solid rgba(251,244,230,0.28)' }}>
          {FAQS.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid rgba(251,244,230,0.28)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', background: 'none',
                  border: 'none', cursor: 'pointer', textAlign: 'left', display: 'flex', alignItems: 'center',
                  gap: 16, padding: '22px 4px' }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17,
                    color: 'var(--apr-cream)', flex: 1 }}>{q}</span>
                  <span style={{ fontFamily: D, fontSize: 28, lineHeight: 0.8, color: 'var(--apr-citron-soft)',
                    transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform .26s var(--ease-out)' }}>+</span>
                </button>
                <div style={{ maxHeight: isOpen ? 240 : 0, overflow: 'hidden',
                  transition: 'max-height .34s var(--ease-out)' }}>
                  <p style={{ color: 'rgba(251,244,230,0.85)', fontSize: 15.5, lineHeight: 1.75,
                    margin: '0 4px 22px', maxWidth: 640 }}>{a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;