"use client";

interface JourneyStep {
  id: number;
  stepNumber: number;
  title: string;
  description: string | null;
}

export default function JourneySection({ steps }: { steps: JourneyStep[] }) {
  return (
    <section className="py-10 bg-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <h2 className="text-lg font-bold text-slate-900 mb-6 text-center">Your Journey in 6 Steps</h2>
        <div className="relative">
          {/* Connection Line */}
          <div className="hidden md:block absolute top-5 left-0 right-0 h-0.5 bg-slate-200 mx-16" />

          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
            {steps.map((step, i) => (
              <div
                key={step.id}
                className="flex flex-col items-center text-center group animate-fade-in-up"
                style={{ animationDelay: `${i * 80}ms` }}
              >
                <div className="relative z-10 w-10 h-10 rounded-full bg-green-600 text-white text-sm font-bold flex items-center justify-center mb-2 group-hover:scale-110 group-hover:bg-purple-600 transition-all shadow-md">
                  {step.stepNumber}
                </div>
                <p className="text-xs font-semibold text-slate-700 group-hover:text-green-600 transition-colors">
                  {step.title}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}