/* Cases, Process, Prices, Limits, FAQ, Contact, Footer */

const CASES = [
  {
    cat: 'SEO · структура',
    time: '2 рабочих дня',
    title: 'Техническая чистка статейного раздела и возврат индексации',
    problem: 'У контентного раздела были дубли, спорные canonical, лишние страницы в индексе и рассыпавшаяся логика sitemap после доработок шаблона.',
    result: 'Индексация стала чище, редакция получила понятную схему публикации, а новые статьи перестали плодить технический шум.',
  },
  {
    cat: 'Сервер · деплой',
    time: '1 рабочий день',
    title: 'Запуск Python-приложения на VPS с HTTPS и Docker',
    problem: 'Приложение стартовало нестабильно, было доступно только по IP и не имело понятной схемы деплоя для дальнейших обновлений.',
    result: 'Проект доступен по домену с HTTPS, обновления перестали быть хаотичными, серверная схема стала понятной для дальнейшей поддержки.',
  },
  {
    cat: 'PHP · формы',
    time: 'несколько часов',
    title: 'Восстановление формы отзывов и email-уведомлений',
    problem: 'Форма периодически ломалась, часть заявок терялась, а менеджер не получал уведомления о новых сообщениях.',
    result: 'Форма снова стала рабочим каналом получения обращений, ошибки стало проще диагностировать и не пропускать.',
  },
  {
    cat: 'Производительность · backend',
    time: '1–2 дня',
    title: 'Оптимизация логики корзины на PHP/MySQL',
    problem: 'Корзина тормозила на большом числе позиций, при пересчёте количества давала сбои и лишние SQL-операции.',
    result: 'Корзина заметно стабильнее и быстрее в типовых сценариях, обновление состава перестало ломать пользовательский поток.',
  },
  {
    cat: 'Разметка · SEO',
    time: '1 рабочий день',
    title: 'Настройка sitemap и JSON-LD для сайта услуг',
    problem: 'У сайта не было актуальной карты страниц и валидной schema.org-разметки для услуг, организации и хлебных крошек.',
    result: 'Страницы стали понятнее для поисковых систем, у владельца появился предсказуемый технический базис для дальнейшего роста.',
  },
  {
    cat: 'API · интеграции',
    time: '3 рабочих дня',
    title: 'Заявки с сайта в CRM и Telegram без потерь',
    problem: 'Заявки терялись в почте, менеджер не успевал, часть писем уходила в спам, в CRM попадали не все обращения.',
    result: 'Каждая заявка приходит в Telegram-чат и в CRM в режиме реального времени, ничего не теряется, есть журнал событий.',
  },
];

function plainText(value, fallback = '') {
  const source = value || fallback || '';
  if (!source) return '';
  const tmp = document.createElement('div');
  tmp.innerHTML = source;
  return (tmp.textContent || tmp.innerText || source).trim();
}

function Cases() {
  const publicCases = window.__PUBLIC_DATA__?.cases;
  const items = publicCases?.length
    ? publicCases.map((c) => ({
      cat: c.category,
      time: c.timeline,
      title: c.title,
      problem: plainText(c.problem_html, c.problem),
      result: plainText(c.result_html, c.result),
      href: c.href || `/cases/${c.slug}/`,
    }))
    : CASES.map((c) => ({ ...c, href: '#cases' }));

  return (
    <section id="cases">
      <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="cases-grid">
          {items.map((c, i) => (
            <Reveal key={`${c.href}-${i}`} as="a" href={c.href} delay={(i % 2) * 80} className="case-card">
              <div className="case-meta">
                <span className="cat">{c.cat}</span>
                <span className="time">{c.time}</span>
              </div>
              <h3>{c.title}</h3>
              <div className="case-rows">
                <div className="case-row problem">
                  <span className="label">FROM</span>
                  <p>{c.problem}</p>
                </div>
                <div className="case-row result">
                  <span className="label">TO</span>
                  <p>{c.result}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========== Process ========== */
function Process() {
  const steps = [
    { n: '01', t: 'Вы описываете задачу', d: 'Коротко рассказываете, что нужно исправить или запустить. Можно прислать скриншот, ссылку, текст ошибки.' },
    { n: '02', t: 'Я оцениваю объём', d: 'Если задача понятная — называю стоимость и срок. Если нет — задам уточняющие вопросы.' },
    { n: '03', t: 'Выполняю работу', d: 'Исправляю ошибку, настраиваю сайт, сервер или интеграцию. Показываю промежуточные результаты.' },
    { n: '04', t: 'Передаю результат', d: 'Что сделано, что проверить, что улучшить дальше. Короткие рекомендации в свободной форме.' },
  ];
  return (
    <section className="process">
      <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>

        <Reveal className="process-grid" delay={180}>
          {steps.map((s, i) => (
            <div key={s.n} className="process-step">
              <div className="step-num"><span className="n">{s.n}</span> step</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ========== Prices ========== */
const PRICES = [
  { name: 'Технический SEO-аудит', desc: 'мини-аудит / расширенный аудит с приоритетами', from: '2 000', to: '4 990' },
  { name: 'Микроразметка schema.org', desc: 'одна страница / расширенная настройка для каталога', from: '2 500', to: '7 990' },
  { name: 'Карта сайта, robots, canonical', desc: 'правильная структура для индексации', from: '2 500', to: null },
  { name: 'Доработка PHP/MySQL-сайтов', desc: 'формы, запросы, админки, старые сайты', from: '3 000', to: null },
  { name: 'VPS · Docker · Nginx · SSL', desc: 'базовый запуск / стандарт с Docker / с бэкапом и инструкцией', from: '4 000', to: '12 000' },
  { name: 'API-интеграции и автоматизация', desc: 'CRM, Telegram, выгрузки, импорты', from: '15 000', to: null },
  { name: 'Готовые сайты и шаблоны', desc: 'лендинги, статейники, каталоги с админкой', from: '19 990', to: null },
];

function Prices({ setRoute }) {
  return (
    <section id="prices">
      <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>

        <Reveal className="price-table" delay={180}>
          {PRICES.map((p, i) => (
            <div key={i} className="price-row">
              <div className="name">{p.name}</div>
              <div className="desc">{p.desc}</div>
              <div className="amt">
                <span className="from">от</span>{p.from}{p.to && <span style={{ color: 'var(--ink-3)' }}> — {p.to}</span>} ₽
              </div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ========== Limits ========== */
function Limits() {
  const no = [
    'продвижение под ключ с гарантиями позиций',
    'рекламу и закупку ссылок',
    'большие проекты без предварительной оценки',
    'поддержку 24/7',
    'срочные аварийные работы без доступа к логам',
    'восстановление после взлома без отдельной оценки',
  ];
  const yes = [
    'диагностика, аудит, точечный фикс',
    'разовая настройка сервера с инструкцией',
    'интеграция с конкретной CRM или мессенджером',
    'оптимизация одного узкого места',
    'микроразметка под конкретные страницы',
    'консультация по коду / стеку',
  ];
  return (
    <section>
      <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="limits">
          <Reveal className="limits-col">
            <h3>✓ хорошо подходит</h3>
            <ul className="limits-list yes">
              {yes.map((t, i) => <li key={i}><span className="mark">+</span><span>{t}</span></li>)}
            </ul>
          </Reveal>
          <Reveal className="limits-col" delay={120}>
            <h3>✗ не мой формат</h3>
            <ul className="limits-list no">
              {no.map((t, i) => <li key={i}><span className="mark">−</span><span>{t}</span></li>)}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ========== FAQ ========== */
const FAQ = [
  { q: 'Можно ли начать с одной небольшой задачи?', a: 'Да, это самый частый формат. Один аудит, одна форма, одна ошибка или один модуль. Так и заказчику спокойнее, и я быстрее понимаю проект.' },
  { q: 'Работаете только с новыми проектами?', a: 'Нет. Часто прихожу к старым самописным сайтам, где нужно разобраться в текущем коде, найти причину ошибки и аккуратно починить — без переписывания всего.' },
  { q: 'Что нужно для старта?', a: 'Краткое описание задачи, ссылка на сайт, доступы (при необходимости — FTP/панель/SSH), ожидание по срочности. Если есть скриншоты или текст ошибки — ещё лучше.' },
  { q: 'Как происходит оплата?', a: 'Можно напрямую — по реквизитам или на карту, акт по запросу. Можно через безопасную сделку на фриланс-площадке — комфортнее, если работаем впервые.' },
  { q: 'Даёте ли гарантии на работу?', a: 'На точечную задачу — да: если в течение 14 дней что-то сломалось из того, что я делал, чиню бесплатно. На SEO-позиции в выдаче гарантий не даю — это нечестно.' },
  { q: 'Подписываете NDA?', a: 'Да, без проблем. Чаще всего это и не нужно — но если у вас принято, подпишу до получения доступов.' },
];

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section>
      <div className="container">
        <Reveal as="div" className="section-label">// частые вопросы</Reveal>
        <Reveal as="h2" className="section-title" delay={60}>
          FAQ <em>·</em> что обычно спрашивают
        </Reveal>

        <Reveal className="faq-list" delay={120}>
          {FAQ.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="qmark">[{String(i + 1).padStart(2, '0')}]</span>
                <span style={{ flex: 1 }}>{f.q}</span>
                <span className="chev">›</span>
              </button>
              <div className="faq-a"><div><p>{f.a}</p></div></div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

window.Cases = Cases;
window.Process = Process;
window.Prices = Prices;
window.Limits = Limits;
window.FaqSection = FaqSection;