const FAQ = ({ items }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ maxWidth: 820, margin: '0 auto', fontFamily: 'var(--font-sans)' }}>
      {items.map((it, i) => (
        <div key={i} style={{ borderBottom: '1px solid #DEDEDE' }}>
          <button
            onClick={() => setOpen(open === i ? -1 : i)}
            style={{
              width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '24px 0', background: 'transparent', border: 'none', cursor: 'pointer',
              fontSize: 18, fontWeight: 600, color: '#1E1E1E', textAlign: 'left', fontFamily: 'inherit'
            }}>
            <span>{it.q}</span>
            <span style={{
              fontSize: 24, fontWeight: 300, flexShrink: 0, marginLeft: 16,
              transition: 'transform .24s',
              transform: open === i ? 'rotate(45deg)' : 'none'
            }}>+</span>
          </button>
          {open === i && (
            <div
              style={{ padding: '0 0 24px', fontSize: 16, lineHeight: 1.65, color: '#393A3D' }}
              dangerouslySetInnerHTML={{ __html: it.a }}
            />
          )}
        </div>
      ))}
    </div>
  );
};
window.FAQ = FAQ;