'use client';

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

export default function CompoGuarantee() {
    const features = [
        {
            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",
            gradient: "from-red-500 to-orange-500",
            bgGradient: "from-red-50 to-orange-50",
            link: ROUTES.REFUND_POLICY,
            linkText: "Chi tiết"
        },
        {
            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",
            gradient: "from-indigo-500 to-purple-500",
            bgGradient: "from-indigo-50 to-purple-50",
            link: null,
            linkText: null
        }
    ];

    return (
        <div className="container">
            <div className="max-w-6xl mx-auto">
                {/* Horizontal Layout: 60-40 */}
                <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
                    {/* Left Card - 60% (3 columns) */}
                    <div className="lg:col-span-3">
                        <div className="relative bg-white rounded-3xl border-2 border-gray-200 hover:border-red-400 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full">
                            <div className={`absolute inset-0 bg-gradient-to-br ${features[0].bgGradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />

                            <div className="relative flex flex-col sm:flex-row items-center gap-4 p-6 h-full">
                                <div className="relative flex-shrink-0">
                                    <div className={`absolute inset-0 bg-gradient-to-br ${features[0].gradient} rounded-2xl blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-300`} />
                                    <div className={`relative w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br ${features[0].bgGradient} rounded-2xl flex items-center justify-center p-4 shadow-lg`}>
                                        <Image
                                            src={features[0].image}
                                            alt={features[0].title}
                                            width={80}
                                            height={80}
                                            className="w-full h-full object-contain"
                                        />
                                    </div>
                                </div>

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

                                <div className={`absolute top-3 right-3 w-9 h-9 rounded-full bg-gradient-to-br ${features[0].gradient} text-white flex items-center justify-center shadow-lg`}>
                                    <Shield className="w-5 h-5" />
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Right Card - 40% (2 columns) */}
                    <div className="lg:col-span-2">
                        <div className="relative bg-white rounded-3xl border-2 border-gray-200 hover:border-indigo-400 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full">
                            <div className={`absolute inset-0 bg-gradient-to-br ${features[1].bgGradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />

                            <div className="relative flex flex-col items-center justify-center gap-4 p-6 text-center h-full">
                                <div className="relative flex-shrink-0">
                                    <div className={`absolute inset-0 bg-gradient-to-br ${features[1].gradient} rounded-2xl blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-300`} />
                                    <div className={`relative w-20 h-20 bg-gradient-to-br ${features[1].bgGradient} rounded-2xl flex items-center justify-center p-4 shadow-lg`}>
                                        <Image
                                            src={features[1].image}
                                            alt={features[1].title}
                                            width={80}
                                            height={80}
                                            className="w-full h-full object-contain"
                                        />
                                    </div>
                                </div>

                                <div>
                                    <p className="text-sm font-semibold text-gray-600 mb-1 group-hover:text-gray-700">
                                        {features[1].subtitle}
                                    </p>
                                    <h3 className="text-xl sm:text-2xl font-extrabold mb-2 text-gray-900 group-hover:text-indigo-600 transition-all duration-300">
                                        {features[1].title}
                                    </h3>
                                    <p className="text-gray-600 text-sm leading-relaxed font-medium group-hover:text-gray-700">
                                        {features[1].description}
                                    </p>
                                </div>

                                <div className={`absolute top-3 right-3 w-9 h-9 rounded-full bg-gradient-to-br ${features[1].gradient} text-white flex items-center justify-center shadow-lg`}>
                                    <Sparkles className="w-5 h-5" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
