function FAQ() {
  const items = [
    { q: 'Насколько точно распознаётся еда по фото?', a: 'Точность распознавания типичных блюд — 92–96%. Скрытые ингредиенты или сложные рецепты можно добавить в один клик. Истинный фокус всегда на главном — плотности нутриентов, витаминах и микроэлементах. Их состав меняет биохимию.' },
    { q: 'Это медицинский сервис?', a: 'Нет. Миникорн помогает следить за питанием и привычками, но не ставит диагнозы. Если он видит, что показатели уходят за норму, сразу сообщит, что есть повод сходить к врачу.' },
    { q: 'Что с моими данными?', a: 'Хранятся зашифрованными, не продаются. Можешь экспортировать или удалить всё в один клик в настройках.' },
    { q: 'А если у меня аллергия или диета?', a: 'Указываешь в начале — миникорн учитывает. Безглютеновая, безмолочная, веганская, кето, средиземноморская, ИГ-низкая — всё поддерживается.' },
    { q: 'Можно отменить подписку?', a: 'В любой момент в настройках на видном месте.' },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="pad-y-lg">
      <div className="wrap">
        <div className="faq-grid">
          <Reveal className="faq-header">
            <SectionLabel n={8}>Вопросы</SectionLabel>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', margin: '0 0 20px', maxWidth: '14ch' }}>
              Самое <span style={{ color: 'var(--violet)' }}>частое</span>.
            </h2>
          </Reveal>

          <Reveal delay={120} className="faq-questions">
            <div style={{ borderTop: '1px solid var(--line)' }}>
              {items.map((it, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                    <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                      appearance: 'none', border: 0, background: 'transparent', cursor: 'pointer',
                      width: '100%', textAlign: 'left', padding: '24px 0',
                      display: 'flex', alignItems: 'center', gap: 16, color: 'var(--ink)',
                    }}>
                      <span style={{
                        flex: 1, fontFamily: 'var(--display)', fontWeight: 700, fontSize: 24,
                        letterSpacing: '-0.01em',
                      }}>{it.q}</span>
                      <span style={{
                        width: 32, height: 32, position: 'relative', flexShrink: 0,
                        borderRadius: '50%', background: 'rgba(255,255,255,0.05)',
                        border: '1px solid var(--line-2)',
                        transition: 'transform .3s, background .2s',
                        transform: isOpen ? 'rotate(45deg)' : 'none',
                      }}>
                        <span style={{ position: 'absolute', top: 15, left: 8, right: 8, height: 1.5, background: 'var(--ink-2)' }}/>
                        <span style={{ position: 'absolute', left: 15, top: 8, bottom: 8, width: 1.5, background: 'var(--ink-2)' }}/>
                      </span>
                    </button>
                    <div style={{
                      maxHeight: isOpen ? 320 : 0, overflow: 'hidden',
                      transition: 'max-height .35s cubic-bezier(.4,0,.2,1), opacity .35s',
                      opacity: isOpen ? 1 : 0,
                    }}>
                      <p style={{
                        margin: 0, padding: '0 0 24px',
                        color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.6, maxWidth: '60ch',
                      }}>{it.a}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>

          <Reveal delay={60} className="faq-contact">
            <p style={{ color: 'var(--ink-2)', maxWidth: '36ch', marginBottom: 24 }}>
              Нет ответа? Мы на связи.
            </p>
            <a href="mailto:hi@minicorn.app" className="btn ghost">hi@minicorn.app</a>
          </Reveal>
        </div>
      </div>
      <style>{`
        .faq-grid {
          display: grid;
          grid-template-columns: 1fr 1.4fr;
          grid-template-areas:
            "header questions"
            "contact questions";
          column-gap: 80px;
          row-gap: 32px;
          align-items: start;
        }
        .faq-header { grid-area: header; }
        .faq-questions { grid-area: questions; }
        .faq-contact { grid-area: contact; align-self: end; }
        @media (max-width: 880px){
          .faq-grid {
            grid-template-columns: 1fr !important;
            grid-template-areas:
              "header"
              "questions"
              "contact" !important;
            column-gap: 0 !important;
            row-gap: 24px !important;
          }
          .faq-contact { align-self: start; }
        }
      `}</style>
    </section>
  );
}
window.FAQ = FAQ;