<?php
$code = isset($_GET["code"]) ? (int) $_GET["code"] : 0;
if ($code < 400 || $code > 599) {
  $code = isset($_SERVER["REDIRECT_STATUS"]) ? (int) $_SERVER["REDIRECT_STATUS"] : 500;
}
if ($code < 400 || $code > 599) {
  $code = 500;
}

$statusMap = [
  400 => ["title" => "Bad Request", "message" => "Запрос не может быть обработан из-за некорректного синтаксиса или параметров."],
  401 => ["title" => "Unauthorized", "message" => "Для доступа к этому ресурсу нужна авторизация."],
  402 => ["title" => "Payment Required", "message" => "Ресурс требует дополнительной оплаты или активации."],
  403 => ["title" => "Forbidden", "message" => "Доступ к запрошенному ресурсу запрещён."],
  404 => ["title" => "Not Found", "message" => "Страница не найдена. Возможно, адрес изменился или был удалён."],
  405 => ["title" => "Method Not Allowed", "message" => "Метод запроса не поддерживается для этого ресурса."],
  406 => ["title" => "Not Acceptable", "message" => "Сервер не может вернуть ответ в запрошенном формате."],
  407 => ["title" => "Proxy Authentication Required", "message" => "Требуется авторизация на прокси-сервере."],
  408 => ["title" => "Request Timeout", "message" => "Сервер не дождался завершения запроса вовремя."],
  409 => ["title" => "Conflict", "message" => "Запрос конфликтует с текущим состоянием ресурса."],
  410 => ["title" => "Gone", "message" => "Ресурс удалён и больше недоступен."],
  411 => ["title" => "Length Required", "message" => "Не указан обязательный заголовок Content-Length."],
  412 => ["title" => "Precondition Failed", "message" => "Условие запроса не выполнено."],
  413 => ["title" => "Payload Too Large", "message" => "Тело запроса слишком большое для обработки."],
  414 => ["title" => "URI Too Long", "message" => "URI запроса слишком длинный."],
  415 => ["title" => "Unsupported Media Type", "message" => "Неподдерживаемый формат тела запроса."],
  416 => ["title" => "Range Not Satisfiable", "message" => "Запрошенный диапазон данных недоступен."],
  417 => ["title" => "Expectation Failed", "message" => "Сервер не может выполнить ожидание из заголовка Expect."],
  418 => ["title" => "I'm a Teapot", "message" => "Сервер получил шуточный запрос и не может сварить кофе."],
  421 => ["title" => "Misdirected Request", "message" => "Запрос направлен на сервер, который не может дать ответ."],
  422 => ["title" => "Unprocessable Content", "message" => "Синтаксис корректен, но содержимое не проходит проверку."],
  423 => ["title" => "Locked", "message" => "Ресурс заблокирован и временно недоступен для изменений."],
  424 => ["title" => "Failed Dependency", "message" => "Запрос не выполнен из-за ошибки зависимого действия."],
  425 => ["title" => "Too Early", "message" => "Сервер отказывается обрабатывать ранний повтор запроса."],
  426 => ["title" => "Upgrade Required", "message" => "Для доступа нужен другой протокол."],
  428 => ["title" => "Precondition Required", "message" => "Для запроса требуется предварительное условие."],
  429 => ["title" => "Too Many Requests", "message" => "Слишком много запросов за короткое время. Попробуйте позже."],
  431 => ["title" => "Request Header Fields Too Large", "message" => "Заголовки запроса слишком большие."],
  451 => ["title" => "Unavailable For Legal Reasons", "message" => "Ресурс недоступен по юридическим причинам."],
  500 => ["title" => "Internal Server Error", "message" => "На сервере произошла непредвиденная ошибка."],
  501 => ["title" => "Not Implemented", "message" => "Запрошенная функциональность не реализована."],
  502 => ["title" => "Bad Gateway", "message" => "Шлюз получил некорректный ответ от вышестоящего сервера."],
  503 => ["title" => "Service Unavailable", "message" => "Сервис временно недоступен. Идёт обслуживание или перегрузка."],
  504 => ["title" => "Gateway Timeout", "message" => "Шлюз не получил ответ от вышестоящего сервера вовремя."],
  505 => ["title" => "HTTP Version Not Supported", "message" => "Версия HTTP в запросе не поддерживается."],
  506 => ["title" => "Variant Also Negotiates", "message" => "Ошибка настройки согласования содержимого."],
  507 => ["title" => "Insufficient Storage", "message" => "Недостаточно места для выполнения запроса."],
  508 => ["title" => "Loop Detected", "message" => "Обнаружен цикл при обработке запроса."],
  510 => ["title" => "Not Extended", "message" => "Для выполнения запроса требуются дополнительные расширения."],
  511 => ["title" => "Network Authentication Required", "message" => "Требуется сетевая аутентификация перед доступом."],
];

$meta = $statusMap[$code] ?? [
  "title" => "Unexpected Error",
  "message" => "Произошла непредвиденная ошибка при обработке запроса.",
];

$isServerError = $code >= 500;
$groupLabel = $isServerError ? "Server Error" : "Client Error";
$requestUri = (string) ($_SERVER["REQUEST_URI"] ?? "/");
$reqPath = (string) (parse_url($requestUri, PHP_URL_PATH) ?? "/");
$isApiNav = preg_match("#^/api(?:/|$)#", $reqPath) === 1;
$isBrandbookNav = preg_match("#^/brandbook(?:/|$)#", $reqPath) === 1;
$isPrivacyNav = preg_match("#^/privacy(?:/|$)#", $reqPath) === 1;
$pathSafe = htmlspecialchars($requestUri, ENT_QUOTES | ENT_SUBSTITUTE, "UTF-8");
$titleSafe = htmlspecialchars($meta["title"], ENT_QUOTES | ENT_SUBSTITUTE, "UTF-8");
$msgSafe = htmlspecialchars($meta["message"], ENT_QUOTES | ENT_SUBSTITUTE, "UTF-8");

http_response_code($code);
?>
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex, nofollow" />
  <title><?= $code ?> <?= $titleSafe ?> | technpro.ru</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Unbounded:wght@500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --topbar: 72px;
      --bg0: #060f15;
      --bg1: #0b1c25;
      --text: #ecf7ff;
      --muted: rgba(236, 247, 255, 0.72);
      --line: rgba(255, 255, 255, 0.14);
      --line-soft: rgba(255, 255, 255, 0.09);
      --danger: #ff8775;
      --warning: #ffd586;
      --shadow: 0 26px 64px rgba(0, 0, 0, 0.58);
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; }

    body {
      margin: 0;
      color: var(--text);
      font-family: "Manrope", "Segoe UI", sans-serif;
      background:
        radial-gradient(920px 580px at 8% 8%, rgba(33, 212, 192, 0.18), transparent 68%),
        radial-gradient(960px 620px at 92% 14%, rgba(91, 188, 255, 0.2), transparent 70%),
        radial-gradient(760px 540px at 72% 92%, rgba(255, 143, 87, 0.12), transparent 72%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow: hidden;
    }

    a { color: inherit; text-decoration: none; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 5;
      border-bottom: 1px solid var(--line-soft);
      background: linear-gradient(180deg, rgba(3, 12, 18, 0.92), rgba(3, 12, 18, 0.7));
      backdrop-filter: blur(14px);
    }

    .topbar__inner {
      min-height: var(--topbar);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      width: min(1160px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .brand__mark {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      border: 1px solid var(--line);
      padding: 4px;
      background: rgba(255, 255, 255, 0.08);
    }

    .brand__wordmark {
      height: 24px;
      display: inline-flex;
      align-items: center;
      max-width: min(42vw, 200px);
    }

    .brand__mark img,
    .brand__wordmark img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .brand--top { flex-shrink: 0; }

    .nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .nav__link {
      border: 0;
      background: transparent;
      font: inherit;
      font-weight: 700;
      line-height: 1.1;
      padding: 9px 12px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: rgba(236, 247, 255, 0.84);
      opacity: 0.9;
      white-space: nowrap;
      transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
    }

    .nav__link:hover {
      text-decoration: none;
      opacity: 1;
      background: rgba(255, 255, 255, 0.08);
    }

    .nav__link.is-active {
      opacity: 1;
      color: rgba(236, 247, 255, 1);
      text-decoration: none;
      background: rgba(91, 188, 255, 0.14);
    }

    .topbar__menuToggle {
      display: none;
      align-items: center;
      justify-content: center;
      height: 42px;
      padding: 7px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.06);
      cursor: pointer;
      color: inherit;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .topbar__menuToggle[aria-expanded="true"] {
      border-color: rgba(91, 188, 255, 0.5);
      background: rgba(91, 188, 255, 0.16);
    }

    .brand__wordmark--menu { height: 20px; }

    .topbar__menuLabel {
      display: none;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(236, 247, 255, 0.92);
    }

    @media (max-width: 920px) {
      .topbar__inner { justify-content: flex-start; }
      .brand--top { display: none; }
      .topbar__menuToggle { display: inline-flex; }

      .nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(6, 18, 27, 0.97), rgba(6, 18, 27, 0.9));
        backdrop-filter: blur(16px);
        box-shadow: 0 22px 46px rgba(0, 0, 0, 0.46);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(0.985);
        transform-origin: top center;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      }

      .nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .nav__link {
        width: 100%;
        justify-content: flex-start;
        padding: 11px 12px;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.05);
      }

      .nav__link.is-active {
        border-color: rgba(91, 188, 255, 0.42);
      }
    }

    @media (max-width: 720px) {
      :root { --topbar: 66px; }

      .topbar {
        inset: auto 0 0;
        border-bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      .topbar__inner { justify-content: center; }

      .topbar__menuToggle {
        width: 100%;
        justify-content: center;
        gap: 8px;
      }

      .brand__wordmark--menu { display: none; }
      .topbar__menuLabel { display: inline-flex; }

      .nav {
        top: auto;
        bottom: calc(100% + 8px);
        transform: translateY(8px) scale(0.985);
        transform-origin: bottom center;
      }

      .nav.is-open { transform: translateY(0) scale(1); }
      body { overflow: auto; }
    }

    .blob {
      position: fixed;
      width: min(44vw, 520px);
      height: min(44vw, 520px);
      border-radius: 999px;
      filter: blur(56px);
      opacity: 0.38;
      pointer-events: none;
      animation: drift 11s ease-in-out infinite alternate;
    }

    .blob--a { background: rgba(33, 212, 192, 0.38); top: -120px; left: -120px; }
    .blob--b { background: rgba(91, 188, 255, 0.36); right: -140px; top: -80px; animation-duration: 13s; }
    .blob--c { background: rgba(255, 143, 87, 0.28); right: 8%; bottom: -160px; animation-duration: 15s; }

    @keyframes drift {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(20px, -14px, 0) scale(1.08); }
    }

    .errorStage {
      min-height: calc(100vh - var(--topbar));
      display: grid;
      place-items: center;
      padding: 22px;
    }

    .card {
      width: min(920px, 100%);
      border-radius: 24px;
      border: 1px solid var(--line-soft);
      background: rgba(9, 25, 35, 0.78);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(480px 220px at 24% -10%, rgba(33, 212, 192, 0.18), transparent 70%),
        radial-gradient(440px 220px at 90% 0%, rgba(91, 188, 255, 0.2), transparent 72%);
      pointer-events: none;
    }

    .inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
    }

    .main {
      padding: 28px;
      border-right: 1px solid var(--line-soft);
    }

    .side {
      padding: 28px;
      background: rgba(255, 255, 255, 0.02);
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid <?= $isServerError ? "rgba(255, 135, 117, 0.35)" : "rgba(255, 213, 134, 0.35)" ?>;
      background: <?= $isServerError ? "rgba(255, 135, 117, 0.14)" : "rgba(255, 213, 134, 0.14)" ?>;
      color: rgba(236, 247, 255, 0.9);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
    }

    h1 {
      margin: 0 0 10px;
      font-family: "Unbounded", "Manrope", sans-serif;
      letter-spacing: -0.02em;
      font-size: clamp(34px, 6vw, 64px);
      line-height: 1;
    }

    h2 {
      margin: 0 0 8px;
      font-size: clamp(20px, 2.4vw, 30px);
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    p {
      margin: 0;
      color: var(--muted);
      line-height: 1.58;
    }

    .status {
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.05);
      padding: 7px 12px;
      font-size: 12px;
      color: rgba(236, 247, 255, 0.86);
    }

    .status strong {
      color: <?= $isServerError ? "var(--danger)" : "var(--warning)" ?>;
      font-size: 13px;
    }

    .actions {
      margin-top: 18px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(236, 247, 255, 0.92);
      text-decoration: none;
      background: rgba(255, 255, 255, 0.07);
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.12);
    }

    .btn--primary {
      color: #07131b;
      border-color: rgba(33, 212, 192, 0.58);
      background: linear-gradient(90deg, rgba(33, 212, 192, 0.9), rgba(91, 188, 255, 0.84));
    }

    .list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .list li {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      padding: 10px;
      font-size: 13px;
      color: rgba(236, 247, 255, 0.82);
      line-height: 1.5;
    }

    .meta {
      margin-top: 10px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.16);
      padding: 10px;
      font-size: 12px;
      color: rgba(236, 247, 255, 0.76);
      word-break: break-word;
      font-family: "Consolas", "SFMono-Regular", monospace;
    }

    @media (max-width: 900px) {
      body { overflow: auto; }
      .inner { grid-template-columns: 1fr; }
      .main {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
      }
      .errorStage { padding-bottom: 90px; }
    }

    @media (max-width: 600px) {
      .errorStage { padding: 12px 12px 84px; }
      .main,
      .side { padding: 20px; }
      .main {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .actions { justify-content: center; }
      .side h2,
      .side p { text-align: center; }
    }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="topbar__inner">
      <a class="brand brand--top" href="/" aria-label="На главную">
        <span class="brand__mark"><img src="/logo.png" alt="Technpro" /></span>
        <span class="brand__wordmark"><img src="/logo-horizontal.png" alt="Technpro" /></span>
      </a>

      <button class="topbar__menuToggle" type="button" aria-controls="siteMenu" aria-expanded="false" data-menu-toggle>
        <span class="brand__wordmark brand__wordmark--menu"><img src="/logo-horizontal.png" alt="Technpro" /></span>
        <span class="topbar__menuLabel">Технологии и проекты</span>
      </button>

      <nav class="nav" id="siteMenu" data-mobile-menu aria-label="Основное меню">
        <a class="nav__link" href="/#products">Продукты</a>
        <a class="nav__link" href="/#portfolio">Кейсы</a>
        <a class="nav__link<?= $isApiNav ? " is-active" : "" ?>" href="/api/"<?= $isApiNav ? " aria-current=\"page\"" : "" ?>>Api</a>
        <a class="nav__link<?= $isBrandbookNav ? " is-active" : "" ?>" href="/brandbook/"<?= $isBrandbookNav ? " aria-current=\"page\"" : "" ?>>Брендбук</a>
        <a class="nav__link<?= $isPrivacyNav ? " is-active" : "" ?>" href="/privacy/"<?= $isPrivacyNav ? " aria-current=\"page\"" : "" ?>>Политика конфиденциальности</a>
      </nav>
    </div>
  </header>

  <div class="blob blob--a"></div>
  <div class="blob blob--b"></div>
  <div class="blob blob--c"></div>

  <div class="errorStage">
    <main class="card">
      <div class="inner">
        <section class="main">
          <span class="kicker"><?= htmlspecialchars($groupLabel, ENT_QUOTES | ENT_SUBSTITUTE, "UTF-8") ?></span>
          <h1><?= $code ?></h1>
          <h2><?= $titleSafe ?></h2>
          <p><?= $msgSafe ?></p>
          <div class="status">Статус: <strong>HTTP <?= $code ?></strong></div>

          <div class="actions">
            <a class="btn btn--primary" href="/">На главную</a>
            <a class="btn" href="/api/">Api</a>
            <a class="btn" href="/brandbook/">Брендбук</a>
            <a class="btn" href="javascript:history.back()">Назад</a>
          </div>
        </section>

        <aside class="side">
          <h2 style="font-size: 20px;">Что можно сделать сейчас</h2>
          <ul class="list">
            <li>Проверьте корректность URL и попробуйте снова.</li>
            <li>Если ошибка повторяется, обновите страницу через 30-60 секунд.</li>
            <li>Для интеграций откройте раздел <a href="/api/">Api</a> и проверьте формат запроса.</li>
            <li>Если проблема сохраняется, отправьте в поддержку время и адрес страницы.</li>
          </ul>
          <div class="meta">path: <?= $pathSafe ?></div>
        </aside>
      </div>
    </main>
  </div>

  <script src="/script.js?v=5"></script>
</body>
</html>