/* === SERVICES — index (/services) + detail (/services/:slug) === */

const { useState: svState, useEffect: svEffect, useMemo: svMemo } = React;

/* ----------------- INDEX ----------------- */

function ServicesIndex() {
  const titleRef = window.useReveal("reveal");
  const services = window.SITE_DATA.services;
  return (
    <>
      {/* Header */}
      <section style={{
        padding: "120px 32px 80px",
        background: "#f8f7f4",
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={520} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ top: "-15%", right: "-8%" }} opacity={0.12} />
        <window.FloatingShape kind="diamond" size={70} color="#0a6ef5" style={{ top: "30%", right: "8%", opacity: 0.15 }} speed={20} />
        <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} />

        <div ref={titleRef} style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
          <window.Breadcrumb items={[{ to: "/", label: "Главная" }, { label: "Услуги" }]} />
          <window.SectionTag>Услуги</window.SectionTag>
          <h1 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(44px, 5.6vw, 100px)",
            fontWeight: 800,
            color: "#0d0d0d",
            letterSpacing: "-0.035em",
            lineHeight: 0.98,
            marginTop: 24,
            marginBottom: 28,
            maxWidth: 1320,
          }}>
            Пять направлений<br />
            <span className="text-gradient-blue">premium-технологий</span>
          </h1>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: "clamp(16px, 1.25vw, 19px)",
            lineHeight: 1.7,
            color: "#3a3a3a",
            maxWidth: 680,
          }}>
            От AI-ассистентов и автоматизации до полных enterprise-интеграций
            и smart-living-сред — каждое направление с собственной экспертизой
            и собственными референс-проектами.
          </p>
        </div>
      </section>

      {/* Services list — alternating large rows */}
      <section style={{ padding: "40px 32px 80px", background: "#f8f7f4", position: "relative" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto", display: "flex", flexDirection: "column", gap: 56 }}>
          {services.map((s, i) => <ServiceRow key={s.slug} service={s} index={i} />)}
        </div>
      </section>

      {/* CTA */}
      <ServicesCTA />
    </>
  );
}

function ServiceRow({ service, index }) {
  const ref = window.useReveal(index % 2 === 0 ? "reveal-left" : "reveal-right");
  const Ic = window.I[service.icon];
  const reversed = index % 2 !== 0;
  return (
    <div ref={ref}>
      <window.Link to={`/services/${service.slug}`}>
        <window.Tilt max={3} scale={1.005}>
          <div
            className="card-hover service-row"
            style={{
              background: "#ffffff",
              borderRadius: 28,
              border: "1px solid rgba(0,0,0,0.06)",
              padding: 0,
              overflow: "hidden",
              display: "grid",
              gridTemplateColumns: reversed ? "1fr 1.2fr" : "1.2fr 1fr",
              gap: 0,
              cursor: "pointer",
              transition: "box-shadow 0.5s ease, transform 0.5s ease",
            }}
            onMouseEnter={(e) => e.currentTarget.style.boxShadow = `0 30px 80px ${service.accent}20`}
            onMouseLeave={(e) => e.currentTarget.style.boxShadow = "0 4px 24px rgba(0,0,0,0.04)"}
          >
            {/* Content side */}
            <div style={{
              padding: "48px 52px",
              order: reversed ? 2 : 1,
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}>
              <div style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 11, fontWeight: 700,
                letterSpacing: "0.12em", textTransform: "uppercase",
                color: service.accent,
                marginBottom: 18,
              }}>
                {String(index + 1).padStart(2, "0")} · {window.tx(service.subtitle)}
              </div>
              <h3 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(28px, 3.4vw, 44px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.025em",
                lineHeight: 1.05,
                marginBottom: 20,
              }}>
                <span className="title-anim">{window.tx(service.title)}</span>
              </h3>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 15, lineHeight: 1.7, color: "#3a3a3a",
                marginBottom: 24,
              }}>
                {window.tx(service.longDesc)}
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 28 }}>
                {service.tags.map((t, ti) => <window.Tag key={(typeof t === "string" ? t : (t.ru || t.en)) + "-" + ti} accent={service.accent}>{t}</window.Tag>)}
              </div>
              <span className="link-anim" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                fontSize: 14, fontWeight: 600, color: service.accent,
                fontFamily: "Inter, sans-serif",
              }}>
                Подробнее об услуге <window.I.ArrowRight size={14} color={service.accent} />
              </span>
            </div>

            {/* Visual side */}
            <div style={{
              order: reversed ? 1 : 2,
              background: `linear-gradient(135deg, ${service.accent}10, ${service.accent}28)`,
              minHeight: 360,
              position: "relative",
              overflow: "hidden",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}>
              <window.FloatingShape kind="diamond" size={300} color={service.accent} style={{ opacity: 0.18, top: "10%", left: reversed ? "auto" : "20%", right: reversed ? "20%" : "auto" }} speed={20} />
              <window.FloatingShape kind="ring" size={180} color={service.accent} style={{ opacity: 0.25, bottom: "15%", right: reversed ? "auto" : "12%", left: reversed ? "12%" : "auto" }} speed={28} />
              <div style={{
                width: 140, height: 140, borderRadius: 32,
                background: "#ffffff",
                border: `1px solid ${service.accent}30`,
                display: "flex", alignItems: "center", justifyContent: "center",
                boxShadow: `0 24px 70px ${service.accent}40`,
                transform: "translateZ(50px)",
                position: "relative",
                zIndex: 2,
              }}>
                {Ic && <Ic size={50} color={service.accent} />}
              </div>
            </div>
          </div>
        </window.Tilt>
      </window.Link>
      <style>{`
        @media (max-width: 900px){
          .service-row{ grid-template-columns: 1fr !important; }
          .service-row > div:first-child{ order: 1 !important; }
          .service-row > div:last-child{ order: 2 !important; min-height: 240px !important; }
        }
      `}</style>
    </div>
  );
}

function ServicesCTA() {
  const ref = window.useReveal("reveal");
  return (
    <section ref={ref} style={{ padding: "40px 32px 100px", background: "#f8f7f4" }}>
      <div style={{
        maxWidth: 1480, margin: "0 auto",
        padding: "60px 52px",
        borderRadius: 32,
        background: "linear-gradient(135deg, #0a6ef5 0%, #0552c7 100%)",
        color: "#fff",
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr",
        gap: 32,
        alignItems: "center",
        position: "relative",
        overflow: "hidden",
      }} className="sv-cta">
        <window.AnimatedBlob size={380} gradient="linear-gradient(135deg, #05b89c, #0a6ef5)" style={{ top: "-30%", right: "-10%" }} opacity={0.4} />
        <div style={{ position: "relative" }}>
          <h3 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(28px, 3.4vw, 42px)",
            fontWeight: 800,
            letterSpacing: "-0.025em",
            lineHeight: 1.05,
            marginBottom: 18,
            maxWidth: 540,
          }}>
            Не уверены, какая услуга вам нужна?
          </h3>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 15, lineHeight: 1.7,
            color: "rgba(255,255,255,0.8)", maxWidth: 480,
          }}>
            Запишитесь на 30-минутный звонок — расскажем, что подойдёт под вашу
            ситуацию, и предложим конкретные следующие шаги.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
          <window.GradientBtn to="/contact" size="lg" style={{ background: "#ffffff", color: "#0a6ef5", boxShadow: "0 12px 36px rgba(0,0,0,0.2)" }}>
            <span style={{ color: "#0a6ef5", fontWeight: 600 }}>Заказать звонок</span>
          </window.GradientBtn>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .sv-cta{ grid-template-columns: 1fr !important; padding: 36px !important; }}`}</style>
    </section>
  );
}

/* ----------------- DETAIL ----------------- */

function ServiceDetail({ slug }) {
  const service = window.SITE_DATA.services.find((s) => s.slug === slug);
  if (!service) {
    return <NotFoundPage label="Услуга не найдена" backTo="/services" backLabel="Все услуги" />;
  }
  const Ic = window.I[service.icon];
  const titleRef = window.useReveal("reveal");
  const relatedCases = window.SITE_DATA.work.filter((c) => c.tags.some(() => true)).slice(0, 3);

  return (
    <>
      {/* HERO */}
      <section style={{
        padding: "120px 32px 90px",
        background: "#f8f7f4",
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={520} gradient={`linear-gradient(135deg, ${service.accent}, ${service.accent}aa)`} style={{ top: "-20%", right: "-15%" }} opacity={0.18} />
        <window.FloatingShape kind="ring" size={140} color={service.accent} style={{ top: "30%", right: "15%", opacity: 0.22 }} speed={24} />
        <window.FloatingShape kind="diamond" size={50} color={service.accent} style={{ bottom: "20%", left: "10%", opacity: 0.18 }} speed={18} />
        <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.35, pointerEvents: "none" }} />

        <div ref={titleRef} style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
          <window.Breadcrumb items={[
            { to: "/", label: "Главная" },
            { to: "/services", label: "Услуги" },
            { label: service.title },
          ]} />
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 60, alignItems: "center",
          }} className="srv-detail-hero">
            <div>
              <div className="section-tag" style={{
                background: `${service.accent}10`,
                borderColor: `${service.accent}30`,
                color: service.accent,
                marginBottom: 24,
                display: "inline-flex",
              }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: service.accent }} />
                {window.tx(service.subtitle)}
              </div>
              <h1 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(48px, 6.4vw, 90px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.035em",
                lineHeight: 0.98,
                marginBottom: 28,
              }}>
                {window.tx(service.title)}
              </h1>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: "clamp(16px, 1.25vw, 19px)",
                lineHeight: 1.7, color: "#3a3a3a",
                maxWidth: 560, marginBottom: 36,
              }}>
                {window.tx(service.longDesc)}
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 40 }}>
                {service.tags.map((t, ti) => <window.Tag key={(typeof t === "string" ? t : (t.ru || t.en)) + "-" + ti} accent={service.accent}>{t}</window.Tag>)}
              </div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <window.GradientBtn to="/contact" size="lg" tone={service.accent === "#e85d00" ? "warm" : service.accent === "#05b89c" ? "teal" : "blue"}>
                  Обсудить проект
                </window.GradientBtn>
                <window.OutlineBtn to="/work" size="lg">Смотреть продукты</window.OutlineBtn>
              </div>
            </div>

            {/* Big icon mark */}
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "center",
              minHeight: 380, position: "relative",
            }}>
              <div style={{
                width: 280, height: 280, borderRadius: 48,
                background: `linear-gradient(135deg, ${service.accent}, ${service.accent}aa)`,
                display: "flex", alignItems: "center", justifyContent: "center",
                boxShadow: `0 40px 100px ${service.accent}50`,
                animation: "float 6s ease-in-out infinite",
                position: "relative",
              }}>
                <div style={{
                  position: "absolute", inset: -6,
                  borderRadius: 54,
                  border: `1.5px solid ${service.accent}40`,
                  animation: "spin-slow 30s linear infinite",
                }} />
                {Ic && <Ic size={110} color="#fff" strokeWidth={1.2} />}
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 980px){ .srv-detail-hero{ grid-template-columns: 1fr !important; }}`}</style>
        </div>
      </section>

      {/* TARGET / FOR WHOM */}
      <section style={{ padding: "80px 32px", background: "#f0ede8" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 48 }} className="srv-target">
          <div>
            <window.SectionTag tone={service.accent === "#e85d00" ? "warm" : service.accent === "#05b89c" ? "teal" : "blue"}>Для кого</window.SectionTag>
          </div>
          <p style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(22px, 2.6vw, 32px)",
            fontWeight: 500,
            color: "#0d0d0d",
            letterSpacing: "-0.015em",
            lineHeight: 1.3,
          }}>
            {service.forWhom}
          </p>
        </div>
        <style>{`@media (max-width: 760px){ .srv-target{ grid-template-columns: 1fr !important; }}`}</style>
      </section>

      {/* CAPABILITIES */}
      <section style={{ padding: "80px 32px", background: "#f8f7f4", position: "relative" }}>
        <window.FloatingShape kind="triangle" size={60} color={service.accent} style={{ top: 80, right: "8%", opacity: 0.12 }} speed={24} />
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 60 }}>
            <window.SectionTag tone={service.accent === "#e85d00" ? "warm" : service.accent === "#05b89c" ? "teal" : "blue"}>Что входит</window.SectionTag>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
              marginTop: 24,
              maxWidth: 720,
            }}>
              Четыре блока возможностей
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
            gap: 20,
          }}>
            {service.capabilities.map((c, i) => <CapabilityCard key={i} c={c} accent={service.accent} index={i} />)}
          </div>
        </div>
      </section>

      {/* RELATED WORK */}
      <section style={{ padding: "80px 32px", background: "#f0ede8" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
            <div>
              <window.SectionTag>Похожие продукты</window.SectionTag>
              <h2 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(28px, 3.6vw, 48px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.025em",
                lineHeight: 1.05,
                marginTop: 24,
                maxWidth: 600,
              }}>
                Где мы это уже делали
              </h2>
            </div>
            <window.Link to="/work" className="link-anim" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 14, fontWeight: 600, color: "#0a6ef5",
            }}>
              Все продукты <window.I.ArrowUpRight size={14} color="#0a6ef5" />
            </window.Link>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(420px, 1fr))",
            gap: 24,
          }}>
            {relatedCases.map((c) => <SmallCaseCard key={c.slug} c={c} />)}
          </div>
        </div>
      </section>

      {/* CTA */}
      <FinalServiceCTA service={service} />
    </>
  );
}

function CapabilityCard({ c, accent, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  return (
    <div ref={ref}>
      <window.Tilt max={4} scale={1.01}>
        <div className="card-hover" style={{
          background: "#ffffff",
          borderRadius: 20,
          padding: 28,
          border: "1px solid rgba(0,0,0,0.06)",
          minHeight: 200,
          position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0,
            height: 3,
            background: `linear-gradient(90deg, ${accent}, ${accent}40)`,
          }} />
          <div style={{
            fontFamily: "Syne, sans-serif",
            fontSize: 11, fontWeight: 700,
            letterSpacing: "0.1em", textTransform: "uppercase",
            color: accent,
            marginBottom: 14, marginTop: 6,
          }}>
            {String(index + 1).padStart(2, "0")}
          </div>
          <h4 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: 18, fontWeight: 700, color: "#0d0d0d",
            letterSpacing: "-0.02em", lineHeight: 1.25,
            marginBottom: 12,
          }}>
            <span className="title-anim">{window.tx(c.title)}</span>
          </h4>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13, lineHeight: 1.7, color: "#5a5a5a",
          }}>
            {c.desc}
          </p>
        </div>
      </window.Tilt>
    </div>
  );
}

function SmallCaseCard({ c }) {
  const [h, setH] = svState(false);
  return (
    <window.Link to={`/work/${c.slug}`}>
      <div
        className="card-hover"
        onMouseEnter={() => setH(true)}
        onMouseLeave={() => setH(false)}
        style={{
          background: "#fff",
          borderRadius: 20,
          overflow: "hidden",
          border: "1px solid rgba(0,0,0,0.06)",
          cursor: "pointer",
        }}>
        <div style={{ position: "relative", height: 180, overflow: "hidden" }}>
          <img src={c.image} alt={window.tx(c.title)} style={{
            width: "100%", height: "100%", objectFit: "cover",
            transform: h ? "scale(1.06)" : "scale(1)",
            transition: "transform 0.7s ease",
          }} />
          <div style={{
            position: "absolute", inset: 0,
            background: `linear-gradient(to bottom, transparent 50%, ${c.accent}cc 100%)`,
            opacity: 0.55,
          }} />
          <div style={{
            position: "absolute", bottom: 16, left: 20,
            color: "#fff",
          }}>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", marginBottom: 4 }}>
              {window.tx(c.category)}
            </div>
            <div style={{ fontFamily: "Syne, sans-serif", fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em" }}>
              <span className="title-anim">{window.tx(c.title)}</span>
            </div>
          </div>
        </div>
        <div style={{ padding: "20px 22px" }}>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13, lineHeight: 1.6, color: "#5a5a5a",
          }}>
            {window.tx(c.shortDesc)}
          </p>
        </div>
      </div>
    </window.Link>
  );
}

function FinalServiceCTA({ service }) {
  const ref = window.useReveal("reveal");
  return (
    <section ref={ref} style={{ padding: "40px 32px 100px", background: "#f0ede8" }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto",
        padding: "56px 52px",
        borderRadius: 28,
        background: `linear-gradient(135deg, #0d0d0d 0%, ${service.accent}28 100%)`,
        color: "#fff",
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "space-between",
        alignItems: "center",
        gap: 32,
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={400} gradient={`linear-gradient(135deg, ${service.accent}, #0a6ef5)`} style={{ top: "-25%", right: "-10%" }} opacity={0.35} />
        <div style={{ position: "relative", maxWidth: 560 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 14 }}>
            Готовы начать?
          </div>
          <h3 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(26px, 3.2vw, 38px)",
            fontWeight: 800,
            letterSpacing: "-0.025em",
            lineHeight: 1.1,
          }}>
            Обсудим, как {window.tx(service.title).toLowerCase()} впишется в ваш бизнес
          </h3>
        </div>
        <window.GradientBtn to="/contact" size="lg" style={{ background: "#fff", color: "#0d0d0d", boxShadow: "0 12px 36px rgba(0,0,0,0.18)" }}>
          <span style={{ color: "#0d0d0d", fontWeight: 600 }}>Записаться на звонок</span>
        </window.GradientBtn>
      </div>
    </section>
  );
}

/* ----------------- NotFound (shared) ----------------- */
function NotFoundPage({ label = "Страница не найдена", backTo = "/", backLabel = "На главную" }) {
  const ref = window.useReveal("reveal");
  const quickLinks = [
    { to: "/services",   label: "Услуги",     accent: "#0a6ef5" },
    { to: "/work",       label: "Продукты",   accent: "#05b89c" },
    { to: "/industries", label: "Индустрии",  accent: "#e85d00" },
    { to: "/logistics",  label: "Логистика",  accent: "#f5a623" },
  ];

  return (
    <section style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: 140,
      paddingBottom: 100,
      background: "#f8f7f4",
      overflow: "hidden",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
    }}>
      {/* ambient decorations — same vocabulary as home hero */}
      <window.ParticleField density={50} interactive={false} />
      <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.5, pointerEvents: "none", zIndex: 0 }} />
      <window.AnimatedBlob size={620} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ top: "-12%", right: "-10%" }} opacity={0.14} />
      <window.AnimatedBlob size={520} gradient="linear-gradient(135deg, #e85d00, #f5a623)" style={{ bottom: "-10%", left: "-8%" }} opacity={0.10} />
      <window.FloatingShape kind="diamond"   size={64}  color="#0a6ef5" style={{ top: "18%", right: "14%", opacity: 0.18 }} speed={16} />
      <window.FloatingShape kind="triangle"  size={50}  color="#05b89c" style={{ bottom: "22%", left: "10%", opacity: 0.20 }} speed={22} />
      <window.FloatingShape kind="ring"      size={130} color="#e85d00" style={{ top: "32%", left: "6%",  opacity: 0.15 }} speed={26} />

      <div
        ref={ref}
        style={{
          position: "relative",
          zIndex: 2,
          maxWidth: 960,
          margin: "0 auto",
          padding: "0 32px",
          textAlign: "center",
        }}
      >
        {/* status pill */}
        <div style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          padding: "8px 16px",
          background: "rgba(232,93,0,0.08)",
          border: "1px solid rgba(232,93,0,0.18)",
          borderRadius: 100,
          fontFamily: "Inter, sans-serif",
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "#e85d00",
          marginBottom: 36,
        }}>
          <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: "50%", background: "#e85d00" }} />
          Сигнал потерян
        </div>

        {/* big 404 with gradient */}
        <div
          aria-hidden="true"
          style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(120px, 22vw, 260px)",
            fontWeight: 800,
            letterSpacing: "-0.06em",
            lineHeight: 0.85,
            marginBottom: 12,
          }}
        >
          <span className="text-gradient-blue">404</span>
        </div>

        {/* heading */}
        <h1 style={{
          fontFamily: "Syne, sans-serif",
          fontSize: "clamp(28px, 3.8vw, 48px)",
          fontWeight: 800,
          color: "#0d0d0d",
          letterSpacing: "-0.03em",
          lineHeight: 1.1,
          marginBottom: 16,
        }}>
          {label}
        </h1>

        {/* lead */}
        <p style={{
          fontFamily: "Inter, sans-serif",
          fontSize: "clamp(15px, 1.15vw, 18px)",
          lineHeight: 1.7,
          color: "#3a3a3a",
          maxWidth: 620,
          margin: "0 auto 40px",
        }}>
          Похоже, эта страница ушла за горизонт <span className="cursor-blink" style={{ color: "#0a6ef5" }}>|</span>
          <br />
          Можно вернуться к началу или перейти в один из ключевых разделов.
        </p>

        {/* primary CTAs */}
        <div style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 14,
          justifyContent: "center",
          marginBottom: 56,
        }}>
          <window.GradientBtn to={backTo} size="lg">
            <window.I.ArrowRight size={16} color="#fff" style={{ transform: "rotate(180deg)" }} />
            <span style={{ marginLeft: 6 }}>{backLabel}</span>
          </window.GradientBtn>
          <window.Link
            to="/contact"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "14px 26px",
              borderRadius: 100,
              border: "1px solid rgba(0,0,0,0.12)",
              fontFamily: "Inter, sans-serif",
              fontSize: 14,
              fontWeight: 600,
              color: "#0d0d0d",
              background: "#ffffff",
              transition: "transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.2s ease",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#0a6ef5"; e.currentTarget.style.color = "#0a6ef5"; e.currentTarget.style.transform = "translateY(-2px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(0,0,0,0.12)"; e.currentTarget.style.color = "#0d0d0d"; e.currentTarget.style.transform = "translateY(0)"; }}
          >
            Связаться <window.I.ArrowUpRight size={14} color="currentColor" />
          </window.Link>
        </div>

        {/* quick links */}
        <div style={{ marginBottom: 0 }}>
          <div style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 11,
            fontWeight: 700,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "#7a7a7a",
            marginBottom: 18,
          }}>
            Куда дальше
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            gap: 14,
            maxWidth: 760,
            margin: "0 auto",
          }}>
            {quickLinks.map((q) => (
              <window.Link
                key={q.to}
                to={q.to}
                className="card-link"
                style={{
                  position: "relative",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  padding: "16px 20px",
                  borderRadius: 16,
                  background: "#ffffff",
                  border: "1px solid rgba(0,0,0,0.06)",
                  overflow: "hidden",
                  textAlign: "left",
                }}
              >
                <span className="accent-strip" style={{ background: `linear-gradient(90deg, ${q.accent}, ${q.accent}40)` }} />
                <span style={{
                  fontFamily: "Syne, sans-serif",
                  fontSize: 15,
                  fontWeight: 700,
                  color: "#0d0d0d",
                  letterSpacing: "-0.01em",
                }}>
                  <span className="title-anim">{q.label}</span>
                </span>
                <span className="arrow-grow" style={{ color: q.accent }}>
                  <window.I.ArrowRight size={14} color={q.accent} />
                </span>
              </window.Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.NotFoundPage = NotFoundPage;

/* ----------------- Dispatcher ----------------- */
function ServicesPage({ slug }) {
  if (slug) return <ServiceDetail slug={slug} />;
  return <ServicesIndex />;
}
window.ServicesPage = ServicesPage;