import { RefreshCw } from 'lucide-react';
import StaticPage from './StaticPage';

const GuideChangeInfo = () => {
    return (
        <StaticPage title="Hướng Dẫn Đổi Thông Tin" icon={RefreshCw} iconColor="text-indigo-400">
            <div className="bg-indigo-500/10 border border-indigo-500/30 rounded-xl p-4 mb-2">
                <p className="text-indigo-300 text-sm">
                    💡 Bạn có thể đổi mật khẩu và cập nhật thông tin cá nhân trong trang hồ sơ tài khoản.
                </p>
            </div>

            <section>
                <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-indigo-400 rounded-full inline-block"></span>
                    Đổi Mật Khẩu
                </h2>
                <div className="space-y-3">
                    {[
                        { step: 1, text: 'Đăng nhập vào tài khoản của bạn.' },
                        { step: 2, text: 'Nhấn vào tên đăng nhập ở góc trên bên phải → chọn "Trang Cá Nhân".' },
                        { step: 3, text: 'Chọn tab "Bảo Mật" hoặc tìm phần "Đổi Mật Khẩu".' },
                        { step: 4, text: 'Nhập mật khẩu hiện tại, mật khẩu mới và xác nhận mật khẩu mới.' },
                        { step: 5, text: 'Nhấn "Lưu Thay Đổi". Đăng xuất và đăng nhập lại bằng mật khẩu mới.' },
                    ].map((item) => (
                        <div key={item.step} className="flex items-start gap-3">
                            <div className="w-7 h-7 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold text-sm shrink-0">
                                {item.step}
                            </div>
                            <p className="text-gray-400 pt-0.5">{item.text}</p>
                        </div>
                    ))}
                </div>
            </section>

            <hr className="border-gray-700" />

            <section>
                <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-indigo-400 rounded-full inline-block"></span>
                    Quên Mật Khẩu
                </h2>
                <div className="space-y-3">
                    {[
                        { step: 1, text: 'Truy cập trang đăng nhập, nhấn "Quên Mật Khẩu".' },
                        { step: 2, text: 'Nhập địa chỉ email đã đăng ký tài khoản.' },
                        { step: 3, text: 'Kiểm tra hộp thư email để nhận mã OTP.' },
                        { step: 4, text: 'Nhập mã OTP và đặt mật khẩu mới.' },
                        { step: 5, text: 'Đăng nhập bằng mật khẩu mới vừa đặt.' },
                    ].map((item) => (
                        <div key={item.step} className="flex items-start gap-3">
                            <div className="w-7 h-7 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold text-sm shrink-0">
                                {item.step}
                            </div>
                            <p className="text-gray-400 pt-0.5">{item.text}</p>
                        </div>
                    ))}
                </div>
            </section>

            <hr className="border-gray-700" />

            <section>
                <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-orange-500 rounded-full inline-block"></span>
                    Những Điều Không Thể Thay Đổi
                </h2>
                <ul className="space-y-2 text-gray-400">
                    {[
                        { field: 'Tên đăng nhập', reason: 'là định danh cố định, không thể thay đổi sau khi tạo.' },
                        { field: 'Email đăng ký', reason: 'cần liên hệ hỗ trợ để thay đổi, kèm xác minh danh tính.' },
                    ].map((item, i) => (
                        <li key={i} className="bg-gray-800/50 rounded-xl p-3">
                            <strong className="text-white">{item.field}</strong>
                            <span className="text-gray-400"> {item.reason}</span>
                        </li>
                    ))}
                </ul>
            </section>
        </StaticPage>
    );
};

export default GuideChangeInfo;
