/* Approach + Services + Interactive Stack + Cases + Process + Prices */

/* ========== Approach ========== */
function Approach() {
  const items = [
    { idx: '01', title: 'Технический подход', body: 'Смотрю код, шаблоны, базу данных, сервер, логи и индексацию. Не «маркетолог по SEO», а разработчик — нахожу реальные причины ошибок.' },
    { idx: '02', title: 'Небольшой удобный старт', body: 'Можно зайти с одной задачи: аудит, одна форма, одна ошибка, микроразметка или запуск на VPS. Без длинных договоров.' },
    { idx: '03', title: 'Гибкий формат заказа', body: 'Прямая заявка через сайт, безопасная сделка на фриланс-площадке или индивидуальная оценка под проект.' },
  ];
  return (
    <section id="about">
      <div className="container">
        <Reveal as="div" className="section-label">// формат работы</Reveal>
        <Reveal as="h2" className="section-title" delay={60}>
          Точечные задачи <em>без</em> агентской бюрократии
        </Reveal>
        <Reveal as="p" className="section-lead" delay={120}>
          Сначала короткая диагностика, потом понятный объём работ, срок и результат. Можно работать напрямую или через удобную площадку — выбираете сами.
        </Reveal>
        <div className="approach-grid">
          {items.map((it, i) => (
            <Reveal key={it.idx} delay={i * 80} className="approach-card">
              <div className="idx">/* {it.idx} */</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========== Services ========== */
const SERVICES = [
  { cmd: 'schema-org-fix',  title: 'Микроразметка schema.org', price: '2 500 ₽', desc: 'Article, Product, Organization, Person, BreadcrumbList — все типы JSON-LD, проходящие валидатор.' },
  { cmd: 'seo-audit',       title: 'Технический SEO-аудит',   price: '2 000 ₽', desc: 'robots.txt, sitemap.xml, canonical, редиректы, дубли, микроразметка и базовые ошибки. С отчётом и приоритетами.' },
  { cmd: 'php-mysql-fix',   title: 'Доработка PHP/MySQL',     price: '3 000 ₽', desc: 'Исправление ошибок, оптимизация SQL, формы, почта, админки и старые самописные сайты.' },
  { cmd: 'vps-deploy',      title: 'VPS · Docker · Nginx · SSL', price: '4 000 ₽', desc: 'Развёртывание сайта или приложения на сервере, домен, HTTPS, reverse proxy, docker-compose.' },
  { cmd: 'api-integrate',   title: 'API-интеграции',          price: '15 000 ₽', desc: 'Интеграции с внешними API, выгрузки, импорты, уведомления, обработка заявок и заказов.' },
  { cmd: 'ready-site',      title: 'Готовые сайты и шаблоны', price: '19 990 ₽', desc: 'Сайты услуг, статейники, каталоги и лендинги с админкой, SEO и установкой на VPS.' },
];

function Services({ setRoute }) {
  const publicServices = window.__PUBLIC_DATA__?.services;
  const items = publicServices?.length
    ? publicServices.map((service) => ({
      cmd: service.slug,
      title: service.title,
      price: service.price,
      desc: service.short,
      href: service.href || `/services/${service.slug}/`,
    }))
    : SERVICES.map((service) => ({ ...service, href: '#services' }));

  return (
    <section id="services" className="services">
      <div className="container">
        <Reveal as="div" className="section-label">// что можно заказать</Reveal>
        <Reveal as="h2" className="section-title" delay={60}>
          Ключевые услуги <em>·</em> от точечного фикса до проекта
        </Reveal>
        <Reveal as="p" className="section-lead" delay={120}>
          Шесть основных команд. Можно начать с самой маленькой — например, проверить, почему перестала работать форма, или почему страницы не индексируются.
        </Reveal>

        <div className="services-grid">
          {items.map((s, i) => (
            <Reveal
              key={s.cmd}
              as="a"
              href={s.href}
              delay={(i % 3) * 60}
              className="service-card"
            >
              <div className="corner">[{String(i + 1).padStart(2, '0')}]</div>
              <div className="cmd">{s.cmd}</div>
              <h3>{s.title}</h3>
              <div className="price"><span>от</span><strong>{s.price}</strong></div>
              <p>{s.desc}</p>
              <span className="more">подробнее <span>→</span></span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Approach = Approach;
window.Services = Services;