/* FAQ accordion */

const FAQ = ({onOpenQuiz}) => {
  const ref = React.useRef(null);
  useReveal(ref);
  const [open, setOpen] = React.useState(0);

  const qs = [
    { q: 'Сколько времени готовится заключение?', a: 'Обычно заключение готовится в течение 3–5 рабочих дней. Для срочных случаев возможно получение результата в течение 24–48 часов за дополнительную плату. Координатор сообщит точные сроки после оценки сложности вашего случая.' },
    { q: 'Как передать документы?', a: 'Через защищённый канал: вы загружаете снимки, выписки и анализы через личный кабинет или присылаете в WhatsApp. При необходимости мы оплачиваем и организуем курьерскую доставку оригиналов.' },
    { q: 'Как проходит общение?', a: 'Координатор на русском языке — единая точка контакта. Видео-приёмы с врачом через защищённую платформу, все документы и заключения — с нотариальным переводом на русский.' },
    { q: 'Можно ли задавать уточняющие вопросы после заключения?', a: 'Да. В течение 14 дней после заключения вы можете задать уточняющие вопросы — бесплатно. Дальнейшие консультации — по отдельному тарифу, но всегда с тем же врачом.' },
    { q: 'Как быстро можем начать лечение?', a: 'Для плановых случаев — 2–7 рабочих дней с момента принятия решения. Для срочных онкологических и кардиохирургических случаев — возможна экстренная госпитализация в течение 48 часов.' },
    { q: 'Как мы защищаем ваши данные?', a: 'Соответствие GDPR и израильскому закону о защите медицинских данных. Шифрованное хранение, доступ только у лечащей команды, никогда не передаём третьим лицам без вашего письменного согласия.' },
    { q: 'Как выбрать врача или направление?', a: 'Если сомневаетесь — начните с бесплатной 15-минутной консультации с координатором. Мы подберём специалиста под вашу ситуацию и объясним, чем они отличаются.' },
  ];

  return (
    <section id="faq" className="faq section" ref={ref}>
      <style>{`
        .faq { background: var(--paper); }
        .faq-grid {
          display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px;
          align-items: start;
        }
        @media (max-width: 960px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }

        .faq-aside {
          position: sticky; top: 96px;
          background: var(--paper-2);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-lg);
          padding: 36px;
        }
        @media (max-width: 960px) {
          .faq-aside { position: static; top: auto; padding: 24px; order: 2; }
          .faq-items { order: 1; }
        }
        .faq-aside h3 { font-family: var(--font-display); font-size: 30px; font-weight: 380; margin: 0 0 12px; letter-spacing: -0.015em; }
        .faq-aside p { font-size: 14px; line-height: 1.5; color: var(--ink-60); margin: 0 0 24px; }
        .faq-aside .actions { display: flex; flex-direction: column; gap: 10px; }
        .faq-aside .actions .btn { justify-content: space-between; width: 100%; }
        .faq-hours { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--ink-20); font-size: 12px; color: var(--ink-60); }

        .faq-items { display: flex; flex-direction: column; border-top: 1px solid var(--ink-20); }
        .faq-item {
          border-bottom: 1px solid var(--ink-20);
          transition: background 0.2s;
        }
        .faq-q {
          width: 100%; text-align: left;
          padding: 24px 0;
          display: flex; align-items: center; justify-content: space-between; gap: 24px;
          font-family: var(--font-display);
          font-size: 22px;
          font-weight: 400;
          letter-spacing: -0.01em;
          color: var(--ink);
          line-height: 1.3;
        }
        .faq-q:hover { color: var(--clay); }
        .faq-q .ic {
          flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
          background: var(--ink-05); color: var(--ink);
          display: grid; place-items: center;
          transition: background 0.2s, transform 0.3s, color 0.2s;
        }
        .faq-item.open .faq-q .ic { background: var(--ink); color: var(--paper); transform: rotate(45deg); }
        .faq-a {
          max-height: 0; overflow: hidden;
          transition: max-height 0.4s ease, padding 0.3s ease;
          color: var(--ink-60);
          font-size: 15px; line-height: 1.6;
        }
        .faq-item.open .faq-a {
          max-height: 400px;
          padding: 0 60px 24px 0;
        }
      `}</style>

      <div className="container">
        <div className="reveal">
          <SectionHeader
            eyebrow="Часто задаваемые вопросы"
            title={<>Ответы на популярные <em className="italic-accent">вопросы</em>.</>}
          />
        </div>

        <div className="faq-grid">
          <aside className="faq-aside reveal">
            <I.Chat size={22}/>
            <h3 style={{marginTop: 16}}>Не нашли ответ на свой вопрос?</h3>
            <p>Наши координаторы готовы ответить на любые вопросы и помочь с выбором подходящего решения.</p>
            <div className="actions">
              <button type="button" onClick={onOpenQuiz} className="btn btn-clay">
                Подобрать программу — 1 мин <I.ArrowUpRight size={14}/>
              </button>
              <a href="tel:+972526512654" className="btn btn-ghost">
                Позвонить сейчас <I.Phone size={14}/>
              </a>
              <a href="https://api.whatsapp.com/send?phone=972526512654&text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5%21%20%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%BB%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B2%20%D0%BA%D0%BB%D0%B8%D0%BD%D0%B8%D0%BA%D0%B5%20%D0%90%D1%81%D1%81%D1%83%D1%82%D0%B0." target="_blank" rel="noopener" className="btn btn-ghost">
                Написать в WhatsApp <I.WhatsApp size={14}/>
              </a>
            </div>
            <div className="faq-hours">Ежедневно · 8:00–20:00 Израиль · 9:00–21:00 Москва</div>
          </aside>

          <div className="faq-items reveal d1">
            {qs.map((item, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{item.q}</span>
                  <span className="ic"><I.Plus size={14}/></span>
                </button>
                <div className="faq-a">{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;
