const FAQ_ITEMS = [
  { q:"Сколько носится покрытие?", a:"В среднем 2-3 недели без сколов. Если сколется в первые 5 дней — переделаю бесплатно." },
  { q:"А если я беременна?", a:"Работаю с беременными с первого триместра. Использую гель-лаки без HEMA и работаю в проветриваемом кабинете с вытяжкой." },
  { q:"Как записаться и что делать при переносе?", a:"Удобнее всего через форму на сайте или WhatsApp. Бесплатный перенос — не позднее, чем за 24 часа." },
  { q:"Сколько длится визит?", a:"От 90 минут (японский маникюр) до 3 часов (наращивание с дизайном). В калькуляторе указано ориентировочное время." },
  { q:"Как добраться и где припарковаться?", a:"Кабинет рядом с м. Маяковская, 3 минуты пешком. Парковка платная, есть два двора с бесплатными местами — покажу в подтверждении записи." },
  { q:"Можно ли приехать со своим дизайном из Pinterest?", a:"Обожаю, когда приходят с картинками. Пришлите заранее — подготовлю материалы под ваш замысел." },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section shell" id="faq">
      <div className="section-head" style={{textAlign:"center", gridTemplateColumns:"1fr", justifyItems:"center"}}>
        <div style={{textAlign:"center"}}>
          <div className="overline" style={{justifyContent:"center"}}>FAQ</div>
          <h2>Ответы на <em style={{fontFamily:"var(--serif)",fontStyle:"italic",color:"var(--olive)"}}>частые</em> вопросы.</h2>
        </div>
      </div>
      <div className="faq-list">
        {FAQ_ITEMS.map((f, i) => (
          <div key={i} className={`faq-item ${open===i?"open":""}`}>
            <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
              <span>{f.q}</span>
              <span className="ic"><Icon name="plus" size={16}/></span>
            </button>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });