// Блок FAQ — аккордеон частых вопросов. Стиль главной: бежевый фон,
// чёрный гротеск, терракотовый акцент на раскрытом индикаторе.

const FAQ_ITEMS = [
  {
    q: 'Что делает S"MM за меня?',
    a: 'AI-агентство на подписку. Пишем посты, придумываем темы, составляем контент-план, оформляем истории, анализируем конкурентов и присылаем отчёты. Вы получаете готовые публикации по расписанию — без найма маркетолога.',
  },
  {
    q: 'Сколько времени занимает запуск?',
    a: 'Один вечер. После оплаты заполняете короткую анкету о бизнесе, подключаете соцсети — и AI начинает работу. Первые посты появляются в течение суток.',
  },
  {
    q: 'Какие соцсети поддерживаются?',
    a: 'ВКонтакте и Telegram. В зависимости от тарифа — одна или две площадки.',
  },
  {
    q: 'Что я получаю кроме постов?',
    a: 'Контент-план, истории, анализ конкурентов, ежемесячные отчёты и подборки маркетинговых идей. Всё приходит автоматически, по вашему тарифу.',
  },
  {
    q: 'Чем S"MM отличается от фрилансера-SMMщика?',
    a: 'Фрилансер берёт от 25 000 ₽, может пропасть или заболеть. S"MM работает стабильно по фиксированной цене от 8 900 ₽, с полной прозрачностью и поддержкой на связи.',
  },
];

function FaqRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  const innerRef = React.useRef(null);
  const [maxH, setMaxH] = React.useState(0);
  React.useEffect(() => {
    if (!innerRef.current) return;
    setMaxH(open ? innerRef.current.scrollHeight : 0);
  }, [open, a]);
  return (
    <div style={{ borderTop: '1px solid rgba(26,26,30,0.18)' }}>
      <button
        onClick={() => setOpen((v) => !v)}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, padding: '22px 0', background: 'transparent', border: 'none',
          cursor: 'pointer', textAlign: 'left', color: 'var(--ink)',
          fontFamily: 'Inter Tight,sans-serif', fontSize: 19, fontWeight: 500,
        }}
        onMouseOver={(e) => e.currentTarget.style.color = 'var(--accent)'}
        onMouseOut={(e) => e.currentTarget.style.color = 'var(--ink)'}
      >
        <span style={{ textWrap: 'balance' }}>{q}</span>
        <span style={{
          flexShrink: 0, width: 26, height: 26, position: 'relative',
          color: open ? 'var(--accent)' : 'currentColor',
          transition: 'color .2s',
        }}>
          {/* плюс / минус */}
          <span style={{
            position: 'absolute', top: '50%', left: '50%', width: 16, height: 2,
            background: 'currentColor', transform: 'translate(-50%,-50%)',
          }} />
          <span style={{
            position: 'absolute', top: '50%', left: '50%', width: 2, height: 16,
            background: 'currentColor', transform: 'translate(-50%,-50%)',
            transition: 'transform .25s ease',
            transformOrigin: 'center',
            ...(open ? { transform: 'translate(-50%,-50%) scaleY(0)' } : null),
          }} />
        </span>
      </button>
      <div style={{
        maxHeight: maxH,
        overflow: 'hidden',
        transition: 'max-height .3s ease',
      }}>
        <div ref={innerRef}>
          <p style={{
            margin: 0, paddingTop: 4, paddingBottom: 24, maxWidth: 680,
            fontSize: 16.5, lineHeight: 1.55, color: 'rgba(26,26,30,0.66)',
          }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

function Faq({ minH }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <section id="faq" style={{
      minHeight: isMobile ? 'auto' : minH, padding: isMobile ? '56px 18px 72px' : '96px 32px 120px',
      borderTop: '2px solid var(--ink)',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
    }}>
      <h2 style={{
        margin: 0, fontWeight: 900, fontSize: 'clamp(40px,5.5vw,56px)',
        lineHeight: 1, letterSpacing: '-0.03em', textTransform: 'uppercase',
        textAlign: 'center', whiteSpace: isMobile ? 'normal' : 'nowrap',
      }}>Частые вопросы</h2>
      <p style={{
        margin: '18px 0 0', textAlign: 'center',
        fontFamily: 'JetBrains Mono,monospace', fontSize: 12, fontWeight: 700,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(26,26,30,0.5)',
      }}>коротко о том, как всё работает</p>

      <div style={{ width: '100%', maxWidth: 800, marginTop: 48, borderBottom: '1px solid rgba(26,26,30,0.18)' }}>
        {FAQ_ITEMS.map((it) => <FaqRow key={it.q} {...it} />)}
      </div>
    </section>
  );
}

window.Faq = Faq;