/* eslint-disable */
// Шапка, подвал, роутер. Хеш-роутинг.

const NAV = [
  { href: "#/", label: "Главная" },
  { href: "#/services", label: "Услуги" },
  { href: "#/products", label: "Продукты" },
  { href: "#/approach", label: "Подход" },
  { href: "#/team", label: "Команда" },
  { href: "#/about", label: "О компании" },
  { href: "#/contacts", label: "Контакты" }
];

const useHashRoute = () => {
  const [hash, setHash] = React.useState(window.location.hash || "#/");
  React.useEffect(() => {
    const onChange = () => {
      setHash(window.location.hash || "#/");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  return hash;
};

const useTheme = () => {
  const [theme, setTheme] = React.useState(() => {
    return localStorage.getItem("wm-theme") || "light";
  });
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("wm-theme", theme);
  }, [theme]);
  return [theme, setTheme];
};

const ThemeToggle = ({ theme, setTheme }) => (
  <button
    className="btn btn-ghost btn-sm"
    onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    aria-label={theme === "light" ? "Включить тёмную тему" : "Включить светлую тему"}
    style={{ fontFamily: "var(--font-mono)", letterSpacing: "0.04em", textTransform: "uppercase" }}
  >
    <span style={{ width: 12, height: 12, borderRadius: "50%",
      background: theme === "light" ? "var(--ink)" : "var(--bg)",
      border: "1px solid var(--line-strong)", display: "inline-block" }} />
    {theme === "light" ? "Тёмная" : "Светлая"}
  </button>
);

const Header = ({ theme, setTheme, currentHash }) => {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  // Блокируем скролл фона, когда дровер открыт
  React.useEffect(() => {
    if (mobileOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [mobileOpen]);

  // Закрываем по Esc
  React.useEffect(() => {
    if (!mobileOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [mobileOpen]);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "color-mix(in srgb, var(--bg) 88%, transparent)",
      backdropFilter: "blur(10px)",
      WebkitBackdropFilter: "blur(10px)",
      borderBottom: "1px solid var(--line)"
    }}>
      <div className="shell header-bar" style={{ display: "flex", alignItems: "center", gap: 24, height: 64 }}>
        <a href="#/" style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--ink)", textDecoration: "none" }}>
          <BrainMark size={32} />
          <span className="header-wordmark" style={{ fontWeight: 700, letterSpacing: "0.01em", fontSize: 17 }}>ДИКИЙ&nbsp;МАРКС</span>
        </a>
        <nav className="header-nav" style={{ display: "flex", gap: 2, marginLeft: 16, flex: 1 }}>
          {NAV.map((n) => {
            const active = currentHash === n.href || (n.href !== "#/" && currentHash.startsWith(n.href));
            return (
              <a key={n.href} href={n.href} style={{
                color: active ? "var(--ink)" : "var(--ink-2)",
                fontSize: 14, padding: "8px 12px", borderRadius: 6,
                background: active ? "var(--surface-2)" : "transparent",
                textDecoration: "none"
              }}>
                {n.label}
              </a>
            );
          })}
        </nav>
        <div className="header-cta" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <ThemeToggle theme={theme} setTheme={setTheme} />
          <a href="#/contacts" className="btn btn-primary btn-sm header-cta-primary">Обсудить задачу</a>
        </div>
        <button
          className="header-burger"
          onClick={() => setMobileOpen(true)}
          aria-label="Открыть меню"
          aria-expanded={mobileOpen}
        >
          <span /><span /><span />
        </button>
      </div>

      {mobileOpen && ReactDOM.createPortal(
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Главное меню"
          className="mobile-drawer"
        >
          <div className="mobile-drawer-bar">
            <a href="#/" onClick={() => setMobileOpen(false)} style={{ display: "flex", gap: 10, alignItems: "center", color: "var(--ink)", textDecoration: "none" }}>
              <BrainMark size={28} />
              <span style={{ fontWeight: 700, letterSpacing: "0.01em" }}>ДИКИЙ МАРКС</span>
            </a>
            <button className="mobile-drawer-close" onClick={() => setMobileOpen(false)} aria-label="Закрыть меню">
              <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
                <path d="M5 5 L15 15 M15 5 L5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
            </button>
          </div>

          <nav className="mobile-drawer-nav" aria-label="Главная навигация">
            {NAV.map((n) => {
              const active = currentHash === n.href || (n.href !== "#/" && currentHash.startsWith(n.href));
              return (
                <a
                  key={n.href}
                  href={n.href}
                  onClick={() => setMobileOpen(false)}
                  className={"mobile-drawer-item" + (active ? " is-active" : "")}
                  aria-current={active ? "page" : undefined}
                >
                  <span>{n.label}</span>
                  <span aria-hidden="true" className="mobile-drawer-arrow">→</span>
                </a>
              );
            })}
          </nav>

          <div className="mobile-drawer-foot">
            <a href="#/contacts" onClick={() => setMobileOpen(false)} className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>Обсудить задачу</a>
            <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
              <ThemeToggle theme={theme} setTheme={setTheme} />
              <a href="tel:+79136000215" className="btn btn-ghost btn-sm" style={{ flex: 1, justifyContent: "center" }}>+7 913 600-02-15</a>
            </div>
            <div className="t-mono dim" style={{ marginTop: 16, fontSize: 11, letterSpacing: "0.04em" }}>
              ООО «ДИКИЙ МАРКС» · АККРЕДИТАЦИЯ № 75271
            </div>
          </div>
        </div>,
        document.body
      )}

      <style>{`
        .header-burger {
          display: none;
          width: 44px; height: 44px;
          align-items: center; justify-content: center;
          flex-direction: column; gap: 5px;
          background: var(--surface);
          border: 1px solid var(--line-strong);
          border-radius: 8px;
          cursor: pointer;
          padding: 0;
        }
        .header-burger span {
          display: block;
          width: 18px; height: 2px;
          background: var(--ink);
          border-radius: 2px;
        }
        .header-burger:hover { background: var(--surface-2); }
        .header-burger:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

        .mobile-drawer {
          position: fixed;
          inset: 0;
          z-index: 999;
          background: var(--bg);
          background-color: var(--bg);
          display: flex;
          flex-direction: column;
          overflow-y: auto;
          animation: drawerIn 180ms ease-out;
        }
        [data-theme="light"] .mobile-drawer { background: #f5f2ec; }
        [data-theme="dark"] .mobile-drawer { background: #16181a; }

        @keyframes drawerIn {
          from { opacity: 0; transform: translateY(-8px); }
          to { opacity: 1; transform: translateY(0); }
        }

        .mobile-drawer-bar {
          display: flex; align-items: center; justify-content: space-between;
          padding: 14px 20px;
          border-bottom: 1px solid var(--line);
          background: var(--bg);
          position: sticky; top: 0; z-index: 1;
        }
        .mobile-drawer-close {
          width: 44px; height: 44px;
          background: var(--surface);
          border: 1px solid var(--line-strong);
          border-radius: 8px;
          color: var(--ink);
          cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center;
        }
        .mobile-drawer-close:hover { background: var(--surface-2); }

        .mobile-drawer-nav {
          display: flex; flex-direction: column;
          padding: 12px;
          gap: 6px;
        }
        .mobile-drawer-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 18px 20px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 12px;
          color: var(--ink);
          text-decoration: none;
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0.01em;
          transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
        }
        .mobile-drawer-item:hover { background: var(--surface-2); }
        .mobile-drawer-item:active { transform: scale(0.99); }
        .mobile-drawer-item.is-active {
          background: var(--surface-2);
          border-color: var(--red-line);
          color: var(--ink);
        }
        .mobile-drawer-item.is-active::before {
          content: "";
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--red);
          margin-right: 10px; margin-left: -6px;
          flex: 0 0 auto;
        }
        .mobile-drawer-arrow {
          font-family: var(--font-mono);
          color: var(--ink-3);
          font-size: 16px;
        }

        .mobile-drawer-foot {
          margin-top: auto;
          padding: 20px;
          border-top: 1px solid var(--line);
          background: var(--surface);
        }

        @media (max-width: 1100px) {
          .header-nav { display: none !important; }
          .header-burger { display: inline-flex !important; }
        }
        @media (max-width: 720px) {
          .header-cta-primary { display: none !important; }
          .header-bar { gap: 12px !important; }
          .header-wordmark { font-size: 15px; }
        }
        @media (max-width: 380px) {
          .header-cta { gap: 6px !important; }
        }
      `}</style>
    </header>
  );
};

const Footer = () => (
  <footer style={{ borderTop: "1px solid var(--line)", marginTop: 80, padding: "56px 0 36px", background: "var(--surface)" }}>
    <div className="shell">
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32 }} className="footer-grid">
        <div>
          <a href="#/" style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--ink)", textDecoration: "none" }}>
            <BrainMark size={32} />
            <span style={{ fontWeight: 600, fontSize: 16 }}>ДИКИЙ&nbsp;МАРКС</span>
          </a>
          <p className="t-small muted" style={{ marginTop: 16, maxWidth: 360 }}>
            Внешнее ИТ-подразделение для среднего и крупного бизнеса. Аккредитованная Минцифры ИТ-компания, № 75271.
          </p>
          <div style={{ marginTop: 16, display: "flex", flexWrap: "wrap", gap: 8 }}>
            <span className="badge"><span className="dot" /> аккредитация № 75271</span>
            <span className="badge">Омск</span>
          </div>
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 14 }}>Услуги</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            <li><a href="#/services#infra" className="t-small">Инфраструктура и DevOps</a></li>
            <li><a href="#/services#1c" className="t-small">1С</a></li>
            <li><a href="#/services#web" className="t-small">Веб-разработка</a></li>
            <li><a href="#/services#ai" className="t-small">ИИ / Python / видеоаналитика</a></li>
          </ul>
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 14 }}>Продукты</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            <li><a href="#/product/badges" className="t-small">Аудиобейджи</a></li>
            <li><a href="#/product/video" className="t-small">Видеоаналитика конверсии</a></li>
          </ul>
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 14 }}>Компания</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            <li><a href="#/approach" className="t-small">Подход</a></li>
            <li><a href="#/team" className="t-small">Команда</a></li>
            <li><a href="#/about" className="t-small">О компании</a></li>
            <li><a href="#/contacts" className="t-small">Контакты</a></li>
            <li><a href="#/mincifry" className="t-small">Сведения для Минцифры</a></li>
          </ul>
        </div>
      </div>

      <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
        <div className="t-mono dim" style={{ display: "flex", flexWrap: "wrap", gap: 18, fontSize: 12 }}>
          <span>ООО «Дикий Маркс»</span>
          <span>ИНН 5505070369</span>
          <span>ОГРН 1235500000108</span>
          <span>КПП 550301001</span>
          <span>644099, Омск, ул. Карла Либкнехта, 35, помещ. 7П</span>
        </div>
        <div style={{ marginTop: 14, display: "flex", flexWrap: "wrap", gap: 18, justifyContent: "space-between" }}>
          <div className="t-small muted" style={{ display: "flex", flexWrap: "wrap", gap: 18 }}>
            <a href="#/legal#privacy">Политика конфиденциальности</a>
            <a href="#/legal#consent">Согласие на обработку ПДн</a>
            <a href="#/legal#offer">Публичная оферта</a>
            <a href="#/mincifry">Сведения для Минцифры</a>
          </div>
          <div className="t-small dim">© {new Date().getFullYear()} ООО «Дикий Маркс»</div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 920px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; }
      }
      @media (max-width: 560px) {
        .footer-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </footer>
);

// Хлебные крошки
const Breadcrumb = ({ items }) => (
  <nav aria-label="Хлебные крошки" style={{ marginBottom: 24 }}>
    <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexWrap: "wrap", gap: 8 }}>
      {items.map((it, i) => (
        <li key={i} className="t-mono dim" style={{ display: "flex", gap: 8 }}>
          {it.href ? <a href={it.href} style={{ color: "var(--ink-3)" }}>{it.label}</a> : <span>{it.label}</span>}
          {i < items.length - 1 && <span style={{ color: "var(--ink-mute)" }}>/</span>}
        </li>
      ))}
    </ol>
  </nav>
);

// Заголовок страницы
const PageHeader = ({ eyebrow, title, lead, actions }) => (
  <header className="page-hero" style={{ position: "relative" }}>
    {eyebrow && <SectionNode label={eyebrow} />}
    <h1 className="t-d2" style={{ marginTop: 18, marginBottom: 0, maxWidth: 18 + "ch", maxWidth: "20ch" }}>{title}</h1>
    {lead && <p className="t-body-lg muted" style={{ marginTop: 18, maxWidth: "60ch" }}>{lead}</p>}
    {actions && <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>{actions}</div>}
  </header>
);

Object.assign(window, { useHashRoute, useTheme, Header, Footer, Breadcrumb, PageHeader, NAV });