import Link from 'next/link';
import { loadStoreConfig } from '@/lib/storeConfig';

/**
 * 404 de la tienda. Antes caía en la de Next por defecto ("404 This page could not be
 * found.", en inglés, sin logo ni forma de volver): un link roto dejaba al comprador
 * afuera. Ahora usa el nombre y los colores del comercio, ofrece buscar y volver.
 */
export default async function NotFound() {
	const config = await loadStoreConfig();
	const nombre = config.identity?.name || 'la tienda';
	const primario = config.theme?.primary || '#0f766e';
	const inicial = nombre.trim().charAt(0).toUpperCase() || 'T';

	return (
		<main
			style={{
				minHeight: '100vh',
				display: 'grid',
				placeItems: 'center',
				padding: '32px 16px',
				background: config.theme?.background || '#f6f7f6',
				color: config.theme?.text || '#14211f',
				fontFamily: 'system-ui, "Segoe UI", Roboto, sans-serif'
			}}
		>
			<div
				style={{
					width: '100%',
					maxWidth: 460,
					display: 'grid',
					gap: 18,
					textAlign: 'center',
					justifyItems: 'center'
				}}
			>
				<Link
					href="/"
					aria-label={`Ir al inicio de ${nombre}`}
					style={{
						width: 56,
						height: 56,
						borderRadius: 14,
						display: 'grid',
						placeItems: 'center',
						background: primario,
						color: '#fff',
						fontWeight: 800,
						fontSize: 24,
						textDecoration: 'none'
					}}
				>
					{inicial}
				</Link>
				<p
					style={{
						margin: 0,
						fontSize: 13,
						letterSpacing: '0.08em',
						textTransform: 'uppercase',
						opacity: 0.7
					}}
				>
					{nombre}
				</p>
				<h1 style={{ margin: 0, fontSize: 28, lineHeight: 1.2 }}>No encontramos esta página</h1>
				<p style={{ margin: 0, opacity: 0.8, lineHeight: 1.55 }}>
					Puede que el link esté mal escrito o que el producto ya no esté publicado. Buscá lo que necesitás o
					volvé al inicio.
				</p>
				<form
					action="/"
					method="get"
					role="search"
					style={{ display: 'flex', gap: 8, width: '100%' }}
				>
					<label
						htmlFor="buscar-404"
						style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }}
					>
						Buscar productos
					</label>
					<input
						id="buscar-404"
						name="q"
						type="search"
						placeholder="Buscar productos, marcas o categorías"
						style={{
							flex: 1,
							minWidth: 0,
							height: 46,
							padding: '0 14px',
							borderRadius: 12,
							border: '1px solid rgba(20,33,31,0.18)',
							fontSize: 15
						}}
					/>
					<button
						type="submit"
						style={{
							height: 46,
							padding: '0 18px',
							borderRadius: 12,
							border: 0,
							background: primario,
							color: '#fff',
							fontWeight: 700,
							fontSize: 15,
							cursor: 'pointer'
						}}
					>
						Buscar
					</button>
				</form>
				<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
					<Link
						href="/"
						style={{ color: primario, fontWeight: 700 }}
					>
						Volver al inicio
					</Link>
					<Link
						href="/?seguimiento"
						style={{ color: primario, fontWeight: 700 }}
					>
						Seguir mi pedido
					</Link>
				</div>
			</div>
		</main>
	);
}