'use client';

import ModernBackground from '@/components/Common/ModernBackground';
import PricingStarter from "@/components/PricingStarter";
import {
    Award,
    Crown,
    Headphones,
    Package,
    Shield,
    Sparkles,
    Star,
    Tag,
    TrendingUp,
    Video,
    Zap
} from 'lucide-react';

export default function PricingClient() {
    const features = [
        {
            icon: <Sparkles className="w-6 h-6" />,
            text: "Tư vấn ý tưởng và kịch bản miễn phí",
            color: "bg-yellow-50 text-yellow-600"
        },
        {
            icon: <Video className="w-6 h-6" />,
            text: "Đội ngũ sản xuất chuyên nghiệp",
            color: "bg-red-50 text-red-600"
        },
        {
            icon: <Award className="w-6 h-6" />,
            text: "Thiết bị quay chụp hiện đại",
            color: "bg-blue-50 text-blue-600"
        },
        {
            icon: <TrendingUp className="w-6 h-6" />,
            text: "Hỗ trợ hậu kỳ và chỉnh sửa",
            color: "bg-green-50 text-green-600"
        },
        {
            icon: <Shield className="w-6 h-6" />,
            text: "Bàn giao file gốc chất lượng cao",
            color: "bg-purple-50 text-purple-600"
        },
        {
            icon: <Headphones className="w-6 h-6" />,
            text: "Bảo hành và hỗ trợ sau dự án",
            color: "bg-orange-50 text-orange-600"
        }
    ];

    const stats = [
        { number: "500+", label: "Dự án hoàn thành", icon: <Video className="w-6 h-6" /> },
        { number: "300+", label: "Khách hàng tin tưởng", icon: <Star className="w-6 h-6" /> },
        { number: "100%", label: "Khách hàng hài lòng", icon: <Award className="w-6 h-6" /> },
        { number: "24/7", label: "Hỗ trợ nhiệt tình", icon: <Headphones className="w-6 h-6" /> }
    ];

    return (
        <div className="relative w-full bg-gradient-to-br from-white via-red-50/30 to-orange-50/20 overflow-x-hidden">
            <ModernBackground />
            <section className="relative min-h-[500px] flex items-center overflow-hidden bg-gradient-to-br from-red-600 via-red-500 to-orange-500">
                <div className="absolute inset-0">
                    <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-400/20 rounded-full blur-3xl" />
                    <div className="absolute bottom-20 right-10 w-96 h-96 bg-red-300/20 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10 py-20">
                    <div className="text-center text-white max-w-4xl mx-auto">
                        <span className="inline-flex items-center gap-2 px-4 py-2 mt-4 bg-white/20 backdrop-blur-sm border border-white/30 rounded-full text-sm font-semibold uppercase tracking-wide mb-6">
                            <Tag className="w-4 h-4" />
                            Bảng Giá Dịch Vụ
                        </span>
                        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                            Giải Pháp <span className="text-yellow-300">Sản Xuất Video</span><br />
                            Phù Hợp Với Mọi Ngân Sách
                        </h1>
                        <p className="text-xl text-white/90 mb-8 max-w-3xl mx-auto leading-relaxed">
                            Chọn gói dịch vụ phù hợp với nhu cầu của bạn. Tất cả các gói đều đảm bảo
                            chất lượng cao nhất và dịch vụ chăm sóc khách hàng tận tâm.
                        </p>

                        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
                            {stats.map((stat, index) => (
                                <div
                                    key={index}
                                    className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 hover:bg-white/20 transition-all duration-300"
                                >
                                    <div className="flex justify-center mb-3 text-yellow-300">
                                        {stat.icon}
                                    </div>
                                    <div className="text-3xl font-bold mb-1">{stat.number}</div>
                                    <div className="text-sm text-white/80">{stat.label}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            <section className="relative pt-20 pb-16 bg-white">
                <div className="container relative z-10">
                    <div className="text-center mb-12">
                        <h2 className="text-3xl md:text-5xl font-extrabold text-black mb-4">
                            Những Gì Bạn <span className="text-red-500">Nhận Được</span>
                        </h2>
                        <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                            Tất cả các gói dịch vụ của chúng tôi đều bao gồm những lợi ích tuyệt vời này
                        </p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {features.map((feature, index) => (
                            <div
                                key={index}
                                className="group bg-white border-2 border-gray-200 p-6 rounded-2xl hover:border-red-500 hover:shadow-2xl transition-all duration-300"
                            >
                                <div className="flex items-center gap-4">
                                    <div className={`${feature.color} w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300 shadow-md`}>
                                        {feature.icon}
                                    </div>
                                    <div className="flex-1">
                                        <p className="text-gray-900 font-bold text-lg leading-relaxed">
                                            {feature.text}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <section className="relative bg-gradient-to-b from-gray-50 to-white py-16">
                <PricingStarter />
            </section>
        </div>
    );
}
