import { 
  PhoneCall, ClipboardCheck, Cpu, HeartHandshake, HelpCircle,
  ShieldAlert, Construction, Layers, MonitorDown, Server, Gauge, Zap, BookOpen 
} from "lucide-react";
import { SectionHeading } from "../common/SectionHeading";
import { mainProcessSteps } from "@/content/process";
import { ProcessStep } from "@/types/types";

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  PhoneCall,
  ClipboardCheck,
  Cpu,
  HeartHandshake,
  ShieldAlert,
  Construction,
  Layers,
  MonitorDown,
  Server,
  Gauge,
  Zap,
  BookOpen,
};

interface ProcessStepsProps {
  steps?: ProcessStep[];
  title?: string;
  subtitle?: string;
  eyebrow?: string;
}

export function ProcessSteps({ 
  steps = mainProcessSteps,
  title = "Prosty proces współpracy w 4 krokach",
  subtitle = "Od momentu kontaktu do pełnego uruchomienia i serwisu — dbamy o każdy detal na każdym etapie.",
  eyebrow = "Jak Działamy"
}: ProcessStepsProps) {
  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={eyebrow}
          title={title}
          subtitle={subtitle}
          align="center"
        />

        {/* Process Steps Timeline */}
        <div className="relative mt-12">
          {/* Desktop connecting line (only if few steps, otherwise wrap) */}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 gap-x-8 relative z-10">
            {steps.map((step, idx) => {
              const Icon = iconMap[step.icon || ""] || HelpCircle;
              return (
                <div key={idx} className="flex flex-col items-center text-center group">
                  {/* Circle Badge with Icon & Number */}
                  <div className="relative size-20 rounded-full bg-slate-50 border-2 border-slate-200 flex items-center justify-center text-primary group-hover:border-accent group-hover:bg-accent-light group-hover:text-accent transition-all duration-300 shadow-sm z-10">
                    {/* Step Number */}
                    {step.icon && iconMap[step.icon] && (
                      <span className="absolute -top-1.5 -right-1.5 size-6 rounded-full bg-accent text-white text-xs font-bold flex items-center justify-center font-heading border-2 border-white shadow-sm">
                        {step.number}
                      </span>
                    )}
                    {step.icon && iconMap[step.icon]
                      ? <Icon className="size-8 group-hover:scale-110 transition-transform duration-300" />
                      : <span className="text-2xl font-extrabold font-heading text-accent">{step.number}</span>
                    }
                  </div>

                  {/* Title & Description */}
                  <h3 className="text-lg font-bold text-primary font-heading mt-6 mb-2">
                    {step.title}
                  </h3>
                  <p className="text-sm text-text-muted leading-relaxed max-w-[240px]">
                    {step.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}