fix(web): frontend quality — XSS, error states, a11y, image optimization, security headers

- Whitelist OAuth error codes; never render raw URL params (XSS fix)
- Add error state UI with retry button for API failures on homepage and search
- Use <article> for property cards with ARIA labels and semantic list markup
- Replace raw <img> with Next.js <Image> across all listing/gallery/KYC pages
- Add security headers (X-Content-Type-Options, X-Frame-Options, etc.) in next.config.js
- Gate console.error behind NODE_ENV check in global error boundary
- Mapbox confirmed npm-bundled (SRI N/A)

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/listings/image-gallery.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import Image from 'next/image';
 import { cn } from '@/lib/utils';
 import type { PropertyMedia } from '@/lib/listings-api';
 
@@ -30,10 +31,13 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
     <div className={cn('space-y-3', className)}>
       {/* Main image */}
       <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
-        <img
-          src={images[selectedIndex]?.url}
+        <Image
+          src={images[selectedIndex]?.url ?? ''}
           alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
-          className="h-full w-full object-cover"
+          fill
+          sizes="(max-width: 768px) 100vw, 60vw"
+          className="object-cover"
+          priority={selectedIndex === 0}
         />
         {images.length > 1 && (
           <>
@@ -66,14 +70,16 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
               key={img.id}
               onClick={() => setSelectedIndex(index)}
               className={cn(
-                'h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
+                'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
                 index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
               )}
             >
-              <img
+              <Image
                 src={img.url}
                 alt={img.caption || `Thumbnail ${index + 1}`}
-                className="h-full w-full object-cover"
+                fill
+                sizes="64px"
+                className="object-cover"
               />
             </button>
           ))}