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

const TermsOfService = () => {
    return (
        <StaticPage title="Điều Khoản Dịch Vụ" icon={FileText} iconColor="text-purple-400">
            <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>
                    1. Điều Khoản Chung
                </h2>
                <p className="text-gray-400">
                    Bằng cách truy cập và sử dụng website này, bạn đồng ý tuân theo các điều khoản và điều kiện sau đây.
                    Vui lòng đọc kỹ trước khi sử dụng dịch vụ. Nếu bạn không đồng ý với bất kỳ điều khoản nào, xin vui
                    lòng không sử dụng dịch vụ của chúng tôi.
                </p>
            </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>
                    2. Quy Định Tài Khoản
                </h2>
                <ul className="space-y-2 text-gray-400">
                    {[
                        'Mỗi người dùng chỉ được đăng ký một tài khoản. Việc tạo nhiều tài khoản có thể bị khóa vĩnh viễn.',
                        'Bạn chịu trách nhiệm bảo mật thông tin đăng nhập của mình.',
                        'Nghiêm cấm chia sẻ, cho thuê hoặc bán tài khoản cho người khác.',
                        'Tài khoản không hoạt động quá 365 ngày có thể bị thu hồi.',
                        'Chúng tôi có quyền khóa tài khoản vi phạm điều khoản mà không cần báo trước.',
                    ].map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-orange-500 mt-2 shrink-0"></span>
                            {item}
                        </li>
                    ))}
                </ul>
            </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>
                    3. Quy Định Mua Hàng
                </h2>
                <ul className="space-y-2 text-gray-400">
                    {[
                        'Tất cả các giao dịch mua hàng đều được xử lý tự động và không hoàn tiền.',
                        'Sau khi mua thành công, thông tin tài khoản sẽ được hiển thị ngay lập tức.',
                        'Vui lòng kiểm tra kỹ sản phẩm trước khi đặt mua.',
                        'Chúng tôi không chịu trách nhiệm nếu bạn mất tài khoản do lý do cá nhân sau khi mua.',
                    ].map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 shrink-0"></span>
                            {item}
                        </li>
                    ))}
                </ul>
            </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>
                    4. Nạp Tiền & Số Dư
                </h2>
                <ul className="space-y-2 text-gray-400">
                    {[
                        'Số dư trong tài khoản chỉ được sử dụng để mua sản phẩm trên website, không quy đổi ra tiền mặt.',
                        'Nạp tiền qua thẻ cào có thể bị trừ phí tùy theo mệnh giá thẻ.',
                        'Nạp tiền qua chuyển khoản ngân hàng được cộng đúng 100% sau khi xác nhận.',
                        'Chúng tôi không chịu trách nhiệm về sự chậm trễ do hệ thống ngân hàng.',
                    ].map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 mt-2 shrink-0"></span>
                            {item}
                        </li>
                    ))}
                </ul>
            </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>
                    5. Thay Đổi Điều Khoản
                </h2>
                <p className="text-gray-400">
                    Chúng tôi có quyền thay đổi các điều khoản này bất kỳ lúc nào. Mọi thay đổi sẽ được thông báo trên
                    website. Việc tiếp tục sử dụng dịch vụ sau khi thay đổi có nghĩa là bạn chấp nhận các điều khoản
                    mới.
                </p>
            </section>
        </StaticPage>
    );
};

export default TermsOfService;
