// process.jsx — how it works (4 steps), free-for-masters, FAQ
const { useState } = React;

const STEPS = [
  ["doc","Заполните анкету","Расскажите о себе, услугах и районах выезда."],
  ["free","Пройдите проверку","Мы проверим профиль перед допуском к заявкам."],
  ["orders","Получайте заявки","Заявки от клиентов рядом приходят вам."],
  ["wrench","Выполняйте заказы","Берёте удобные заявки и работаете рядом с домом."],
];
function HowItWorks() {
  return (
    <section className="sec" id="how">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">Как это работает</div>
          <h2>Четыре простых шага</h2>
        </div>
        <div className="proc-grid four">
          {STEPS.map(([ic,t,d],i)=>{const I=Ic[ic];return(
            <div className="proc" key={t}>
              <div className="proc-top"><span className="proc-num">{i+1}</span><span className="proc-ico"><I size={22} /></span></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

function FreeForMasters() {
  return (
    <section className="sec" id="free">
      <div className="wrap">
        <div className="free-band">
          <div className="free-left">
            <div className="free-num">0&nbsp;₽</div>
            <div className="free-cap">для мастеров</div>
          </div>
          <div className="free-right">
            <h2>Бесплатно для мастеров</h2>
            <p>Подключение, анкета и заявки — бесплатно. Вы получаете доступ к клиентам рядом без платы за участие.</p>
            <ul className="free-notes">
              <li><Ic.check size={18} color="var(--accent-600)" />Цену за работу устанавливаете сами</li>
              <li><Ic.check size={18} color="var(--accent-600)" />Берёте только удобные заявки</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQ = [
  ["Кто может подключиться?","Частные мастера, самозанятые, ИП, бригады, прорабы и ремонтные компании."],
  ["Сколько стоит участие?","Для мастеров сервис бесплатный: подключение и заявки — без платы за участие."],
  ["Можно ли выбирать районы и заявки?","Да. Районы, услуги и какие заявки брать в работу — вы выбираете сами."],
  ["Кто назначает цену?","Стоимость работы устанавливает мастер. Если после осмотра объём меняется — можно согласовать новую цену с клиентом."],
  ["Как мастер получает оплату?","Оплату за работу вы получаете напрямую от клиента. Цену за работу устанавливаете сами."],
  ["Что будет после анкеты?","Мы проверим профиль и сообщим о следующих шагах. После регистрации вы получите инструкцию по работе с сервисом."],
];
function Faq() {
  const [open,setOpen] = useState(0);
  return (
    <section className="sec" id="faq">
      <div className="wrap faq-wrap">
        <div className="sec-head" style={{textAlign:"center",margin:"0 auto 40px"}}>
          <div className="eyebrow">Частые вопросы</div>
          <h2>Коротко о главном</h2>
        </div>
        <div className="faq-list">
          {FAQ.map(([q,a],i)=>(
            <div className={"faq-item"+(open===i?" open":"")} key={q}>
              <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span>{q}</span>
                <span className="faq-ic">{open===i?<Ic.minus size={20} />:<Ic.plus size={20} />}</span>
              </button>
              <div className="faq-a"><p>{a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, FreeForMasters, Faq });