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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
              />
            </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>
  );
}