// FAQ — light accordion

function FAQItem({ q, a, open, onClick }){
  return (
    <div className={`fa ${open?'op':''}`}>
      <button className="fa-q" onClick={onClick} aria-expanded={open}>
        <span>{q}</span>
        <span className="fa-ic" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3.5 5.5 7 9l3.5-3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
      <div className="fa-a-wrap">
        <div className="fa-a">{a}</div>
      </div>
      <style>{`
        .fa{border-bottom:1px solid var(--line)}
        .fa-q{
          width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
          background:transparent;border:0;cursor:pointer;color:var(--fg);
          padding:26px 0;text-align:left;font-size:18px;font-weight:600;letter-spacing:-.015em;
          font-family:inherit;
        }
        .fa-ic{
          flex-shrink:0;color:var(--fg-2);width:34px;height:34px;border-radius:50%;
          display:grid;place-items:center;border:1px solid var(--line-2);background:#fff;
          transition:transform .25s ease, background .2s ease, color .2s ease;
        }
        .fa.op .fa-ic{transform:rotate(180deg);background:var(--accent);color:#fff;border-color:transparent}
        .fa-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
        .fa.op .fa-a-wrap{grid-template-rows:1fr}
        .fa-a{overflow:hidden;color:var(--fg-2);font-size:15px;line-height:1.6;padding-right:80px}
        .fa.op .fa-a{padding-bottom:26px}
      `}</style>
    </div>
  );
}

function FAQ(){
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Что входит в гарантию возврата?",
      a: "Если за 3 месяца работы вы не вырастете в выдаче или упадёте ниже, чем были, — мы возвращаем деньги. А весь дизайн, который мы сделали (визуал, истории, обложки, фото), остаётся вам в подарок." },
    { q: "Сколько занимает выход в ТОП-10?",
      a: "В среднем — 60-90 дней. На малоконкурентных нишах (например, узкая B2B-услуга в небольшом городе) — 2-4 недели. На высококонкурентных (стоматология в Москве) — до 4 месяцев." },
    { q: "Чем органическое продвижение отличается от рекламы в Яндекс.Картах?",
      a: "Реклама — это платное размещение, которое исчезает, как только вы перестаёте платить за клики. Органическое продвижение — работа с алгоритмом ранжирования: оптимизация карточки, работа с отзывами, контентом, поведенческими сигналами. Эффект сохраняется надолго." },
    { q: "С какими нишами вы работаете?",
      a: "С любым локальным бизнесом — от кофеен и салонов красоты до клиник и B2B-услуг. Не беремся за нелегальные ниши и за карточки, у которых меньше 4.0 рейтинга — сначала нужно восстановить репутацию." },
    { q: "Как вы отчитываетесь о работе?",
      a: "Раз в 30 дней присылаем расширенную статистику: позиции по запросам, динамика звонков и маршрутов, выполненные работы. Дополнительно отчёт по запросу — каждую неделю в любой момент." },
    { q: "Что нужно от меня для старта?",
      a: "Доступ к карточке в Яндекс.Бизнес, краткий бриф (15 минут на созвоне) и подписанный договор. Дальше — только согласование контента и стратегии. Всё остальное берёт команда." },
    { q: "Работаете ли вы по всей России?",
      a: "Да, работаем по всей России. Формат полностью дистанционный — это не влияет на результат: всё, что нужно для запуска, делаем удалённо." },
  ];
  return (
    <section id="faq" className="sec faq">
      <div className="wrap row faq-grid">
        <div className="reveal">
          <span className="eyebrow">Часто спрашивают</span>
          <h2 style={{marginTop:18,marginBottom:24}}>
            Ответы на<br/><span className="em-mute">главные вопросы.</span>
          </h2>
          <p className="lead">Не нашли ответ? Напишите нам — отвечаем в течение часа в рабочее время.</p>
          <a href="#cta" className="btn ghost" style={{marginTop:24}}>Задать свой вопрос <Arrow/></a>
        </div>
        <div className="faq-list reveal">
          {items.map((it, i) => (
            <FAQItem key={i} q={it.q} a={it.a} open={open===i}
              onClick={() => setOpen(open===i ? -1 : i)}/>
          ))}
        </div>
      </div>
      <style>{`
        .faq-grid{grid-template-columns:1fr;gap:48px}
        @media (min-width:880px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:80px}}
        .faq-list{border-top:1px solid var(--line)}
      `}</style>
    </section>
  );
}

window.FAQ = FAQ;