import { Wallet } from 'lucide-react';
import { Link } from 'react-router-dom';
import StaticPage from './StaticPage';

const GuideDeposit = () => {
    return (
        <StaticPage title="Hướng Dẫn Nạp Tiền" icon={Wallet} iconColor="text-yellow-400">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                <div className="bg-gradient-to-br from-yellow-600/20 to-orange-600/20 border border-yellow-500/30 rounded-xl p-4">
                    <p className="text-yellow-400 font-bold text-lg mb-1">💳 Nạp Thẻ Cào</p>
                    <p className="text-gray-400 text-sm">Hỗ trợ thẻ Viettel, Vinaphone, Mobifone</p>
                    <p className="text-orange-400 text-xs mt-2">⚠️ Phí nạp thẻ: 10-30% tùy mệnh giá</p>
                </div>
                <div className="bg-gradient-to-br from-green-600/20 to-cyan-600/20 border border-green-500/30 rounded-xl p-4">
                    <p className="text-green-400 font-bold text-lg mb-1">🏦 Chuyển Khoản NH</p>
                    <p className="text-gray-400 text-sm">Nhận 100% giá trị, không mất phí</p>
                    <p className="text-green-400 text-xs mt-2">✅ Được cộng ngay sau khi xác nhận</p>
                </div>
            </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-yellow-500 rounded-full inline-block"></span>
                    Cách 1: Nạp Thẻ Cào
                </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 "Nạp Tiền" → chọn tab "Nạp Thẻ Cào".' },
                        { step: 3, text: 'Chọn nhà mạng: Viettel / Vinaphone / Mobifone.' },
                        { step: 4, text: 'Nhập mệnh giá thẻ, số seri và mã thẻ.' },
                        { step: 5, text: 'Nhấn "Nạp Ngay" và chờ hệ thống xử lý (1-5 phút).' },
                    ].map((item) => (
                        <div key={item.step} className="flex items-start gap-3">
                            <div className="w-7 h-7 rounded-full bg-yellow-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-green-500 rounded-full inline-block"></span>
                    Cách 2: Chuyển Khoản Ngân Hàng
                </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 "Nạp Tiền" → chọn tab "Chuyển Khoản".' },
                        { step: 3, text: 'Xem thông tin tài khoản ngân hàng và mã nội dung chuyển khoản.' },
                        { step: 4, text: 'Chuyển tiền theo đúng nội dung được hiển thị.' },
                        { step: 5, text: 'Đội ngũ sẽ xác nhận và cộng tiền trong vòng 5-15 phút.' },
                    ].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>

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

            <section className="bg-red-500/10 border border-red-500/30 rounded-xl p-4">
                <h2 className="text-lg font-bold text-red-400 mb-2">⚠️ Lưu Ý Quan Trọng</h2>
                <ul className="space-y-1 text-gray-400 text-sm">
                    {[
                        'Nhập sai thông tin thẻ cào sẽ bị ghi nhận là thẻ lỗi và không được hoàn lại.',
                        'Chuyển khoản phải đúng nội dung mới được cộng tự động.',
                        'Không chuyển khoản qua các cổng trung gian không được chỉ định.',
                        'Mọi thắc mắc vui lòng liên hệ hỗ trợ qua Facebook.',
                    ].map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                            <span className="text-red-400">•</span>
                            {item}
                        </li>
                    ))}
                </ul>
            </section>

            <div className="text-center pt-2">
                <Link
                    to="/deposit/card"
                    className="inline-flex items-center gap-2 bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-bold px-8 py-3 rounded-xl hover:from-yellow-600 hover:to-orange-600 transition-all shadow-lg shadow-orange-500/20"
                >
                    💳 Nạp Tiền Ngay
                </Link>
            </div>
        </StaticPage>
    );
};

export default GuideDeposit;
