/* global React, Reveal, Icon */
// שאלות ותשובות — animated accordion.
const { useState: useStateFaq, useRef: useRefFaq } = React;

const FaqItem = ({ item, open, onToggle }) => {
  const ref = useRefFaq(null);
  return (
    <div style={{
      background: 'var(--white)', borderRadius: 'var(--radius-lg)', border: '1px solid rgba(28,20,19,0.06)',
      boxShadow: open ? 'var(--shadow-md)' : 'var(--shadow-sm)', overflow: 'hidden',
      transition: 'box-shadow 280ms var(--ease-soft)',
    }}>
      <button onClick={onToggle} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        background: 'none', border: 'none', cursor: 'pointer', textAlign: 'right', padding: '22px 26px',
        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.05rem, 1.5vw, 1.25rem)', color: 'var(--ink-900)',
      }}>
        <span>{item.q}</span>
        <span style={{ flexShrink: 0, width: 34, height: 34, borderRadius: '50%', background: open ? 'var(--brand)' : 'var(--surface-tint)', color: open ? '#fff' : 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 280ms var(--ease-soft)', transform: open ? 'rotate(180deg)' : 'none' }}>
          <Icon name="chevronDown" size={18} />
        </span>
      </button>
      <div style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight : 400) : 0, transition: 'max-height 380ms var(--ease-soft)', overflow: 'hidden' }}>
        <p ref={ref} style={{ margin: 0, padding: '0 26px 24px', fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.8, color: 'var(--ink-500)' }}>{item.a}</p>
      </div>
    </div>
  );
};

const FaqSection = ({ faq }) => {
  const [open, setOpen] = useStateFaq(faq.length ? faq[0].id : null);
  return (
    <section id="faq" style={{ background: 'var(--cream)', padding: 'var(--section-y) 28px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <Reveal as="div" style={{ textAlign: 'center', marginBottom: 46 }}>
          <div className="mln-eyebrow">שאלות ותשובות</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.9rem, 3.4vw, 2.8rem)', margin: 0, color: 'var(--ink-900)' }}>כל מה שרציתם לשאול</h2>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {faq.map((item, i) => (
            <Reveal key={item.id} delay={i * 70}>
              <FaqItem item={item} open={open === item.id} onToggle={() => setOpen(open === item.id ? null : item.id)} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};
window.FaqSection = FaqSection;