nofx/web/src/components/CryptoFeatureCard.tsx

import * as React from "react";
import { motion } from "framer-motion";
import { Check } from "lucide-react";
import { cn } from "../lib/utils";

interface CryptoFeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
  features: string[];
  className?: string;
  delay?: number;
}

export const CryptoFeatureCard = React.forwardRef<HTMLDivElement, CryptoFeatureCardProps>(
  ({ icon, title, description, features, className, delay = 0 }, ref) => {
    const [isHovered, setIsHovered] = React.useState(false);

    return (
      <motion.div
        ref={ref}
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, delay }}
        onHoverStart={() => setIsHovered(true)}
        onHoverEnd={() => setIsHovered(false)}
        className="relative h-full"
      >
        <div
          className={cn(
            "relative h-full overflow-hidden border-2 transition-all duration-300 rounded-xl",
            "bg-gradient-to-br from-[#000000] to-[#0A0A0A]",
            "border-[#1A1A1A] hover:border-[#F0B90B]/50",
            isHovered && "shadow-[0_0_20px_rgba(240,185,11,0.2)]",
            className
          )}
        >
          {/* Animated glow border effect */}
          <motion.div
            className="absolute inset-0 opacity-0 pointer-events-none"
            animate={{
              opacity: isHovered ? 1 : 0,
            }}
            transition={{ duration: 0.3 }}
          >
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#F0B90B]/20 to-transparent animate-[shimmer_2s_infinite]" />
          </motion.div>

          {/* Background pattern */}
          <div className="absolute inset-0 opacity-5">
            <div
              className="absolute inset-0"
              style={{
                backgroundImage: `radial-gradient(circle at 2px 2px, #F0B90B 1px, transparent 0)`,
                backgroundSize: "32px 32px",
              }}
            />
          </div>

          <div className="relative z-10 p-8 flex flex-col h-full">
            {/* Icon container */}
            <motion.div
              className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-xl"
              style={{
                background: 'linear-gradient(135deg, rgba(240, 185, 11, 0.2) 0%, rgba(240, 185, 11, 0.05) 100%)',
                border: '1px solid rgba(240, 185, 11, 0.3)'
              }}
              animate={{
                scale: isHovered ? 1.1 : 1,
                boxShadow: isHovered
                  ? "0 0 20px rgba(240, 185, 11, 0.4)"
                  : "0 0 0px rgba(240, 185, 11, 0)",
              }}
              transition={{ duration: 0.3 }}
            >
              <div style={{ color: 'var(--brand-yellow)' }}>{icon}</div>
            </motion.div>

            {/* Title */}
            <h3 className="text-2xl font-bold mb-3" style={{ color: 'var(--brand-light-gray)' }}>{title}</h3>

            {/* Description */}
            <p className="mb-6 flex-grow leading-relaxed" style={{ color: 'var(--text-secondary)' }}>{description}</p>

            {/* Features list */}
            <div className="space-y-3 mb-6">
              {features.map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -10 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: delay + index * 0.1 }}
                  className="flex items-start gap-3"
                >
                  <div className="mt-0.5 flex-shrink-0">
                    <div className="w-5 h-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(240, 185, 11, 0.2)' }}>
                      <Check className="w-3 h-3" style={{ color: 'var(--brand-yellow)' }} />
                    </div>
                  </div>
                  <span className="text-sm" style={{ color: 'var(--brand-light-gray)' }}>{feature}</span>
                </motion.div>
              ))}
            </div>

          </div>
          
        </div>
      </motion.div>
    );
  }
);

CryptoFeatureCard.displayName = "CryptoFeatureCard";