import { RefreshCw, Cat } from 'lucide-react';

export function About() {
  return (
    <div className="max-w-3xl">
      <div className="flex items-center gap-4 mb-8">
        <div className="w-16 h-16 bg-black rounded-2xl flex items-center justify-center text-white shadow-md">
          <Cat className="w-10 h-10" />
        </div>
        <div>
          <h1 className="text-xl font-bold text-gray-900">ZCLAW</h1>
          <div className="text-sm text-gray-500">版本 0.1.0</div>
        </div>
      </div>

      <div className="space-y-4">
        <div className="bg-white rounded-xl border border-gray-200 p-4 flex justify-between items-center shadow-sm">
          <span className="text-sm text-gray-700">检查更新</span>
          <button className="text-xs text-white bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-lg flex items-center gap-1 transition-colors">
            <RefreshCw className="w-3 h-3" />
            检查更新
          </button>
        </div>

        <div className="bg-white rounded-xl border border-gray-200 p-4 flex justify-between items-center shadow-sm">
          <div>
            <div className="text-sm text-gray-700 mb-1">更新日志</div>
            <div className="text-xs text-gray-500">查看当前版本的更新内容</div>
          </div>
          <button className="text-xs px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
            更新日志
          </button>
        </div>
      </div>

      <div className="mt-12 text-center text-xs text-gray-400">
        2026 ZCLAW | Powered by OpenFang
      </div>
      <div className="text-center text-xs text-gray-400 space-y-1">
        <p>基于 OpenFang Rust Agent OS 构建</p>
        <div className="flex justify-center gap-4 mt-3">
          <a href="#" className="text-orange-500 hover:text-orange-600">隐私政策</a>
          <a href="#" className="text-orange-500 hover:text-orange-600">用户协议</a>
        </div>
      </div>
    </div>
  );
}