import { Link } from 'react-router-dom';
import { Facebook, ChevronRight, Clock } from 'lucide-react';
import { useStore } from '../hooks/useStore';

const Footer = () => {
    const { dataWebsite, dataCategory } = useStore();

    // Lấy các category cấp cao nhất (parentId === null) để hiển thị
    const rootCategories = dataCategory?.filter((cat) => !cat.parentId && cat.isActive) || [];

    return (
        <footer className="bg-[#0f172a] text-gray-300 pt-16 pb-8 border-t-4 border-orange-500 relative overflow-hidden">
            {/* Background Glow Effect */}
            <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-3xl -translate-y-1/2 pointer-events-none"></div>
            <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-orange-600/10 rounded-full blur-3xl translate-y-1/2 pointer-events-none"></div>

            <div className="container mx-auto px-4 relative z-10">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                    {/* Column 1: Brand Info */}
                    <div className="space-y-6">
                        <Link to="/" className="block">
                            <img src={`${dataWebsite?.logo}`} alt="Shop Logo" className="h-12 object-contain" />
                        </Link>
                        <div className="space-y-4">
                            <p className="font-bold text-red-500 uppercase tracking-wide text-sm">
                                HỆ THỐNG BÁN ACC TỰ ĐỘNG ĐẢM BẢO UY TÍN VÀ CHẤT LƯỢNG.
                            </p>
                            <p className="text-sm text-gray-400 leading-relaxed">
                                Chúng tôi luôn lấy uy tín đặt trên hàng đầu đối với khách hàng, hy vọng chúng tôi sẽ
                                được phục vụ các bạn. Cám ơn!
                            </p>
                        </div>
                        <div className="flex flex-col gap-2 pt-2">
                            <Link
                                to="/chinh-sach-bao-mat"
                                className="flex items-center gap-2 text-sm hover:text-white transition-colors group"
                            >
                                <ChevronRight
                                    size={14}
                                    className="text-orange-500 group-hover:translate-x-1 transition-transform"
                                />
                                <span>Chính Sách Bảo Mật</span>
                            </Link>
                            <Link
                                to="/dieu-khoan-dich-vu"
                                className="flex items-center gap-2 text-sm hover:text-white transition-colors group"
                            >
                                <ChevronRight
                                    size={14}
                                    className="text-orange-500 group-hover:translate-x-1 transition-transform"
                                />
                                <span>Điều Khoản Dịch Vụ</span>
                            </Link>
                        </div>
                    </div>

                    {/* Column 2: General Info */}
                    <div>
                        <h3 className="text-white font-bold text-lg uppercase mb-6 pb-2 border-b border-gray-700 inline-block">
                            THÔNG TIN CHUNG
                        </h3>
                        <ul className="space-y-3">
                            {[
                                { label: 'Chính Sách Bảo Hành', link: '/chinh-sach-bao-hanh' },
                                { label: 'Hướng Dẫn Tạo Tài Khoản', link: '/huong-dan/dang-ky' },
                                { label: 'Hướng Dẫn Nạp Tiền', link: '/huong-dan/nap-tien' },
                                { label: 'Hướng Dẫn Đổi Thông Tin', link: '/huong-dan/doi-thong-tin' },
                                { label: 'Bảo Mật Tài Khoản', link: '/bao-mat-tai-khoan' },
                            ].map((item, idx) => (
                                <li key={idx}>
                                    <Link
                                        to={item.link}
                                        className="flex items-center gap-2 text-sm text-gray-400 hover:text-orange-400 transition-colors group"
                                    >
                                        <div className="w-1.5 h-1.5 rounded-full bg-gray-600 group-hover:bg-orange-500 transition-colors"></div>
                                        <span className="group-hover:translate-x-1 transition-transform">
                                            {item.label}
                                        </span>
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Column 3: Products từ Database */}
                    <div>
                        <h3 className="text-white font-bold text-lg uppercase mb-6 pb-2 border-b border-gray-700 inline-block">
                            SẢN PHẨM
                        </h3>
                        <ul className="space-y-3">
                            {rootCategories.slice(0, 6).map((cat) => (
                                <li key={cat._id}>
                                    <Link
                                        to={`/tai-khoan/${cat.slug}`}
                                        className="flex items-center gap-2 text-sm text-gray-400 hover:text-cyan-400 transition-colors group"
                                    >
                                        <ChevronRight
                                            size={14}
                                            className="text-gray-600 group-hover:text-cyan-400 transition-colors"
                                        />
                                        <span className="group-hover:translate-x-1 transition-transform">
                                            {cat.nameCategory}
                                        </span>
                                    </Link>
                                </li>
                            ))}
                            <li>
                                <Link
                                    to="/lucky-wheel"
                                    className="flex items-center gap-2 text-sm text-gray-400 hover:text-cyan-400 transition-colors group"
                                >
                                    <ChevronRight
                                        size={14}
                                        className="text-gray-600 group-hover:text-cyan-400 transition-colors"
                                    />
                                    <span className="group-hover:translate-x-1 transition-transform">
                                        🎰 Thử Vận May Quân Huy
                                    </span>
                                </Link>
                            </li>
                        </ul>
                    </div>

                    {/* Column 4: Customer Support */}
                    <div>
                        <h3 className="text-white font-bold text-lg uppercase mb-6 pb-2 border-b border-gray-700 inline-block">
                            HỖ TRỢ KHÁCH HÀNG
                        </h3>
                        <div className="space-y-6">
                            <a href={dataWebsite?.social} target="_blank" rel="noreferrer" className="block group">
                                <div className="bg-gradient-to-r from-blue-600 to-cyan-500 rounded-xl p-4 flex items-center gap-4 hover:shadow-lg hover:shadow-cyan-500/20 transition-all transform group-hover:-translate-y-1">
                                    <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
                                        <Facebook size={24} className="text-white" />
                                    </div>
                                    <div>
                                        <p className="text-white font-bold text-lg">CHAT VỚI CHÚNG TÔI</p>
                                        <p className="text-blue-100 text-xs">Hỗ trợ 24/7 qua Facebook</p>
                                    </div>
                                </div>
                            </a>

                            <div className="space-y-3 pt-2">
                                <div className="flex items-start gap-3 text-sm text-gray-400">
                                    <Clock size={16} className="text-orange-500 mt-0.5 shrink-0" />
                                    <div>
                                        <p className="text-white font-medium mb-1">THỜI GIAN HỖ TRỢ</p>
                                        <p>Sáng: 8h00 - 11h30</p>
                                        <p>Chiều: 13h00 - 21h00</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
};

export default Footer;
