<%
const code = typeof statusCode !== 'undefined' ? Number(statusCode) : 404;
const errorTypes = {
  404: {
    title: 'Page Not Found',
    desc: "The page you're looking for has moved, been deleted, or never existed. Double-check the URL or use the links below to find your way back.",
    badge: 'Error · Page Not Found',
    mini: '404 · Not Found',
    badgeBg: 'rgba(128,101,248,.15)',
    badgeBorder: 'rgba(128,101,248,.3)',
    badgeColor: '#c4b5fd',
    dotColor: '#a78bfa',
  },
  500: {
    title: 'Server Error',
    desc: 'Something went wrong on our end. Our engineering team has been notified and is working on a fix. Please try again in a few minutes.',
    badge: 'Error · Internal Server',
    mini: '500 · Server Error',
    badgeBg: 'rgba(239,68,68,.12)',
    badgeBorder: 'rgba(239,68,68,.3)',
    badgeColor: '#fca5a5',
    dotColor: '#ef4444',
  },
  403: {
    title: 'Access Denied',
    desc: "You don't have permission to view this page. If you believe this is a mistake, please sign in to your account or contact our support team.",
    badge: 'Error · Access Denied',
    mini: '403 · Forbidden',
    badgeBg: 'rgba(245,158,11,.12)',
    badgeBorder: 'rgba(245,158,11,.3)',
    badgeColor: '#fcd34d',
    dotColor: '#f59e0b',
  },
  503: {
    title: 'Maintenance Mode',
    desc: "Analytics Grade is currently undergoing scheduled maintenance to improve your experience. We'll be back online shortly — usually within the hour.",
    badge: 'Notice · Maintenance Mode',
    mini: '503 · Maintenance',
    badgeBg: 'rgba(19,179,180,.12)',
    badgeBorder: 'rgba(19,179,180,.3)',
    badgeColor: '#5eead4',
    dotColor: '#13b3b4',
  },
};
const active = errorTypes[code] || errorTypes[404];
const displayCode = errorTypes[code] ? code : 404;
const pagesJson = JSON.stringify([
  { title: 'Homepage', url: '/', desc: 'One dashboard. Every marketing channel.', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6', color: 'purple' },
  { title: 'Features', url: '/#features', desc: 'Reporting, analytics, integrations and more.', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z', color: 'teal' },
  { title: 'Pricing', url: '/#pricing', desc: 'Plans for solo agencies to enterprise teams.', icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z', color: 'blue' },
  { title: 'Blog', url: '/blog', desc: 'Marketing tips and agency growth guides.', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z', color: 'blue' },
  { title: 'About', url: '/about', desc: 'Meet the Analytics Grade team.', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z', color: 'purple' },
  { title: 'Contact', url: '/contact', desc: 'Get in touch with our support team.', icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z', color: 'purple' },
  { title: 'Privacy Policy', url: '/privacy', desc: 'How we collect and protect your data.', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', color: 'teal' },
  { title: 'Terms of Service', url: '/terms', desc: 'Legal terms governing use of Analytics Grade.', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', color: 'blue' },
]);
%>

<div id="error-page" data-pages="<%= encodeURIComponent(pagesJson) %>">

<section class="min-h-screen flex flex-col relative" style="background:linear-gradient(160deg,#0b1f3a 0%,#0e2040 60%,#081529 100%)">

  <div class="fixed inset-0 pointer-events-none overflow-hidden" style="z-index:0">
    <div style="position:absolute;width:700px;height:700px;top:-120px;right:-180px;background:radial-gradient(circle,rgba(128,101,248,.10) 0%,transparent 65%)"></div>
    <div style="position:absolute;width:500px;height:500px;bottom:-100px;left:-120px;background:radial-gradient(circle,rgba(19,179,180,.09) 0%,transparent 65%)"></div>
    <div style="position:absolute;width:350px;height:350px;top:40%;left:55%;background:radial-gradient(circle,rgba(68,144,211,.07) 0%,transparent 60%)"></div>
    <svg class="absolute inset-0 w-full h-full opacity-[0.03]" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <pattern id="error-grid" width="48" height="48" patternUnits="userSpaceOnUse">
          <path d="M 48 0 L 0 0 0 48" fill="none" stroke="white" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#error-grid)"/>
    </svg>
  </div>

  <div class="relative z-10 flex-1 flex flex-col lg:flex-row items-center justify-center gap-12 px-6 pt-28 pb-16 max-w-6xl mx-auto w-full">

    <div class="flex-1 text-center lg:text-left max-w-lg">
      <div id="status-badge" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full mb-6 text-xs font-semibold"
           style="background:<%= active.badgeBg %>;border:1px solid <%= active.badgeBorder %>;color:<%= active.badgeColor %>">
        <span class="status-dot w-1.5 h-1.5 rounded-full blink" style="background:<%= active.dotColor %>"></span>
        <span id="badge-text"><%= active.badge %></span>
      </div>

      <div class="glitch code-glow font-black leading-none mb-4 select-none" id="error-code" data-text="<%= displayCode %>"
           style="font-size:clamp(96px,16vw,180px)"><%= displayCode %></div>

      <h1 class="text-2xl sm:text-3xl font-bold text-white mb-3" id="error-title"><%= active.title %></h1>
      <p class="text-base leading-relaxed mb-8" style="color:rgba(255,255,255,.55)" id="error-desc"><%= active.desc %></p>

      <div class="relative mb-6">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4" style="color:rgba(255,255,255,.35)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35"/>
        </svg>
        <input id="search-box" type="search" placeholder="Search for a page…" autocomplete="off"
          class="search-input w-full pl-11 pr-10 py-3 rounded-xl text-sm font-medium text-white transition-all"
          style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:white" />
        <button type="button" id="search-clear" onclick="clearErrorSearch()" class="absolute right-3 top-1/2 -translate-y-1/2 hidden w-5 h-5 rounded-full flex items-center justify-center text-white hover:bg-white/10" aria-label="Clear search">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>

      <div class="flex flex-col sm:flex-row gap-3">
        <a href="/" class="btn-primary flex items-center justify-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-white">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          Back to Home
        </a>
        <a href="/contact" class="error-btn-secondary flex items-center justify-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-colors"
           style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8)">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
          Contact Support
        </a>
        <button type="button" onclick="history.back()" class="error-btn-secondary flex items-center justify-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-colors"
           style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.8)">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
          Go Back
        </button>
      </div>
    </div>

    <div class="relative flex-shrink-0 w-72 h-72 sm:w-80 sm:h-80 lg:w-96 lg:h-96 float-anim" aria-hidden="true">
      <div class="absolute inset-0 orbit-1" style="border:1.5px dashed rgba(128,101,248,.2);border-radius:50%">
        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-3.5 h-3.5 rounded-full" style="background:linear-gradient(135deg,#8065f8,#4490d3)"></div>
      </div>
      <div class="absolute orbit-2" style="inset:28px;border:1.5px dashed rgba(19,179,180,.18);border-radius:50%">
        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-2.5 h-2.5 rounded-full" style="background:#13b3b4"></div>
        <div class="absolute top-1/2 -right-2 -translate-y-1/2 w-2 h-2 rounded-full" style="background:#4490d3"></div>
      </div>
      <div class="absolute" style="inset:60px;border-radius:24px;background:rgba(255,255,255,.05);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 64px rgba(0,0,0,.4)">
        <div class="flex items-center gap-1.5 px-3 py-2.5 border-b" style="border-color:rgba(255,255,255,.08)">
          <div class="w-2 h-2 rounded-full bg-red-500 opacity-70"></div>
          <div class="w-2 h-2 rounded-full bg-yellow-400 opacity-70"></div>
          <div class="w-2 h-2 rounded-full bg-green-500 opacity-70"></div>
          <div class="flex-1 mx-2 h-1.5 rounded-full" style="background:rgba(255,255,255,.08)"></div>
        </div>
        <div class="p-3 space-y-2">
          <div class="flex items-end gap-1.5 h-16 px-1">
            <div class="w-full rounded-t" style="height:60%;background:rgba(128,101,248,.35)"></div>
            <div class="w-full rounded-t" style="height:80%;background:rgba(128,101,248,.35)"></div>
            <div class="w-full rounded-t" style="height:45%;background:rgba(128,101,248,.35)"></div>
            <div class="w-full relative flex flex-col items-center" style="height:90%">
              <div class="w-full rounded-sm" style="height:50%;background:rgba(239,68,68,.45);margin-bottom:2px"></div>
              <div class="w-full rounded-sm" style="height:40%;background:rgba(239,68,68,.25);margin-top:2px"></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <svg class="w-3.5 h-3.5" style="color:rgba(239,68,68,.9)" fill="currentColor" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
              </div>
            </div>
            <div class="w-full rounded-t" style="height:55%;background:rgba(128,101,248,.35)"></div>
            <div class="w-full rounded-t" style="height:70%;background:rgba(128,101,248,.35)"></div>
          </div>
          <div class="flex gap-2 mt-1">
            <div class="flex-1 rounded-lg p-2" style="background:rgba(255,255,255,.05)">
              <div class="h-1.5 rounded w-10 mb-1.5" style="background:rgba(255,255,255,.15)"></div>
              <div class="text-xs font-bold" style="color:rgba(239,68,68,.8)">—</div>
            </div>
            <div class="flex-1 rounded-lg p-2" style="background:rgba(255,255,255,.05)">
              <div class="h-1.5 rounded w-8 mb-1.5" style="background:rgba(255,255,255,.15)"></div>
              <div class="text-xs font-bold" style="color:rgba(239,68,68,.8)">—</div>
            </div>
            <div class="flex-1 rounded-lg p-2" style="background:rgba(255,255,255,.05)">
              <div class="h-1.5 rounded w-9 mb-1.5" style="background:rgba(255,255,255,.15)"></div>
              <div class="text-xs font-bold" style="color:rgba(239,68,68,.8)">—</div>
            </div>
          </div>
          <div class="flex items-center justify-center gap-1.5 py-1.5 rounded-lg" style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2)">
            <svg class="w-3 h-3" style="color:rgba(239,68,68,.8)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <span class="text-[9px] font-semibold" style="color:rgba(239,68,68,.8)" id="mini-error-label"><%= active.mini %></span>
          </div>
        </div>
      </div>
      <div class="absolute -top-2 -left-4 flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-white text-[10px] font-bold shadow-lg"
           style="background:linear-gradient(135deg,#8065f8,#4490d3);box-shadow:0 8px 24px rgba(128,101,248,.4)">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        Page Missing
      </div>
      <div class="absolute -bottom-4 -right-4 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold shadow-lg"
           style="background:#0e1e35;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7)">
        <span class="w-1.5 h-1.5 rounded-full blink" style="background:#ef4444"></span>
        Error logged
      </div>
    </div>
  </div>

  <section class="relative z-10 w-full max-w-6xl mx-auto px-6 pb-20">
    <div class="border-t mb-10" style="border-color:rgba(255,255,255,.07)"></div>
    <div class="text-center mb-8">
      <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:rgba(255,255,255,.3)">Maybe you were looking for</p>
      <h2 class="text-lg font-semibold text-white">Popular pages</h2>
    </div>
    <div id="suggestions-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <a href="/" class="suggestion-card group block p-5 rounded-2xl text-left" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-4" style="background:linear-gradient(135deg,rgba(128,101,248,.25),rgba(68,144,211,.25));border:1px solid rgba(128,101,248,.3)">
          <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
        </div>
        <p class="text-sm font-semibold text-white mb-1">Homepage</p>
        <p class="text-xs leading-relaxed" style="color:rgba(255,255,255,.4)">Start fresh from the Analytics Grade homepage and explore all features.</p>
      </a>
      <a href="/#features" class="suggestion-card group block p-5 rounded-2xl text-left" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-4" style="background:linear-gradient(135deg,rgba(19,179,180,.2),rgba(68,144,211,.2));border:1px solid rgba(19,179,180,.3)">
          <svg class="w-4 h-4 text-teal-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        </div>
        <p class="text-sm font-semibold text-white mb-1">Features</p>
        <p class="text-xs leading-relaxed" style="color:rgba(255,255,255,.4)">See everything Analytics Grade can do — reporting, analytics, integrations.</p>
      </a>
      <a href="/blog" class="suggestion-card group block p-5 rounded-2xl text-left" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-4" style="background:linear-gradient(135deg,rgba(68,144,211,.2),rgba(128,101,248,.2));border:1px solid rgba(68,144,211,.3)">
          <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
        </div>
        <p class="text-sm font-semibold text-white mb-1">Blog</p>
        <p class="text-xs leading-relaxed" style="color:rgba(255,255,255,.4)">Marketing tips, agency growth guides, and Analytics Grade product updates.</p>
      </a>
      <a href="/contact" class="suggestion-card group block p-5 rounded-2xl text-left" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)">
        <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-4" style="background:linear-gradient(135deg,rgba(128,101,248,.2),rgba(19,179,180,.2));border:1px solid rgba(128,101,248,.25)">
          <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
        </div>
        <p class="text-sm font-semibold text-white mb-1">Contact Us</p>
        <p class="text-xs leading-relaxed" style="color:rgba(255,255,255,.4)">Reach our team — we reply fast.</p>
      </a>
    </div>
    <div id="no-results" class="hidden text-center py-8">
      <p class="text-sm" style="color:rgba(255,255,255,.4)">No pages found matching your search. Try something else or <a href="/contact" class="underline text-purple-400">contact support</a>.</p>
    </div>
  </section>

  <div class="relative z-10 w-full border-t" style="border-color:rgba(255,255,255,.07)">
    <div class="max-w-6xl mx-auto px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-3">
      <div class="flex items-center gap-6">
        <div class="flex items-center gap-2">
          <span class="w-2 h-2 rounded-full blink" style="background:#13b3b4"></span>
          <span class="text-xs" style="color:rgba(255,255,255,.4)">All systems operational</span>
        </div>
        <a href="/" class="text-xs hover:text-white transition-colors" style="color:rgba(255,255,255,.3)">View status page →</a>
      </div>
      <div class="flex items-center gap-4 text-xs" style="color:rgba(255,255,255,.25)">
        <span id="error-id-display">Error ID: <span class="font-mono">LMN-<%= displayCode %>-<span id="rand-id">----</span></span></span>
        <span id="ts-display"></span>
      </div>
    </div>
  </div>

</section>
</div>
