// FAQ accordion - gold hairline rows, Cormorant question, body slides via height.
const { useState } = React;

const FAQItem = ({ q, a, defaultOpen = false }) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div style={faqStyles.row} onClick={() => setOpen(o => !o)}>
      <div style={faqStyles.head}>
        <div style={faqStyles.q}>{q}</div>
        <div style={{ ...faqStyles.plus, transform: open ? 'rotate(45deg)' : 'rotate(0deg)' }}>+</div>
      </div>
      <div style={{ ...faqStyles.body, maxHeight: open ? 400 : 0, opacity: open ? 1 : 0,
                    paddingTop: open ? 14 : 0 }}>
        {a}
      </div>
    </div>
  );
};

const FAQ = ({ items }) => (
  <div style={{ maxWidth: 920 }}>
    {items.map((it, i) => <FAQItem key={i} {...it} defaultOpen={i === 0} />)}
  </div>
);

const faqStyles = {
  row: {
    borderBottom: '1px solid var(--border-soft)',
    padding: '24px 0', cursor: 'pointer',
  },
  head: {
    display: 'flex', justifyContent: 'space-between',
    alignItems: 'baseline', gap: 24,
  },
  q: {
    fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1.2,
    color: 'var(--fg-1)', fontWeight: 500, textWrap: 'balance',
  },
  plus: {
    fontFamily: 'var(--font-mono)', fontSize: 22, color: 'var(--fg-accent)',
    transition: 'transform 260ms cubic-bezier(0.22,0.61,0.36,1)',
    lineHeight: 1, userSelect: 'none',
  },
  body: {
    fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)',
    overflow: 'hidden',
    transition: 'max-height 520ms cubic-bezier(0.22,0.61,0.36,1), opacity 260ms, padding-top 260ms',
    maxWidth: 760,
  },
};

Object.assign(window, { FAQ, FAQItem });