// Block 5 — FAQ accordion

function EventFAQ({ event, t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{
      background: t.bg, padding: '56px 24px',
      borderBottom: `1px solid ${t.line}`,
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 11,
          color: t.brass, letterSpacing: '0.35em', marginBottom: 10,
        }}>// BLOCK 05</div>
        <h2 style={{
          fontFamily: 'Bebas Neue, sans-serif', fontWeight: 400,
          fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1,
          color: t.fg, margin: '0 0 28px', letterSpacing: '0.02em',
        }}>QUESTIONS</h2>
        <div style={{ border: `1px solid ${t.line}` }}>
          {event.faq.map((qa, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: i < event.faq.length - 1 ? `1px solid ${t.line}` : 'none',
                background: isOpen ? t.cellBg : 'transparent',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', display: 'flex', justifyContent: 'space-between',
                    alignItems: 'center', gap: 16, padding: '18px 20px',
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    textAlign: 'left', color: t.fg, minHeight: 44,
                  }}>
                  <span style={{
                    fontFamily: 'Oswald, sans-serif', fontWeight: 600, fontSize: 15,
                    letterSpacing: '0.04em', color: isOpen ? t.brass : t.fg,
                  }}>{qa.q}</span>
                  <span style={{
                    fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 18,
                    color: t.brass, transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 0.2s', flexShrink: 0,
                  }}>+</span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 20px 20px',
                    fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 14,
                    color: t.dim, lineHeight: 1.6,
                  }}>{qa.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.EventFAQ = EventFAQ;