doctype html
html(lang="en")
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		meta(name="robots" content="noindex, nofollow")

		title Error #{status || 500} - Mokhtar Ali

		meta(name="description" content="An error occurred. Please try again later.")

		link(rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png")
		link(rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png")

		//- Resource hints for external domains
		link(rel="preconnect" href="https://fonts.googleapis.com")
		link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)

		//- Main CSS
		link(rel="stylesheet" href="/main.css")
		style.
			.skip-link {
				position: absolute;
				top: -40px;
				left: 0;
				background: #000;
				color: #fff;
				padding: 8px;
				z-index: 100;
				text-decoration: none;
				transition: top 0.3s;
			}

			.skip-link:focus,
			.skip-link:focus-visible {
				top: 0;
			}

			.error-link-primary {
				display: inline-block;
				padding: 0.75rem 1.5rem;
				background: #fff;
				color: #131313;
				text-decoration: none;
				font-weight: 500;
				font-family: 'Poppins', sans-serif;
				transition: opacity 0.3s;
			}

			.error-link-primary:hover,
			.error-link-primary:focus-visible {
				opacity: 0.8;
			}

		//- Font loading
		link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Oswald:wght@200;300;400;700&family=Poppins:wght@400;500;700&display=swap")
		noscript
			link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Oswald:wght@200;300;400;700&family=Poppins:wght@400;500;700&display=swap")

	body
		a.skip-link(href="#main-content") Skip to main content
		//- Main content with id for skip link
		main#main-content.content(role="main" style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #131313; color: #fff;")
			.error-container(style="text-align: center; padding: 2rem;")
				header
					h1.error-status(style="font-size: 6rem; font-weight: 700; margin: 0; font-family: 'Oswald', sans-serif;")= status || 500
					h2.error-title(style="font-size: 1.5rem; margin: 1rem 0; font-family: 'Poppins', sans-serif; font-weight: 500;") Oops! Something went wrong

				section.error-message(style="margin: 2rem 0;")
					p(style="font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem;")
						= (error && error.message) || 'An unexpected error occurred while processing your request.'

					if status === 404
						p(style="font-size: 1rem; opacity: 0.8;")
							| The page you're looking for doesn't exist or has been moved.
					else if status === 500
						p(style="font-size: 1rem; opacity: 0.8;")
							| Our team has been notified and we're working to fix the issue.

				nav.error-actions(style="margin-top: 2rem;")
					a(
						href="/"
						class="error-link-primary"
					) Back to Home

		//- Show stack trace only in development (T069, T072)
		if error && error.stack && process.env.NODE_ENV !== 'production'
			section.debug-info(style="margin-top: 3rem; padding: 1.5rem; background: #1a1a1a; border-left: 3px solid #ff4444; text-align: left; max-width: 800px; margin-left: auto; margin-right: auto;")
				h3(style="margin: 0 0 1rem 0; font-size: 1rem; color: #ff4444; font-family: 'Poppins', sans-serif;") Development Debug Information
				pre(style="overflow-x: auto; font-size: 0.85rem; line-height: 1.4; margin: 0; white-space: pre-wrap; word-wrap: break-word;")= error.stack

		//- Fallback: ensure content is visible when JS is disabled
		noscript
			style.
				.error-container { opacity: 1 !important; visibility: visible !important; }