Wdipl-react/components/StepsIllustrated.tsx

import React from "react";
import { motion } from "framer-motion";
import { FileText, Palette, Code, Rocket } from "lucide-react";
import { GridPattern } from "./GridPattern";

// Define the step interface
interface Step {
  title: string;
  description: string;
  icon: React.ComponentType<any> | React.ReactElement;
  color?: string; // Make color optional
  number?: string;
  details?: string[];
}

interface StepsIllustratedProps {
  title?: string;
  subtitle?: string;
  steps?: Step[];
}

const defaultSteps: Step[] = [
  {
    title: "Define Scope",
    description: "We analyze your requirements and create a detailed project roadmap with clear timelines.",
    icon: FileText,
    color: "from-blue-500 to-cyan-500"
  },
  {
    title: "Design UI/UX",
    description: "Our designers create intuitive, user-centered interfaces that align with your brand.",
    icon: Palette,
    color: "from-purple-500 to-pink-500"
  },
  {
    title: "Develop with Agile Sprints",
    description: "We build your product using agile methodology with regular updates and feedback loops.",
    icon: Code,
    color: "from-green-500 to-emerald-500"
  },
  {
    title: "Test, Launch & Scale",
    description: "Comprehensive testing, smooth deployment, and ongoing support for continuous growth.",
    icon: Rocket,
    color: "from-[#E5195E] to-orange-500"
  }
];

interface Step {
  title: string;
  description: string;
  icon: React.ComponentType<any> | React.ReactElement;
  color?: string; // Make color optional
  number?: string;
  details?: string[];
}

const StepCard = ({ step, index, totalSteps }: { step: Step; index: number; totalSteps: number }) => {
  // Define default colors if not provided
  const defaultColors = [
    "from-blue-500 to-cyan-500",
    "from-purple-500 to-pink-500", 
    "from-green-500 to-emerald-500",
    "from-[#E5195E] to-orange-500"
  ];
  
  const color = step.color || defaultColors[index] || "from-blue-500 to-cyan-500";
  
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: index * 0.2 }}
      viewport={{ once: true }}
      className="relative group"
    >
      {/* Connection Line */}
      {index < totalSteps - 1 && (
        <div className="hidden lg:block absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-white/20 to-transparent z-0" />
      )}
      
      <div className="relative z-10 text-center">
        <div className="mb-6">
          <div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
            {/* Handle both React components and JSX elements */}
            {typeof step.icon === 'function' ? (
              <step.icon className="w-10 h-10 text-white" />
            ) : (
              React.cloneElement(step.icon as React.ReactElement, { 
                className: "w-10 h-10 text-white" 
              })
            )}
          </div>
          <div className="w-8 h-8 mx-auto rounded-full bg-[#E5195E] flex items-center justify-center text-white font-bold text-sm">
            {index + 1}
          </div>
        </div>
        
        <h3 className="text-xl font-semibold text-white mb-4">{step.title}</h3>
        <p className="text-[#CCCCCC] leading-relaxed max-w-sm mx-auto">{step.description}</p>
      </div>
    </motion.div>
  );
};

export const StepsIllustrated = ({ title, subtitle, steps }: StepsIllustratedProps) => {
  const finalSteps = steps ?? defaultSteps;
  const finalTitle = title ?? "How We Turn Your Idea Into a Scalable Product";
  const finalSubtitle = subtitle ?? "Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.";

  return (
    <section className="relative py-20 bg-[#121212] overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
      
      <div className="relative z-10 container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-4">
            {finalTitle}
          </h2>
          <p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
            {finalSubtitle}
          </p>
        </motion.div>
        
        <div className="grid lg:grid-cols-4 gap-12 max-w-6xl mx-auto">
          {finalSteps.map((step, index) => (
            <StepCard 
              key={step.title} 
              step={step} 
              index={index} 
              totalSteps={finalSteps.length} // Pass the total number of steps
            />
          ))}
        </div>
      </div>
    </section>
  );
};