// model.jsx — what VOVO is, audience, order categories, what master controls

function WhatIsVovo() {
  return (
    <section className="sec" id="model">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">Что такое VOVO</div>
          <h2>Товар и мастер — в одном сервисе</h2>
          <p>VOVO соединяет клиента, товар и мастера. Человек может купить товар и сразу найти исполнителя — или оставить отдельную заявку на работу.</p>
        </div>

        <div className="scenarios">
          <div className="scn">
            <div className="scn-tag">Сценарий 1</div>
            <div className="scn-flow">
              <span className="scn-node"><Ic.cart size={22} /></span>
              <span className="scn-arrow"><Ic.arrow size={18} color="var(--ink-40)" /></span>
              <span className="scn-node accent"><Ic.pin2 size={22} /></span>
            </div>
            <h3>Клиент покупает товар и сразу ищет мастера</h3>
            <p>Купил смеситель — нужна установка. Выбрал дверь — нужен монтаж. Заказал мебель — нужна сборка. Мастер добавляется к задаче.</p>
          </div>
          <div className="scn">
            <div className="scn-tag">Сценарий 2</div>
            <div className="scn-flow">
              <span className="scn-node"><Ic.wrench size={22} /></span>
              <span className="scn-arrow"><Ic.arrow size={18} color="var(--ink-40)" /></span>
              <span className="scn-node accent"><Ic.pin2 size={22} /></span>
            </div>
            <h3>Клиент оставляет заявку на работу</h3>
            <p>Починить розетку, заменить кран, подключить технику или выполнить мелкий ремонт — отдельная заявка, без покупки товара.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const AUDIENCE = [
  ["user","Частные мастера"],["doc","Самозанятые"],["briefcase","ИП"],
  ["users","Бригады"],["hardhat","Прорабы"],["store","Ремонтные компании"],
];
function Audience() {
  return (
    <section className="sec sec-tight" id="who" style={{background:"var(--bg)"}}>
      <div className="wrap aud-row-wrap">
        <h2 className="aud-title">Подключиться можно любым составом</h2>
        <div className="aud-row">
          {AUDIENCE.map(([ic,t])=>{const I=Ic[ic];return(
            <span className="aud-pill" key={t}><I size={20} color="var(--accent-600)" />{t}</span>
          );})}
        </div>
      </div>
    </section>
  );
}

const CATS = [
  ["drop","Сантехника"],["bolt","Электрика"],["sofa","Сборка мебели"],["door","Установка дверей"],
  ["ac","Монтаж кондиционеров"],["wrench","Мелкий ремонт"],["roller","Отделочные работы"],["cart","Работы после покупки товара"],
];
function Categories() {
  return (
    <section className="sec" id="orders">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow">Какие заявки можно получать</div>
          <h2>Ремонтные и бытовые работы</h2>
          <p>И отдельные заявки на работу, и задачи после покупки товара в VOVO. Какие брать — решаете вы.</p>
        </div>
        <div className="cat-grid">
          {CATS.map(([ic,t])=>{const I=Ic[ic];return(
            <div className="cat" key={t}><span className="cat-ico"><I size={26} /></span><span>{t}</span></div>
          );})}
        </div>
        <div className="urg-row">
          <div className="urg"><span className="urg-dot urg-now"></span><div><strong>Срочные заявки</strong><span>на сегодня или завтра</span></div></div>
          <div className="urg"><span className="urg-dot urg-plan"></span><div><strong>Плановые работы</strong><span>на выбранную дату и время</span></div></div>
        </div>
      </div>
    </section>
  );
}

const CHOOSE = [
  ["region","Районы работы","Принимаете заявки только там, где удобно выезжать."],
  ["calendar","График","Указываете свободное расписание и слоты."],
  ["ruble","Стоимость","Цену за работу устанавливаете сами."],
  ["toggle","Какие заявки брать","Принимаете или отклоняете — без обязательств."],
];
function ChooseMaster() {
  return (
    <section className="sec" id="control" style={{background:"var(--bg)"}}>
      <div className="wrap choose-layout">
        <div className="choose-head">
          <div className="eyebrow">Что выбирает мастер</div>
          <h2>Вы управляете работой сами</h2>
          <p>VOVO не диктует, как и сколько вам работать. Все ключевые решения остаются за вами.</p>
          <div className="choose-note">
            <Ic.check size={20} color="var(--accent-600)" />
            <span>Если после осмотра объём работы меняется, вы можете согласовать с клиентом новую стоимость до начала.</span>
          </div>
        </div>
        <div className="choose-list">
          {CHOOSE.map(([ic,t,d])=>{const I=Ic[ic];return(
            <div className="choose-item" key={t}>
              <span className="choose-ico"><I size={22} /></span>
              <div><h4>{t}</h4><p>{d}</p></div>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhatIsVovo, Audience, Categories, ChooseMaster });