export function Header() {
	return (
		<header className="bg-gradient-to-r from-primary to-primary-400 p-6 rounded-t-xl">
			<div className="flex flex-col space-y-6">
				{/* 主标题区域 */}
				<div>
					<h1 className="text-3xl font-bold tracking-wider text-white">
						我发出的信件
					</h1>
					<p className="mt-2 text-blue-100 text-lg">
						清晰记录 • 实时跟踪 • 高效沟通
					</p>
				</div>

				{/* 服务特点说明 */}
				<div className="flex flex-wrap gap-6 text-sm text-white">
					<div className="flex items-center gap-2">
						<svg
							className="w-5 h-5"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24">
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth="2"
								d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
							/>
						</svg>
						<span>清晰记录发出的信件</span>
					</div>
					<div className="flex items-center gap-2">
						<svg
							className="w-5 h-5"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24">
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth="2"
								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
							/>
						</svg>
						<span>实时跟踪信件状态</span>
					</div>
					<div className="flex items-center gap-2">
						<svg
							className="w-5 h-5"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24">
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth="2"
								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>
						<span>高效沟通信件进展</span>
					</div>
				</div>

				{/* 服务宗旨说明 */}
				<div className="text-sm text-blue-100 border-t border-blue-400/30 pt-4">
					<p className="leading-relaxed">
						我们确保您能够清晰记录发出的信件，
						实时跟踪信件状态，并通过高效沟通机制，确保信件处理顺利进行。
					</p>
				</div>
			</div>
		</header>
	);
}