/* eslint-disable */
// Главная.

const HeroTypo = () => (
  <div style={{ position: "relative", padding: "80px 0 48px" }}>
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
      <CircuitBackdrop opacity={0.4} />
    </div>
    <div style={{ position: "relative" }}>
      <div style={{ display: "flex", gap: 12, marginBottom: 28, alignItems: "center" }}>
        <span className="badge badge-red badge-dot">аккредитация Минцифры № 75271</span>
        <span className="badge">Омск · с 2023 года</span>
      </div>
      <h1 className="t-d1" style={{ margin: 0, maxWidth: "16ch" }}>
        Внешнее ИТ-подразделение для среднего и крупного бизнеса.
      </h1>
      <p className="t-body-lg muted" style={{ marginTop: 28, maxWidth: "60ch" }}>
        Не студия, не агентство, не команда фрилансеров. Покупаете ИТ-функцию целиком —
        вместо того, чтобы строить собственный отдел: инфраструктура, DevOps, 1С, веб, ML, видеоаналитика, ИБ.
      </p>
      <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
        <a href="#/contacts" className="btn btn-primary">Обсудить задачу <span className="arrow">→</span></a>
        <a href="#/approach" className="btn btn-ghost">Посмотреть подход</a>
      </div>
    </div>
  </div>
);

const ServicesGrid = ({ compact }) => {
  const items = [
    {
      id: "infra", title: "Поддержка ИТ-инфраструктуры",
      lead: "DevOps, мониторинг, ИБ, on-prem и облако.",
      stack: ["Linux", "Kubernetes", "Ansible", "Prometheus", "GitLab CI"],
      price: "от 90 000 ₽/мес"
    },
    {
      id: "1c", title: "1С",
      lead: "Разработка, сопровождение, интеграции с внешними системами.",
      stack: ["1С:Предприятие 8.3", "УТ", "ERP", "ЗУП", "EDI"],
      price: "от 60 000 ₽/мес"
    },
    {
      id: "web", title: "Веб-разработка",
      lead: "Внутренние продукты, личные кабинеты, B2B-порталы.",
      stack: ["TypeScript", "Next.js", "FastAPI", "PostgreSQL"],
      price: "от 2 800 ₽/час"
    },
    {
      id: "ai", title: "ИИ / Python / видеоаналитика",
      lead: "ML-пайплайны, LLM-агенты, компьютерное зрение в офлайне.",
      stack: ["Python", "PyTorch", "OpenCV", "Triton", "Airflow"],
      price: "от 3 200 ₽/час"
    }
  ];
  return (
    <div className="grid-2" style={{ gap: 16 }}>
      {items.map((it) => (
        <a key={it.id} href={`#/services#${it.id}`} className="card" style={{
          padding: 28, position: "relative", color: "var(--ink)", textDecoration: "none",
          display: "flex", flexDirection: "column", gap: 14, transition: "transform 0.15s, border-color 0.15s",
          minHeight: compact ? 0 : 220
        }}
        onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--red-line)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; }}>
          <CornerTrace corner="tl" />
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
            <h3 className="t-h2" style={{ margin: 0 }}>{it.title}</h3>
            <span className="t-mono dim" style={{ whiteSpace: "nowrap" }}>{it.price}</span>
          </div>
          <p className="muted" style={{ margin: 0, maxWidth: "44ch" }}>{it.lead}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: "auto", paddingTop: 8 }}>
            {it.stack.map((s) => <span key={s} className="chip">{s}</span>)}
          </div>
          <div className="t-small" style={{ color: "var(--steel)", marginTop: 4 }}>Подробнее →</div>
        </a>
      ))}
    </div>
  );
};

const ProcessSteps = () => {
  const steps = [
    { n: "01", t: "SLA в договоре", d: "Время реакции и устранения зафиксировано. Без «как сможем»." },
    { n: "02", t: "Тикетная система", d: "Битрикс24. Одна точка для заявок, журнал действий, история." },
    { n: "03", t: "Ежемесячный отчёт", d: "Закрытые задачи, потраченные часы, что планируем дальше." },
    { n: "04", t: "Тихий режим", d: "В пиковые периоды клиента — никаких изменений в продакшене." },
    { n: "05", t: "Передача прав", d: "Исключительные права на результат — у вас. Прописано в договоре." }
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }} className="process-grid">
      {steps.map((s, i) => (
        <div key={s.n} style={{ padding: 24, borderLeft: i ? "1px solid var(--line)" : "none", background: "var(--surface)" }}>
          <div className="t-mono" style={{ color: "var(--red)" }}>{s.n}</div>
          <h3 className="t-h3" style={{ margin: "10px 0 8px" }}>{s.t}</h3>
          <p className="t-small muted" style={{ margin: 0 }}>{s.d}</p>
        </div>
      ))}
      <style>{`
        @media (max-width: 1100px) { .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .process-grid > div:nth-child(n) { border-top: 1px solid var(--line); }
          .process-grid > div:nth-child(2n+1) { border-left: none !important; }
        }
        @media (max-width: 540px) { .process-grid { grid-template-columns: 1fr !important; }
          .process-grid > div { border-left: none !important; border-top: 1px solid var(--line); }
        }
      `}</style>
    </div>
  );
};


const ProductsRow = () => {
  const items = [
    { id: "badges", title: "Аудиобейджи", lead: "Запись разговоров продавец–покупатель, разметка, метрики качества обслуживания и обучения.", tag: "В Реестре: планируется" },
    { id: "video", title: "Видеоаналитика конверсии", lead: "CV-аналитика по видео в розничной точке: трафик, зоны интереса, конверсия.", tag: "В Реестре: планируется" }
  ];
  return (
    <div className="grid-2">
      {items.map((p) => (
        <a key={p.id} href={`#/product/${p.id}`} className="card" style={{
          padding: 28, color: "var(--ink)", textDecoration: "none", display: "flex", flexDirection: "column", gap: 14
        }}>
          <div className="t-eyebrow" style={{ color: "var(--red)" }}>Продукт</div>
          <h3 className="t-h2" style={{ margin: 0 }}>{p.title}</h3>
          <p className="muted" style={{ margin: 0 }}>{p.lead}</p>
          <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 8 }}>
            <span className="badge">{p.tag}</span>
            <span className="t-small" style={{ color: "var(--steel)" }}>Открыть →</span>
          </div>
        </a>
      ))}
    </div>
  );
};


const ContactStrip = () => (
  <div className="card contact-strip" style={{ padding: 36, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32, alignItems: "center" }}>
    <div>
      <h3 className="t-h1" style={{ margin: 0 }}>Опишите задачу — пришлём расчёт за 1–2 дня.</h3>
      <p className="muted" style={{ marginTop: 14, maxWidth: "52ch" }}>
        Без «давайте созвонимся, обсудим». Сначала пишете суть, мы возвращаемся со сметой,
        стеком и сроками. Если задача не наша — скажем сразу.
      </p>
    </div>
    <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
      <div className="t-mono"><span className="dim">тел: </span>+7 (913) 600-02-15</div>
      <div className="t-mono"><span className="dim">email: </span>contact@wildmarx.ru</div>
      <div className="t-mono"><span className="dim">tg: </span><a href={(window.WM_CONFIG || {}).tg_bot_url || "https://t.me/wildmarks_support_bot"} target="_blank" rel="noreferrer" style={{ color: "var(--ink)" }}>@wildmarks_support_bot</a></div>
      <div style={{ marginTop: 12, display: "flex", gap: 10, flexWrap: "wrap" }}>
        <a href="#/contacts" className="btn btn-primary">Открыть форму</a>
        <a href="#/services" className="btn btn-ghost">Прайс по услугам</a>
      </div>
    </div>
    <style>{`@media (max-width: 920px) { .contact-strip { grid-template-columns: 1fr !important; padding: 24px !important; gap: 24px !important; } }`}</style>
  </div>
);

const HomePage = () => {
  return (
    <main className="page" data-screen-label="Home">
      <div className="shell">
        <HeroTypo />
      </div>


      <section className="section shell">
        <SectionNode label="что мы закрываем" />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, margin: "16px 0 28px" }}>
          <h2 className="t-h1" style={{ margin: 0, maxWidth: "20ch" }}>4 направления под одной крышей</h2>
          <a href="#/services" className="btn btn-link">Все услуги и тарифы →</a>
        </div>
        <ServicesGrid />
      </section>

      <section className="section shell">
        <SectionNode label="как мы работаем" />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, margin: "16px 0 28px" }}>
          <h2 className="t-h1" style={{ margin: 0, maxWidth: "20ch" }}>Регламенты, не обещания</h2>
          <a href="#/approach" className="btn btn-link">Подход целиком →</a>
        </div>
        <ProcessSteps />
      </section>

      <section className="section shell">
        <SectionNode label="продукты" />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, margin: "16px 0 28px" }}>
          <h2 className="t-h1" style={{ margin: 0, maxWidth: "20ch" }}>Собственные ИТ-продукты</h2>
          <a href="#/products" className="btn btn-link">Все продукты →</a>
        </div>
        <ProductsRow />
      </section>


      <section className="section shell">
        <ContactStrip />
      </section>
    </main>
  );
};

Object.assign(window, { HomePage, ServicesGrid, ProcessSteps, ProductsRow, ContactStrip });