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

const SecurityPolicy = () => {
    return (
        <StaticPage title="Bảo Mật Tài Khoản" icon={Lock} iconColor="text-red-400">
            <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 mb-2">
                <p className="text-red-400 font-semibold">
                    🔐 Bảo mật tài khoản là trách nhiệm của bạn. Hãy đọc kỹ để tránh mất tài khoản và tài sả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-red-400 rounded-full inline-block"></span>
                    Nguyên Tắc Bảo Mật Cơ Bản
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    {[
                        { icon: '🔑', title: 'Mật khẩu mạnh', desc: 'Sử dụng ít nhất 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.' },
                        { icon: '🚫', title: 'Không chia sẻ', desc: 'Không chia sẻ mật khẩu cho bất kỳ ai, kể cả đội ngũ hỗ trợ của shop.' },
                        { icon: '💻', title: 'Thiết bị an toàn', desc: 'Chỉ đăng nhập trên thiết bị cá nhân, tránh máy tính công cộng.' },
                        { icon: '🔄', title: 'Đổi mật khẩu định kỳ', desc: 'Thay đổi mật khẩu ít nhất mỗi 3 tháng để tăng bảo mật.' },
                    ].map((item, i) => (
                        <div key={i} className="bg-gray-800/50 rounded-xl p-4">
                            <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>
            </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>
                    Cách Nhận Biết Lừa Đảo
                </h2>
                <div className="bg-orange-500/10 border border-orange-500/30 rounded-xl p-4">
                    <ul className="space-y-2 text-gray-400">
                        {[
                            'Nhân viên của shop KHÔNG BAO GIỜ yêu cầu mật khẩu của bạn.',
                            'Không click vào đường link lạ giả mạo website của shop.',
                            'Cảnh giác với các tài khoản giả mạo fanpage hoặc admin shop.',
                            'Không cài phần mềm lạ được gửi từ người không quen biết.',
                            'Các chương trình khuyến mãi quá hấp dẫn thường là bẫy lừa đảo.',
                        ].map((item, i) => (
                            <li key={i} className="flex items-start gap-2">
                                <span className="text-orange-400 mt-0.5">⚠️</span>
                                {item}
                            </li>
                        ))}
                    </ul>
                </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-green-500 rounded-full inline-block"></span>
                    Khi Tài Khoản Bị Xâm Phạm
                </h2>
                <div className="space-y-3">
                    {[
                        { step: 1, text: 'Đổi mật khẩu ngay lập tức nếu vẫn còn quyền truy cập.' },
                        { step: 2, text: 'Kiểm tra lịch sử giao dịch để phát hiện hoạt động bất thường.' },
                        { step: 3, text: 'Liên hệ ngay với đội ngũ hỗ trợ qua Facebook để được hỗ trợ.' },
                        { step: 4, text: 'Cung cấp bằng chứng sở hữu tài khoản để được hỗ trợ khẩn cấp.' },
                    ].map((item) => (
                        <div key={item.step} className="flex items-start gap-3">
                            <div className="w-7 h-7 rounded-full bg-green-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>
        </StaticPage>
    );
};

export default SecurityPolicy;
