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

const WarrantyPolicy = () => {
    return (
        <StaticPage title="Chính Sách Bảo Hành" icon={CheckCircle} iconColor="text-green-400">
            <div className="bg-green-500/10 border border-green-500/30 rounded-xl p-4 mb-2">
                <p className="text-green-400 font-semibold text-center">
                    🛡️ Chúng tôi cam kết bảo hành 100% cho mọi sản phẩm đã mua!
                </p>
            </div>

            <section>
                <h2 className="text-xl font-bold text-white mb-3 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-green-500 rounded-full inline-block"></span>
                    1. Chính Sách Bảo Hành
                </h2>
                <p className="text-gray-400">
                    Tất cả tài khoản được bán tại shop đều được bảo hành theo đúng cam kết. Nếu tài khoản có vấn đề sau
                    khi mua, chúng tôi sẽ hỗ trợ đổi tài khoản khác hoặc hoàn tiền vào số dư.
                </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-green-500 rounded-full inline-block"></span>
                    2. Điều Kiện Bảo Hành
                </h2>
                <ul className="space-y-3 text-gray-400">
                    {[
                        { title: 'Bị thu hồi bởi chủ cũ', desc: 'Được đổi tài khoản mới ngay lập tức.' },
                        { title: 'Không đăng nhập được', desc: 'Được hỗ trợ trong vòng 24 giờ kể từ khi mua.' },
                        { title: 'Thông tin không đúng mô tả', desc: 'Được đổi hoặc hoàn tiền 100% vào số dư.' },
                    ].map((item, i) => (
                        <li key={i} className="bg-gray-800/50 rounded-xl p-4">
                            <p className="text-white font-semibold mb-1">✅ {item.title}</p>
                            <p className="text-gray-400 text-sm">{item.desc}</p>
                        </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-red-500 rounded-full inline-block"></span>
                    3. Trường Hợp Không Bảo Hành
                </h2>
                <ul className="space-y-2 text-gray-400">
                    {[
                        'Tài khoản bị khóa do người mua tự vi phạm điều khoản game.',
                        'Đã thay đổi thông tin (email, số điện thoại) sau khi mua.',
                        'Tài khoản bị khóa do gian lận, cheat, hack.',
                        'Người mua tự tiết lộ thông tin cho người khác dẫn đến mất tài khoản.',
                        'Quá thời hạn bảo hành được ghi trên sản phẩm.',
                    ].map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <span className="text-red-400 mt-0.5">✗</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-green-500 rounded-full inline-block"></span>
                    4. Cách Yêu Cầu Bảo Hành
                </h2>
                <div className="space-y-3">
                    {[
                        { step: '1', text: 'Liên hệ fanpage Facebook của shop.' },
                        { step: '2', text: 'Cung cấp mã đơn hàng và mô tả vấn đề gặp phải.' },
                        { step: '3', text: 'Đội ngũ hỗ trợ sẽ kiểm tra và xử lý trong vòng 1-6 giờ.' },
                        { step: '4', text: 'Nhận tài khoản mới hoặc hoàn tiền vào số dư.' },
                    ].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 WarrantyPolicy;
