frontend/src/components/FeatureCard.jsx

import React from 'react';

const FeatureCard = ({ icon, title, description, delay, isVisible, isNew, isPopular, isPremium }) => {
  return (
    <div
      className={`group relative bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-up ${
        isNew ? 'ring-2 ring-primary-200' : ''
      }`}
      style={{ animationDelay: delay }}
    >
      {/* Badge indicators */}
      <div className="absolute top-4 right-4 flex gap-2">
        {isNew && (
          <span className="px-3 py-1 bg-primary-100 text-primary-800 text-xs font-semibold rounded-full">
            New
          </span>
        )}
        {isPopular && (
          <span className="px-3 py-1 bg-accent-100 text-accent-800 text-xs font-semibold rounded-full">
            Popular
          </span>
        )}
        {isPremium && (
          <span className="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">
            Premium
          </span>
        )}
      </div>

      {/* Icon with enhanced styling */}
      <div className="relative mb-6">
        <div className="w-16 h-16 bg-gradient-to-br from-primary-50 to-accent-50 rounded-2xl flex items-center justify-center text-3xl transition-all duration-300 group-hover:scale-110">
          {icon}
        </div>
        {/* Glow effect on hover */}
        <div className="absolute inset-0 bg-gradient-to-br from-primary-200 to-accent-200 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-lg"></div>
      </div>

      {/* Title with enhanced typography */}
      <h3 className="text-xl font-bold text-gray-900 mb-4 leading-tight group-hover:text-primary-600 transition-colors duration-300">
        {title}
      </h3>

      {/* Description with enhanced styling */}
      <p className="text-gray-600 leading-relaxed mb-6 group-hover:text-gray-700 transition-colors duration-300">
        {description}
      </p>

      {/* Interactive elements */}
      <div className="flex items-center justify-between">
        <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
        <div className="mx-4">
          <svg className="w-5 h-5 text-primary-600 opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
        <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
      </div>

      {/* Hover overlay effect */}
      <div className="absolute inset-0 bg-gradient-to-br from-primary-50/20 to-accent-50/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </div>
  );
};

export default FeatureCard;