'use client';

import { ROUTES } from '@/config/routes';
import { ArrowRight, Shield, Sparkles, Camera, Users, Video, Headphones } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

export default function FeaturesTree() {
    const features = [
        {
            id: 1,
            title: "Đội Ngũ Chuyên Nghiệp",
            subtitle: "Kinh nghiệm dày dặn",
            description: "Đội ngũ giàu kinh nghiệm, sáng tạo và tận tâm, mang đến sản phẩm mang đậm dấu ấn thương hiệu.",
            image: "/images/about/8-2-team-work-png-picture.png",
            icon: Users,
            gradient: "from-red-500 to-orange-500",
            bgGradient: "from-red-50 to-orange-50",
            hoverColor: "text-red-600",
            position: "top"
        },
        {
            id: 2,
            title: "Thiết Bị Hiện Đại",
            subtitle: "Công nghệ tiên tiến",
            description: "Trang bị máy quay, ánh sáng và hệ thống xử lý hậu kỳ hiện đại, đảm bảo chất lượng hình ảnh sắc nét.",
            image: "/images/about/camera.png",
            icon: Camera,
            gradient: "from-blue-500 to-indigo-500",
            bgGradient: "from-blue-50 to-indigo-50",
            hoverColor: "text-blue-600",
            position: "middle-left"
        },
        {
            id: 3,
            title: "Livestream Chuyên Nghiệp",
            subtitle: "Phát sóng trực tiếp",
            description: "Hình ảnh rõ nét, âm thanh sống động, hỗ trợ từ A–Z setup và kỹ thuật.",
            image: "/images/about/studio.png",
            icon: Video,
            gradient: "from-purple-500 to-pink-500",
            bgGradient: "from-purple-50 to-pink-50",
            hoverColor: "text-purple-600",
            position: "middle-right"
        },
        {
            id: 4,
            title: "Hoàn Tiền 100%",
            subtitle: "Cam kết trải nghiệm",
            description: "Chính sách hoàn tiền nếu không hài lòng",
            image: "/images/icon/camket.png",
            icon: Shield,
            gradient: "from-orange-500 to-red-500",
            bgGradient: "from-orange-50 to-red-50",
            hoverColor: "text-orange-600",
            link: ROUTES.REFUND_POLICY,
            linkText: "Chi tiết",
            position: "bottom-left"
        },
        {
            id: 5,
            title: "Thương Hiệu",
            subtitle: "Cùng Xây Dựng",
            description: "Đồng hành phát triển thương hiệu",
            image: "/images/icon/handshake.png",
            icon: Sparkles,
            gradient: "from-indigo-500 to-purple-500",
            bgGradient: "from-indigo-50 to-purple-50",
            hoverColor: "text-indigo-600",
            position: "bottom-right"
        },
        {
            id: 6,
            title: "Hỗ Trợ 24/7",
            subtitle: "Luôn Đồng Hành",
            description: "Tư vấn và hỗ trợ kỹ thuật mọi lúc mọi nơi",
            image: "/images/about/Ho-tro.png",
            icon: Headphones,
            gradient: "from-green-500 to-emerald-500",
            bgGradient: "from-green-50 to-emerald-50",
            hoverColor: "text-green-600",
            position: "bottom-center"
        }
    ];

    return (
        <section className="w-full relative py-8 md:py-12 lg:py-16">
            {/* Họa tiết trang trí */}
            <div className="absolute inset-0 w-full h-full pointer-events-none z-0">
                <div className="absolute top-10 left-10 w-64 h-64 bg-blue-200/30 rounded-full blur-3xl"></div>
                <div className="absolute bottom-10 right-10 w-64 h-64 bg-purple-200/30 rounded-full blur-3xl"></div>
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-red-200/20 rounded-full blur-3xl"></div>
            </div>

            <div className="container max-w-7xl mx-auto relative z-10">


                {/* Cards Layout */}
                <div className="relative" style={{ zIndex: 1 }}>
                    {/* SVG Connecting Lines - Hidden on mobile, visible on lg+ */}
                    <svg
                        className="absolute inset-0 w-full h-full pointer-events-none hidden lg:block"
                        style={{ zIndex: 5 }}
                        viewBox="0 0 100 100"
                        preserveAspectRatio="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <defs>
                            {/* Gradient definitions for lines */}
                            <linearGradient id="lineGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stopColor="#ef4444" stopOpacity="0.8" />
                                <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.8" />
                            </linearGradient>
                            <linearGradient id="lineGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stopColor="#ef4444" stopOpacity="0.8" />
                                <stop offset="100%" stopColor="#a855f7" stopOpacity="0.8" />
                            </linearGradient>
                            <linearGradient id="lineGradient3" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.8" />
                                <stop offset="100%" stopColor="#f97316" stopOpacity="0.8" />
                            </linearGradient>
                            <linearGradient id="lineGradient4" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.8" />
                                <stop offset="100%" stopColor="#10b981" stopOpacity="0.8" />
                            </linearGradient>
                            <linearGradient id="lineGradient5" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stopColor="#a855f7" stopOpacity="0.8" />
                                <stop offset="100%" stopColor="#10b981" stopOpacity="0.8" />
                            </linearGradient>
                            <linearGradient id="lineGradient6" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stopColor="#a855f7" stopOpacity="0.8" />
                                <stop offset="100%" stopColor="#6366f1" stopOpacity="0.8" />
                            </linearGradient>
                        </defs>

                        {/* Line from Top card to Left middle card */}
                        <path
                            d="M 50 18 Q 35 32, 25 42"
                            stroke="url(#lineGradient1)"
                            strokeWidth="0.3"
                            fill="none"
                            className="animate-pulse"
                        />

                        {/* Line from Top card to Right middle card */}
                        <path
                            d="M 50 18 Q 65 32, 75 42"
                            stroke="url(#lineGradient2)"
                            strokeWidth="0.3"
                            fill="none"
                            className="animate-pulse"
                            style={{ animationDelay: '0.2s' }}
                        />

                        {/* Line from Left middle card to Bottom left card */}
                        <path
                            d="M 25 56 Q 20 68, 16.66 78"
                            stroke="url(#lineGradient3)"
                            strokeWidth="0.3"
                            fill="none"
                            className="animate-pulse"
                            style={{ animationDelay: '0.4s' }}
                        />

                        {/* Line from Left middle card to Bottom center card */}
                        <path
                            d="M 25 56 Q 35 68, 50 78"
                            stroke="url(#lineGradient4)"
                            strokeWidth="0.3"
                            fill="none"
                            className="animate-pulse"
                            style={{ animationDelay: '0.6s' }}
                        />

                        {/* Line from Right middle card to Bottom center card */}
                        <path
                            d="M 75 56 Q 65 68, 50 78"
                            stroke="url(#lineGradient5)"
                            strokeWidth="0.3"
                            fill="none"
                            className="animate-pulse"
                            style={{ animationDelay: '0.8s' }}
                        />

                        {/* Line from Right middle card to Bottom right card */}
                        <path
                            d="M 75 56 Q 80 68, 83.33 78"
                            stroke="url(#lineGradient6)"
                            strokeWidth="0.3"
                            fill="none"
                            className="animate-pulse"
                            style={{ animationDelay: '1s' }}
                        />
                    </svg>

                    {/* Top Card */}
                    <div className="mx-auto w-full lg:w-[60%] mb-12 relative z-10">
                        <FeatureCard feature={features[0]} />
                    </div>

                    {/* Middle Row - 2 Cards */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12 relative z-10">
                        <div>
                            <FeatureCard feature={features[1]} />
                        </div>

                        <div>
                            <FeatureCard feature={features[2]} />
                        </div>
                    </div>

                    {/* Bottom Row - 3 Cards (Hexagon shape) */}
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 relative z-10">
                        <div>
                            <FeatureCard feature={features[3]} />
                        </div>

                        <div>
                            <FeatureCard feature={features[5]} />
                        </div>

                        <div>
                            <FeatureCard feature={features[4]} />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

interface FeatureCardProps {
    feature: any;
    isHorizontal?: boolean;
}

function FeatureCard({ feature, isHorizontal = false }: FeatureCardProps) {
    const Icon = feature.icon;

    return (
        <div className="relative rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 group h-full bg-white border-2 border-gray-200 hover:border-red-400 overflow-hidden">
            <div className={`relative flex ${isHorizontal ? 'flex-col sm:flex-row' : 'flex-col'} items-center gap-3 p-5 ${!isHorizontal && 'text-center'} h-full ${isHorizontal ? '' : 'justify-center'}`}>
                <div
                    className="relative flex-shrink-0"
                >
                    <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} rounded-xl blur-lg opacity-30 group-hover:opacity-50 transition-opacity duration-300`} />
                    <div className={`relative w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br ${feature.bgGradient} rounded-xl flex items-center justify-center p-3 shadow-lg`}>
                        <Image
                            src={feature.image}
                            alt={feature.title}
                            width={64}
                            height={64}
                            className="w-full h-full object-contain"
                        />
                    </div>
                </div>

                <div className={`flex-1 ${isHorizontal ? 'text-center sm:text-left' : 'text-center'}`}>
                    <p className="text-xs md:text-sm font-semibold text-gray-600 mb-1 group-hover:text-gray-700">
                        {feature.subtitle}
                    </p>
                    <h3 className={`text-lg sm:text-xl ${isHorizontal && 'sm:text-2xl'} font-extrabold mb-1.5 text-gray-900 group-hover:${feature.hoverColor} transition-all duration-300`}>
                        {feature.title}
                    </h3>
                    <p className="text-gray-600 text-xs sm:text-sm leading-relaxed font-medium group-hover:text-gray-700">
                        {feature.description}
                        {feature.link && (
                            <>
                                {' - '}
                                <Link
                                    href={feature.link}
                                    className="text-red-600 font-bold hover:text-red-700 hover:underline inline-flex items-center gap-1 group/link"
                                >
                                    {feature.linkText}
                                    <ArrowRight className="w-3 h-3 group-hover/link:translate-x-1 transition-transform" />
                                </Link>
                            </>
                        )}
                    </p>
                </div>

                <div className={`absolute top-2 right-2 w-8 h-8 rounded-full bg-gradient-to-br ${feature.gradient} text-white flex items-center justify-center shadow-lg`}>
                    <Icon className="w-4 h-4" />
                </div>
            </div>
        </div>
    );
}
