export function renderErrorPage(): string {
  return `<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Esta página no pudo cargar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body { font: 15px/1.5 Arial, sans-serif; background: #fafafa; color: #4a4a4a; display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 1.5rem; }
      .card { max-width: 28rem; width: 100%; text-align: center; padding: 2rem; }
      h1 { color: #4f758b; font-size: 1.25rem; margin: 0 0 0.5rem; }
      p { color: #6b7280; margin: 0 0 1.5rem; }
      .actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
      a, button { padding: 0.5rem 1rem; border-radius: 0.5rem; font: inherit; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
      .primary { background: #4f758b; color: #fff; }
      .secondary { background: #fff; color: #4a4a4a; border-color: #d0d0d0; }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>Esta página no pudo cargar</h1>
      <p>Ocurrió un error inesperado. Intenta nuevamente o vuelve al inicio.</p>
      <div class="actions">
        <button class="primary" onclick="location.reload()">Intentar nuevamente</button>
        <a class="secondary" href="/cotizador-wmc/">Ir al inicio</a>
      </div>
    </div>
  </body>
</html>`;
}
