const SERVICES = [
  { n:"01", title:"Японский маникюр", price:"2 800", desc:"Бескислотная обработка кутикулы, питание пластины — без геля, для тех, кто хочет отдохнуть от покрытия.", dur:"90 мин" },
  { n:"02", title:"Аппаратный + покрытие", price:"3 500", desc:"Классика кабинета: чистая зона кутикулы и ровное однотонное покрытие до 3 недель.", dur:"120 мин" },
  { n:"03", title:"Авторский дизайн", price:"от 4 800", desc:"Роспись, фольга, втирки, 3D. Придумываем вместе или беру карт-бланш.", dur:"150 мин" },
  { n:"04", title:"Снятие бережное", price:"900", desc:"Аккуратное снятие старого покрытия аппаратом — ни одного пропила до пластины.", dur:"30 мин" },
  { n:"05", title:"Наращивание форм", price:"от 5 200", desc:"Миндаль, балерина, мягкий квадрат. До 14 дней под руки любой длины.", dur:"180 мин" },
  { n:"06", title:"Педикюр комбинированный", price:"3 400", desc:"Размягчение, чистка стоп, обработка ногтей и покрытие. После визита — шёлк.", dur:"90 мин" },
];

const ServicesEditorial = () => (
  <div className="svc-grid-editorial">
    {SERVICES.map(s => (
      <div key={s.n} className="svc-ed">
        <div className="svc-num">{s.n} · {s.dur}</div>
        <div className="svc-title">{s.title}</div>
        <div className="svc-desc">{s.desc}</div>
        <div className="svc-bottom">
          <div className="svc-price"><b>{s.price}</b><span>₽</span></div>
          <div className="svc-arrow"><Icon name="arrowUpRight" size={16}/></div>
        </div>
      </div>
    ))}
  </div>
);

const ServicesMinimal = () => (
  <div className="svc-grid-minimal">
    {SERVICES.map(s => (
      <div key={s.n} className="svc-row">
        <div className="n">{s.n}</div>
        <div className="t">{s.title}</div>
        <div className="d">{s.desc}</div>
        <div className="p">{s.price} ₽</div>
        <div className="a"><Icon name="arrowUpRight" size={14}/></div>
      </div>
    ))}
  </div>
);

const ServicesSoft = () => (
  <div className="svc-grid-soft">
    {SERVICES.map(s => (
      <div key={s.n} className="svc-soft">
        <div className="ic">{s.n.slice(1)}</div>
        <h4>{s.title}</h4>
        <p style={{fontSize:14, color:"var(--ink-2)"}}>{s.desc}</p>
        <div className="price"><b>{s.price} ₽</b> <span>· {s.dur}</span></div>
      </div>
    ))}
  </div>
);

const Services = ({ variant }) => {
  const v = variant || (window.__TWEAKS__?.serviceCardVariant) || "editorial";
  return (
    <section className="section shell" id="services">
      <div className="services-head">
        <div>
          <div className="overline">Услуги и цены</div>
          <h2>Всё, что умею —<br/>и за сколько.</h2>
        </div>
        <p>Цены указаны за руку целиком. В стоимость входит снятие предыдущего покрытия моей же работы и чашка матча.</p>
      </div>
      {v === "editorial" && <ServicesEditorial/>}
      {v === "minimal" && <ServicesMinimal/>}
      {v === "soft" && <ServicesSoft/>}
    </section>
  );
};

Object.assign(window, { Services });