/* Mesh website — FAQ accordion + compact homepage block.
   The homepage block is the conversion-focused FAQ: centered heading, 5
   collapsed questions, expanding on click. Reached from the header "FAQs"
   link, which scrolls to this block (#faqs). */

/* One accordion row. Collapsed by default; expands on click with a rotating
   chevron. We set height + chevron rotation as inline styles with transitions
   disabled, so the open/closed state is committed instantly and correctly —
   a global `transition: all` otherwise freezes these at their start value in
   throttled/preview contexts. */
function FaqItem({ q, a, open, onToggle, id }) {
  const aRef = React.useRef(null);
  const innerRef = React.useRef(null);
  const chevRef = React.useRef(null);

  React.useLayoutEffect(() => {
    const el = aRef.current, inner = innerRef.current, chev = chevRef.current;
    if (!el || !inner) return;
    el.style.height = open ? inner.offsetHeight + 'px' : '0px';
    if (chev) chev.style.transform = open ? 'rotate(180deg)' : 'rotate(0deg)';
  }, [open, a]);

  React.useEffect(() => {
    if (!open) return;
    const onResize = () => {
      const el = aRef.current, inner = innerRef.current;
      if (el && inner) el.style.height = inner.offsetHeight + 'px';
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [open]);

  return (
    <div className={'faq-item' + (open ? ' open' : '')}>
      <button type="button" className="faq-q" aria-expanded={open}
        aria-controls={id + '-a'} id={id + '-q'} onClick={onToggle}>
        <span className="faq-q-text">{q}</span>
        <span className="faq-chev" ref={chevRef}><Icon name="chevron-down" className="ic" stroke={2} /></span>
      </button>
      <div className="faq-a" ref={aRef} id={id + '-a'} role="region" aria-labelledby={id + '-q'}>
        <div className="faq-a-inner" ref={innerRef}><p>{a}</p></div>
      </div>
    </div>
  );
}

/* Compact homepage block — sits between the testimonial and the final CTA.
   Single column, 5 items, no search, no categories. */
function FAQHome({ onCta }) {
  const [open, setOpen] = React.useState(-1);
  const items = window.FAQ_HOME || [];
  return (
    <section className="section faq-home" id="faqs">
      <div className="wrap">
        <Reveal className="section-head center faq-home-head">
          <h2>Frequently Asked Questions</h2>
        </Reveal>
        <Reveal className="faq-list faq-list-narrow" delay={80}>
          {items.map((it, i) => (
            <FaqItem key={i} id={'fh-' + i} q={it.q} a={it.a}
              open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </Reveal>
        <Reveal className="faq-home-more center" delay={120}>
          <button type="button" className="faq-morelink" onClick={onCta}>More questions? Book a demo <Icon name="arrow-right" className="ic" /></button>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { FaqItem, FAQHome });