import { Link } from '@inertiajs/react';
import { ArrowRight } from 'lucide-react';
import ServiceCardAnimation from '@/Components/ServiceCardAnimation';

interface ServiceCardProps {
    service: {
        id: number;
        slug: string;
        title: string;
        short: string;
        icon?: string;
        featured?: boolean;
    };
}

// Map service titles to gradient color schemes
const getServiceIcon = (title: string) => {
    const titleLower = title.toLowerCase();

    if (titleLower.includes('website design') || titleLower.includes('web design')) {
        return { gradientFrom: 'from-blue-500', gradientTo: 'to-cyan-500', borderFrom: 'from-blue-500/25', borderTo: 'to-cyan-500/25' };
    }
    if (titleLower.includes('software') || titleLower.includes('web application')) {
        return { gradientFrom: 'from-purple-500', gradientTo: 'to-pink-500', borderFrom: 'from-purple-500/25', borderTo: 'to-pink-500/25' };
    }
    if (titleLower.includes('e-commerce') || titleLower.includes('ecommerce')) {
        return { gradientFrom: 'from-emerald-500', gradientTo: 'to-teal-500', borderFrom: 'from-emerald-500/25', borderTo: 'to-teal-500/25' };
    }
    if (titleLower.includes('mobile') || titleLower.includes('app')) {
        return { gradientFrom: 'from-orange-500', gradientTo: 'to-amber-500', borderFrom: 'from-orange-500/25', borderTo: 'to-amber-500/25' };
    }
    if (titleLower.includes('ui/ux') || titleLower.includes('graphics') || titleLower.includes('design')) {
        return { gradientFrom: 'from-pink-500', gradientTo: 'to-rose-500', borderFrom: 'from-pink-500/25', borderTo: 'to-rose-500/25' };
    }
    if (titleLower.includes('team') || titleLower.includes('augmentation')) {
        return { gradientFrom: 'from-indigo-500', gradientTo: 'to-violet-500', borderFrom: 'from-indigo-500/25', borderTo: 'to-violet-500/25' };
    }

    return { gradientFrom: 'from-primary', gradientTo: 'to-blue-500', borderFrom: 'from-primary/25', borderTo: 'to-blue-500/25' };
};

export default function ServiceCard({ service }: ServiceCardProps) {
    const { gradientFrom, gradientTo, borderFrom, borderTo } = getServiceIcon(service.title);

    return (
        // Outer wrapper = gradient border via 2px padding trick
        <div className={`group relative rounded-2xl bg-gradient-to-br ${borderFrom} ${borderTo} p-[2px] shadow-md hover:shadow-2xl transition-all duration-300 hover:-translate-y-2`}>
            <div className="relative overflow-hidden rounded-[14px] bg-white h-full flex flex-col">

                {/* White header with subtle tinted decorative circles */}
                <div className="relative h-36 bg-white flex items-center justify-center overflow-hidden">
                    <div className={`absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br ${gradientFrom} ${gradientTo} opacity-10 rounded-full`} />
                    <div className={`absolute -bottom-6 -left-6 w-20 h-20 bg-gradient-to-br ${gradientFrom} ${gradientTo} opacity-10 rounded-full`} />
                    <div className={`absolute top-2 left-4 w-10 h-10 bg-gradient-to-br ${gradientFrom} ${gradientTo} opacity-5 rounded-full`} />

                    {/* Colored icon container — keeps gradient so the white-stroke animation stays visible */}
                    <div className={`relative z-10 w-16 h-16 bg-gradient-to-br ${gradientFrom} ${gradientTo} rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 overflow-hidden`}>
                        <ServiceCardAnimation title={service.title} />
                    </div>

                    {/* Featured badge */}
                    {service.featured && (
                        <div className="absolute top-3 right-3 bg-amber-400 text-amber-900 text-xs font-bold px-2.5 py-1 rounded-full shadow">
                            ★ Featured
                        </div>
                    )}
                </div>

                {/* Content area */}
                <div className="p-6 flex-1 flex flex-col">
                    <h3 className="text-lg font-bold mb-2 text-slate-900 group-hover:text-primary transition-colors duration-200 leading-snug">
                        {service.title}
                    </h3>
                    <p className="text-slate-500 text-sm leading-relaxed line-clamp-3 mb-5 flex-1">
                        {service.short}
                    </p>

                    <div className="flex justify-end">
                        <Link
                            href={`/services/${service.slug}`}
                            className={`inline-flex items-center gap-1.5 text-sm font-semibold text-white bg-gradient-to-r ${gradientFrom} ${gradientTo} px-4 py-2 rounded-lg hover:gap-3 hover:opacity-90 transition-all duration-200`}
                        >
                            Learn More
                            <ArrowRight className="w-4 h-4" />
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}