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

const GuideRegister = () => {
    const steps = [
        {
            step: 1,
            title: 'Truy cập trang đăng ký',
            desc: 'Nhấn vào nút "Đăng Ký" ở góc trên bên phải của trang chủ hoặc truy cập trực tiếp /register.',
            icon: '🌐',
        },
        {
            step: 2,
            title: 'Điền thông tin tài khoản',
            desc: 'Nhập tên đăng nhập (không dấu, không khoảng trắng), địa chỉ email hợp lệ và mật khẩu ít nhất 6 ký tự.',
            icon: '📝',
        },
        {
            step: 3,
            title: 'Xác nhận mật khẩu',
            desc: 'Nhập lại mật khẩu để xác nhận. Đảm bảo hai mật khẩu khớp nhau.',
            icon: '🔒',
        },
        {
            step: 4,
            title: 'Nhấn Đăng Ký',
            desc: 'Nhấn vào nút "Tạo Tài Khoản". Hệ thống sẽ tạo tài khoản và tự động đăng nhập cho bạn.',
            icon: '✅',
        },
        {
            step: 5,
            title: 'Bắt đầu mua sắm',
            desc: 'Sau khi đăng ký thành công, bạn có thể nạp tiền và mua sản phẩm ngay lập tức.',
            icon: '🎮',
        },
    ];

    return (
        <StaticPage title="Hướng Dẫn Tạo Tài Khoản" icon={UserPlus} iconColor="text-cyan-400">
            <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-xl p-4 mb-2">
                <p className="text-cyan-400 text-sm">
                    💡 <strong>Lưu ý:</strong> Hãy sử dụng email thật để có thể khôi phục mật khẩu khi cần thiết.
                </p>
            </div>

            <section>
                <h2 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-cyan-400 rounded-full inline-block"></span>
                    Các Bước Đăng Ký
                </h2>
                <div className="space-y-4">
                    {steps.map((item) => (
                        <div key={item.step} className="flex gap-4 bg-gray-800/50 rounded-xl p-4 hover:bg-gray-800/80 transition-colors">
                            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm shrink-0">
                                {item.step}
                            </div>
                            <div>
                                <p className="text-white font-semibold mb-1">
                                    {item.icon} {item.title}
                                </p>
                                <p className="text-gray-400 text-sm">{item.desc}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </section>

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

            <section>
                <h2 className="text-xl font-bold text-white mb-3 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-orange-500 rounded-full inline-block"></span>
                    Lưu Ý Quan Trọng
                </h2>
                <ul className="space-y-2 text-gray-400">
                    {[
                        'Tên đăng nhập không thể thay đổi sau khi tạo, hãy chọn cẩn thận.',
                        'Sử dụng mật khẩu mạnh kết hợp chữ hoa, chữ thường và số.',
                        'Không chia sẻ thông tin đăng nhập cho bất kỳ ai, kể cả đội ngũ hỗ trợ.',
                        'Mỗi email chỉ được đăng ký một tài khoản duy nhất.',
                    ].map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <span className="text-orange-400 mt-0.5">⚠️</span>
                            {item}
                        </li>
                    ))}
                </ul>
            </section>
        </StaticPage>
    );
};

export default GuideRegister;
