/* Internal pages — Services, Cases, Prices, Contact, About, Platforms */

function PageHead({ crumbs, title, lead }) {
  return (
    <header className="page-head">
      <div className="container">
        <div className="crumbs">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span>/</span>}
              {c.href ? <a href="#" onClick={c.onClick}>{c.label}</a> : c.label}
            </React.Fragment>
          ))}
        </div>
        <h1 className="page-title">{title}</h1>
        {lead && <p className="page-lead">{lead}</p>}
      </div>
    </header>
  );
}

/* ========== Services page ========== */
function ServicesPage({ setRoute }) {
  const backendServices = window.__PUBLIC_DATA__?.services;
  const detailed = backendServices?.length ? backendServices.map((service) => ({
    id: service.slug,
    cmd: service.slug,
    title: service.title,
    price: service.price,
    body: service.description || service.short,
    tags: [...(service.includes || []), ...(service.audience || [])].slice(0, 6),
    href: service.href || `/services/${service.slug}/`,
  })) : [
    { id: 'schema-org-fix', cmd: 'schema-org-fix', title: 'Микроразметка schema.org', price: 'от 2 500 ₽', body: 'Поисковики читают сайт лучше, если на нём есть валидная JSON-LD-разметка. Делаю Article, Product, Organization, Person, BreadcrumbList, WebSite, FAQPage и другие типы — под структуру вашего сайта. Прохожу валидатор Google и Яндекса, остаются комментарии в коде.', tags: ['Article', 'Product', 'Organization', 'Breadcrumb', 'FAQPage', 'WebSite'] },
    { id: 'seo-audit', cmd: 'seo-audit', title: 'Технический SEO-аудит', price: 'от 2 000 ₽', body: 'Проверка robots.txt, sitemap.xml, canonical, редиректов, дублей, скорости, серверных ошибок, мета-тегов и микроразметки. На выходе — отчёт с приоритетами: что починить в первую очередь, что во вторую, а что вообще не трогать.', tags: ['robots.txt', 'sitemap', 'canonical', 'redirects', 'duplicates', 'meta'] },
    { id: 'php-mysql-fixes', cmd: 'php-mysql-fix', title: 'Доработка PHP/MySQL', price: 'от 3 000 ₽', body: 'Самописные сайты на десять лет, формы, отправки писем, кривые SQL-запросы, админки, импорты, оптимизация запросов. Прихожу в чужой код, разбираюсь, чиню — без переписывания.', tags: ['PHP 7/8', 'MySQL', 'PHPMailer', 'PDO', 'CSRF', 'sessions'] },
    { id: 'vps-deploy', cmd: 'vps-deploy', title: 'VPS · Docker · Nginx · SSL', price: 'от 4 000 ₽', body: 'Развёртывание сайта или приложения на VPS: домен, HTTPS через Let’s Encrypt, reverse proxy на Nginx, docker-compose, базовые бэкапы. Передаю инструкцию, как обновлять и что мониторить.', tags: ['Ubuntu', 'Docker', 'Nginx', 'SSL', 'systemd', 'cron'] },
    { id: 'api-integrations', cmd: 'api-integrate', title: 'API-интеграции', price: 'от 15 000 ₽', body: 'Связываю сайт с внешними системами: CRM (amoCRM, Bitrix24), мессенджеры (Telegram, Max), почта, выгрузки прайсов поставщиков, импорты в каталог. На FastAPI или PHP — что удобнее под проект.', tags: ['amoCRM', 'Bitrix24', 'Telegram', 'webhooks', 'XML', 'JSON'] },
    { id: 'ready-sites', cmd: 'ready-site', title: 'Готовые сайты и шаблоны', price: 'от 19 990 ₽', body: 'Сайты услуг, статейники, каталоги и лендинги с админкой. Установка на VPS, SEO-разметка, формы, аналитика. Дальше — либо передаю под управление, либо поддерживаю точечно.', tags: ['landing', 'каталог', 'статейник', 'admin', 'CMS', 'install'] },
  ];

  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'services' },
        ]}
        title="Услуги"
        lead="Шесть ключевых направлений. Можно заказать одну точечную задачу или взять услугу пакетом — как удобнее. Финальную стоимость называю до старта."
      />
      <section style={{ paddingTop: 48 }}>
        <div className="container">
          <div style={{ display: 'grid', gap: 16 }}>
            {detailed.map((s, i) => (
              <Reveal key={s.id} delay={i * 50}
                className="case-card"
                style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 32, alignItems: 'start', padding: 32 }}
              >
                <div>
                  <div className="cmd" style={{ color: 'var(--wine)', fontSize: 12, marginBottom: 12 }}>$ {s.cmd}</div>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 28, lineHeight: 1.15, marginBottom: 12 }}>{s.title}</h3>
                  <div style={{ color: 'var(--ink-2)', fontSize: 14 }}>{s.price}</div>
                </div>
                <div>
                  <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.65, marginBottom: 20 }}>{s.body}</p>
                  <div className="tag-row">
                    {s.tags.map(t => <span key={t} className="tag-pill" style={{ cursor: 'default' }}>{t}</span>)}
                  </div>
                  <div style={{ marginTop: 20, display: 'flex', gap: 12 }}>
                    <a href="#" onClick={(e) => { e.preventDefault(); setRoute('contact'); window.scrollTo(0,0); }} className="btn btn-primary">Заказать <span className="btn-arrow">→</span></a>
                    <a href={s.href || '#'} className="btn btn-ghost">Подробнее</a>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* ========== Cases page ========== */
function CasesPage({ setRoute }) {
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'cases' },
        ]}
        title="Кейсы и примеры задач"
        lead="Это не «портфолио сайтов». Это шесть типовых ситуаций, в которых ко мне приходят, и итог по каждой — что было, что стало."
      />
      <Cases />
    </>
  );
}

/* ========== Articles ========== */
function articleItems() {
  return window.__PUBLIC_DATA__?.articles || [];
}

function ArticleCard({ article, index = 0 }) {
  return (
    <Reveal as="a" href={article.href} delay={(index % 3) * 70} className="article-card">
      {article.cover_image && (
        <div className="article-card-media">
          <img src={article.cover_image} alt="" loading="lazy" />
        </div>
      )}
      <div className="article-card-body">
        <div className="article-meta">
          <span>{article.published_label || 'статья'}</span>
          <span>{article.reading_time}</span>
        </div>
        <h3>{article.title}</h3>
        <p>{article.summary}</p>
        <div className="article-tags">
          {(article.tags || []).slice(0, 4).map((tag) => <span key={tag}>#{tag}</span>)}
        </div>
      </div>
    </Reveal>
  );
}

function ArticlesPreview({ setRoute }) {
  const items = articleItems().slice(0, 3);
  if (!items.length) return null;
  return (
    <section className="articles-preview">
      <div className="container">
        <div className="articles-head">
          <div>
            <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}>
              Разборы по техническому SEO, schema.org, PHP/Python, серверам и поддержке сайтов.
            </Reveal>
          </div>
          <Reveal delay={140}>
            <a href="#" onClick={(e) => { e.preventDefault(); setRoute('articles'); window.scrollTo(0,0); }} className="btn btn-ghost">Все статьи</a>
          </Reveal>
        </div>
        <div className="article-grid">
          {items.map((article, i) => <ArticleCard key={article.slug} article={article} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function ArticlesPage({ setRoute }) {
  const items = articleItems();
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'articles' },
        ]}
        title="Статьи"
        lead="Практические публикации по техническому SEO, schema.org, PHP, Python, VPS, Docker и поддержке сайтов. Каждая статья формирует структурированные данные schema.org."
      />
      <section className="articles-list-section">
        <div className="container">
          {items.length > 0 ? (
            <div className="article-grid">
              {items.map((article, i) => <ArticleCard key={article.slug} article={article} index={i} />)}
            </div>
          ) : (
            <div className="article-empty">
              <h2>Статей пока нет</h2>
              {/* <p>Раздел уже готов: публикации появятся после добавления через админку.</p> */}
            </div>
          )}
        </div>
      </section>
    </>
  );
}

function ArticleDetailPage({ setRoute }) {
  const article = window.__PUBLIC_DATA__?.current_article;
  if (!article) return <ArticlesPage setRoute={setRoute} />;
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'articles', href: true, onClick: (e) => { e.preventDefault(); setRoute('articles'); window.scrollTo(0,0); } },
          { label: article.slug },
        ]}
        title={article.title}
        lead={article.summary}
      />
      <section className="article-detail-section">
        <div className="container article-detail-grid">
          <Reveal className="terminal article-terminal">
            <div className="terminal-head">
              <div className="dots"><span /><span /><span /></div>
              <div className="title">~/articles/{article.slug}</div>
            </div>
            <div className="terminal-body">
              <div className="term-line in"><span className="prompt">$</span><span>schema --type Article</span></div>
              <div className="term-line ok">schema.org: Article</div>
              <div className="term-line out">reading_time: {article.reading_time}</div>
              <div className="term-line out">published: {article.published_label || '—'}</div>
              {article.service && <div className="term-line out">service: {article.service.title}</div>}
              <div className="term-line muted">// JSON-LD вставлен в head страницы</div>
              <div className="term-line in"><span className="prompt">$</span><span className="term-cursor" /></div>
            </div>
          </Reveal>

          <Reveal delay={120} className="article-detail">
            {article.cover_image && (
              <img className="article-cover" src={article.cover_image} alt="" loading="eager" />
            )}
            <div className="article-detail-meta">
              <span>{article.published_label || 'статья'}</span>
              <span>{article.reading_time}</span>
              {article.service && <a href={article.service.href}>{article.service.title}</a>}
            </div>
            <div className="article-tags">
              {(article.tags || []).map((tag) => <span key={tag}>#{tag}</span>)}
            </div>
            <article className="article-body entity-markdown" dangerouslySetInnerHTML={{ __html: article.body_html || '' }} />
            <div className="entity-actions">
              <a href="/articles/" className="btn btn-ghost">Все статьи</a>
              {article.service && <a href={article.service.href} className="btn btn-primary">Связанная услуга <span className="btn-arrow">→</span></a>}
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

/* ========== Prices page ========== */
function PricesPage({ setRoute }) {
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'prices' },
        ]}
        title="Цены"
        lead="Здесь — стартовые ориентиры. Цена «от» означает, что задача укладывается в небольшой объём. Если объём больше — называю конкретную сумму до старта."
      />
      <Prices setRoute={setRoute} />
      <Limits />
    </>
  );
}

/* ========== About page ========== */
function AboutPage({ setRoute }) {
  const contact = getPublicContact();
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'about' },
        ]}
        title="Кто выполняет работу"
        // lead={`Меня зовут ${contact.specialist_name || ''}. Я — ${contact.specialist_title || ''}. Занимаюсь техническими задачами для сайтов: PHP/MySQL, Python, Docker, VPS, Nginx, SEO-структура, микроразметка, формы и API.`}
        lead={`Я — ${contact.specialist_title || ''}. Занимаюсь техническими задачами для сайтов: PHP/MySQL, Python, Docker, VPS, Nginx, SEO-структура, микроразметка, формы и API.`}
      />
      <section style={{ paddingTop: 48 }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 48, alignItems: 'start' }}>
          <Reveal>
            <div className="terminal" style={{ position: 'sticky', top: 80 }}>
              <div className="terminal-head">
                <div className="dots"><span /><span /><span /></div>
                <div className="title">whoami</div>
              </div>
              <div className="terminal-body">
                {/* <div className="term-line in"><span className="prompt">$</span><span>whoami</span></div>
                <div className="term-line out">{contact.specialist_name || ''}</div> */}
                <div className="term-line in"><span className="prompt">$</span><span>cat ~/about.txt</span></div>
                <div className="term-line out">role: {contact.specialist_title || ''}</div>
                <div className="term-line out">years: 5+</div>
                <div className="term-line out">stack: PHP, Python, Docker, Nginx, MySQL</div>
                <div className="term-line out">focus: технические задачи для сайтов</div>
                <div className="term-line out">format: напрямую · фриланс-площадки</div>
                <div className="term-line muted">// не маркетолог, не агентство</div>
                <div className="term-line in"><span className="prompt">$</span><span className="term-cursor" /></div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'grid', gap: 24, fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)' }}>
              <p>Работаю не как «маркетолог по SEO», а как разработчик: смотрю код, сервер, базу данных, шаблоны, редиректы, индексацию и реальные причины ошибок. Если форма ломается — лезу в PHP, а не пишу «попробуйте перезагрузить страницу».</p>
              <p>Часто прихожу к старым самописным сайтам — там, где у владельца «лет десять как никто не лазил». Разбираюсь в чужом коде, аккуратно чиню, оставляю комментарии. Без переписывания всего.</p>
              <p style={{ color: 'var(--ink) '}}>Принцип простой: <strong style={{ color: 'var(--wine)' }}>понятная задача → понятная цена → понятный результат</strong>. Если объём растёт по ходу работы — заранее говорю, что это уже отдельная задача.</p>
              <div className="approach-grid" style={{ marginTop: 16 }}>
                {[
                  { idx: '01', t: 'PHP/MySQL и старые сайты', d: 'Формы, админки, отправка писем, оптимизация запросов, миграции версий PHP.' },
                  { idx: '02', t: 'Python и backend', d: 'FastAPI, скрипты-парсеры, выгрузки прайсов, обработка заявок и Telegram-боты.' },
                  { idx: '03', t: 'Docker · VPS · Nginx', d: 'Запуск проектов на сервере, HTTPS, обновления и базовые бэкапы.' },
                ].map((it) => (
                  <div key={it.idx} className="approach-card" style={{ background: 'var(--bg)' }}>
                    <div className="idx">/* {it.idx} */</div>
                    <h3>{it.t}</h3>
                    <p>{it.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

/* ========== Platforms page ========== */
function PlatformsPage({ setRoute }) {
  const platforms = (window.__PUBLIC_DATA__?.platforms || []).map((platform) => ({
    name: platform.name,
    tag: platform.description,
    state: platform.state || (platform.is_available ? 'активно' : 'на паузе'),
    count: platform.count_label || '',
    url: platform.url,
    isAvailable: platform.is_available,
    buttonLabel: platform.button_label,
  }));
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'platforms' },
        ]}
        title="Где можно заказать"
        lead="Если вам комфортнее работать через безопасную сделку — заказ можно оформить на фриланс-площадке. Если проще напрямую — оставляйте заявку через сайт."
      />
      <section style={{ paddingTop: 48 }}>
        <div className="container">
          <div className="price-table">
            {platforms.map((p, i) => {
              const isExternal = p.url && /^https?:\/\//.test(p.url);
              const RowTag = p.isAvailable ? 'a' : 'div';
              return (
              <Reveal
                key={p.name}
                as={RowTag}
                href={p.isAvailable ? p.url : undefined}
                target={isExternal ? '_blank' : undefined}
                rel={isExternal ? 'noopener noreferrer' : undefined}
                delay={i * 50}
                className={`price-row platform-row ${p.isAvailable ? 'is-active' : 'is-paused'}`}
                style={{ gridTemplateColumns: '180px 1fr auto auto' }}
              >
                <div className="name">{p.name}</div>
                <div className="desc">{p.tag}</div>
                <div style={{ fontSize: 12, color: p.state === 'активно' ? 'var(--term-green)' : 'var(--term-yellow)' }}>● {p.state}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{p.count}</div>
              </Reveal>
            )})}
          </div>

          <div style={{ marginTop: 32, padding: 28, border: '1px dashed var(--line)', borderRadius: 6, background: 'var(--bg-1)' }}>
            <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginBottom: 10 }}>Что значит «безопасная сделка»?</h3>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.7, maxWidth: '70ch' }}>
              Деньги вы кладёте на счёт площадки, а не мне напрямую. Я делаю работу, вы её принимаете — и тогда площадка переводит оплату. Если что-то не так — у вас всегда есть возможность открыть спор. Особенно удобно, если работаем впервые.
            </p>
          </div>
        </div>
      </section>
    </>
  );
}

/* ========== Contact page ========== */
function ContactPage({ setRoute }) {
  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'contact' },
        ]}
        title="Опишите задачу"
        lead="Я отвечу обычно в течение пары часов. Чем подробнее опишете симптом — тем точнее назову оценку."
      />
      <Contact setRoute={setRoute} />
    </>
  );
}

function ServiceDetailPage({ setRoute }) {
  const [openFaq, setOpenFaq] = React.useState(0);
  const data = window.__PUBLIC_DATA__ || {};
  const service = data.current_service;
  if (!service) return <ServicesPage setRoute={setRoute} />;

  const related = service.related_cases || [];

  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'services', href: true, onClick: (e) => { e.preventDefault(); setRoute('services'); window.scrollTo(0,0); } },
          { label: service.slug },
        ]}
        title={service.title}
        lead={service.short}
      />

      <section className="entity-detail">
        <div className="container entity-grid">
          <Reveal className="terminal entity-terminal">
            <div className="terminal-head">
              <div className="dots"><span /><span /><span /></div>
              <div className="title">~/services/{service.slug}</div>
              <div className="tabs"><span className="on">service</span></div>
            </div>
            <div className="terminal-body">
              <div className="term-line in"><span className="prompt">$</span><span>winetlab service --show {service.slug}</span></div>
              <div className="term-line out">name: {service.title}</div>
              <div className="term-line out">price: {service.price}</div>
              <div className="term-line out">timeline: {service.timeline || 'по оценке'}</div>
              <div className="term-line ok">related_cases: {related.length}</div>
              {/* <div className="term-line muted">// данные берутся из текущей админки</div> */}
              <div className="term-line in"><span className="prompt">$</span><span className="term-cursor" /></div>
            </div>
          </Reveal>

          <Reveal delay={100} className="entity-body">
            <div className="section-label">// услуга</div>
            <h2 className="section-title" style={{ fontSize: 44 }}>Что входит <em>в работу</em></h2>
            <div className="entity-markdown" dangerouslySetInnerHTML={{ __html: service.description_html || service.description || '' }} />

            <div className="entity-columns">
              <div>
                <h3>Входит</h3>
                <ul className="limits-list yes">
                  {(service.includes || []).map((item, i) => <li key={i}><span className="mark">+</span><span>{item}</span></li>)}
                </ul>
              </div>
              <div>
                <h3>Подходит для</h3>
                <ul className="limits-list">
                  {(service.audience || []).map((item, i) => <li key={i}><span className="mark">→</span><span>{item}</span></li>)}
                </ul>
              </div>
            </div>

            <div className="entity-result">
              <div className="section-label">// результат</div>
              <div className="entity-markdown" dangerouslySetInnerHTML={{ __html: service.result_html || service.result || '' }} />
            </div>

            <div className="entity-actions">
              <Magnetic>
                <a href="#" onClick={(e) => { e.preventDefault(); setRoute('contact'); window.scrollTo(0,0); }} className="btn btn-primary">
                  Заказать услугу <span className="btn-arrow">→</span>
                </a>
              </Magnetic>
              <a href="/cases/" className="btn btn-ghost">Все кейсы</a>
            </div>
          </Reveal>
        </div>
      </section>

      {related.length > 0 && (
        <section className="case-section dark">
          <div className="container">
            <div className="section-label">// связанные кейсы</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>Где это <em>уже применялось</em></h2>
            <div className="cases-grid">
              {related.map((item, i) => (
                <Reveal key={item.slug} as="a" href={item.href} delay={i * 70} className="case-card">
                  <div className="case-meta">
                    <span className="cat">{item.category}</span>
                    <span className="time">{item.timeline}</span>
                  </div>
                  <h3>{item.title}</h3>
                  <div className="case-rows">
                    <div className="case-row problem"><span className="label">FROM</span><p>{plainText(item.problem_html, item.problem)}</p></div>
                    <div className="case-row result"><span className="label">TO</span><p>{plainText(item.result_html, item.result)}</p></div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {typeof ReviewsPanel !== 'undefined' && <ReviewsPanel serviceSlug={service.slug} serviceTitle={service.title} />}

      {service.faq?.length > 0 && (
        <section>
          <div className="container">
            <div className="section-label">// faq</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>Вопросы <em>по услуге</em></h2>
            <div className="faq-list">
              {service.faq.map((item, i) => (
                <div key={i} className={`faq-item ${openFaq === i ? 'open' : ''}`}>
                  <button
                    className="faq-q"
                    type="button"
                    aria-expanded={openFaq === i}
                    onClick={() => setOpenFaq((current) => current === i ? -1 : i)}
                  >
                    <span className="qmark">[{String(i + 1).padStart(2, '0')}]</span>
                    <span style={{ flex: 1 }}>{item.question}</span>
                    <span className="chev">›</span>
                  </button>
                  <div className="faq-a"><div><p>{item.answer}</p></div></div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </>
  );
}

function CaseDetailDynamicPage({ setRoute }) {
  const data = window.__PUBLIC_DATA__ || {};
  const item = data.current_case;
  if (!item) return <CasesPage setRoute={setRoute} />;
  const service = item.service;
  const related = (data.cases || []).filter((c) => c.slug !== item.slug && c.service_slug && c.service_slug === item.service_slug).slice(0, 3);

  return (
    <>
      <PageHead
        crumbs={[
          { label: 'home', href: true, onClick: (e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0,0); } },
          { label: 'cases', href: true, onClick: (e) => { e.preventDefault(); setRoute('cases'); window.scrollTo(0,0); } },
          { label: item.slug },
        ]}
        title={item.title}
        lead={plainText(item.result_html, item.result) || plainText(item.problem_html, item.problem)}
      />

      <section className="entity-detail">
        <div className="container">
          <div className="case-hero-grid dynamic-case-hero">
            <Reveal>
              <div className="case-hero-meta">
                <span className="case-tag">{item.category}</span>
                <span className="case-time">{item.timeline}</span>
                {service && <a className="case-tag muted" href={service.href}>{service.title}</a>}
              </div>
              <h2 className="case-hero-title">{item.title}</h2>
              <div className="case-hero-stats">
                <div className="case-stat"><div className="case-stat-v">{item.price_from || 'по оценке'}</div><div className="case-stat-l">стоимость<br />проекта</div></div>
                <div className="case-stat"><div className="case-stat-v">{item.timeline || '—'}</div><div className="case-stat-l">срок<br />работы</div></div>
                <div className="case-stat"><div className="case-stat-v">{(item.stack || []).length}</div><div className="case-stat-l">технологий<br />в стеке</div></div>
              </div>
            </Reveal>

            <Reveal delay={100} className="terminal">
              <div className="terminal-head">
                <div className="dots"><span /><span /><span /></div>
                <div className="title">~/cases/{item.slug}</div>
              </div>
              <div className="terminal-body">
                <div className="term-line in"><span className="prompt">$</span><span>cat case.json</span></div>
                <div className="term-line out">category: {item.category}</div>
                <div className="term-line out">service: {service?.title || 'без привязки'}</div>
                <div className="term-line out">stack: {(item.stack || []).join(' · ') || '—'}</div>
                {/* <div className="term-line ok">status: опубликован из админки</div> */}
                <div className="term-line in"><span className="prompt">$</span><span className="term-cursor" /></div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="case-section">
        <div className="container case-two-col">
          <div className="case-col-label">
            <div className="section-label">// from</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>С чем <em>пришли</em></h2>
          </div>
          <div className="case-col-body entity-markdown" dangerouslySetInnerHTML={{ __html: item.problem_html || item.problem || '' }} />
        </div>
      </section>

      <section className="case-section dark">
        <div className="container case-two-col">
          <div className="case-col-label">
            <div className="section-label">// work</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>Что <em>сделано</em></h2>
          </div>
          <div className="case-col-body entity-markdown" dangerouslySetInnerHTML={{ __html: item.done_html || item.done || '' }} />
        </div>
      </section>

      <section className="case-section">
        <div className="container case-two-col">
          <div className="case-col-label">
            <div className="section-label">// result</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>Что <em>изменилось</em></h2>
          </div>
          <div className="case-col-body">
            <div className="entity-markdown" dangerouslySetInnerHTML={{ __html: item.result_html || item.result || '' }} />
            <div className="tag-row" style={{ marginTop: 24 }}>
              {(item.stack || []).map((tag) => <span key={tag} className="tag-pill" style={{ cursor: 'default' }}>{tag}</span>)}
            </div>
            <div className="entity-actions">
              {service && <a href={service.href} className="btn btn-primary">Связанная услуга <span className="btn-arrow">→</span></a>}
              <a href="/contact/" className="btn btn-ghost">Обсудить похожую задачу</a>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="case-section dark">
          <div className="container">
            <div className="section-label">// ещё по этой услуге</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>Похожие <em>кейсы</em></h2>
            <div className="case-related-grid">
              {related.map((entry) => (
                <a key={entry.slug} href={entry.href} className="case-related-card">
                  <div className="case-related-tag">{entry.category}</div>
                  <h4>{entry.title}</h4>
                  <div className="case-related-price">{entry.price_from || entry.timeline} <span>→</span></div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}
    </>
  );
}

Object.assign(window, { ServicesPage, ServiceDetailPage, CasesPage, CaseDetailDynamicPage, ArticlesPreview, ArticlesPage, ArticleDetailPage, PricesPage, AboutPage, PlatformsPage, ContactPage });