interface ProcessStep {
  num: string;
  title: string;
  desc: string;
}

interface ProcessSectionProps {
  title: string;
  steps: ProcessStep[];
}

export default function ProcessSection({ title, steps }: ProcessSectionProps) {
  return (
    <section className="py-8 sm:py-12 md:py-16 bg-gray-50">
      <div className="max-w-6xl mx-auto px-4">
        <div className="relative">
          <div className="text-center mb-6 sm:mb-8">
            <div className="inline-block bg-orange-500 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-3 md:py-4 rounded-full text-lg sm:text-xl font-bold">
              {title}
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            {steps.map((step, index) => (
              <div
                key={index}
                className={`p-4 sm:p-6 rounded-lg border-2 ${
                  index % 2 === 0
                    ? 'bg-blue-600 text-white border-blue-600'
                    : 'bg-white text-gray-800 border-gray-300'
                }`}
              >
                <div className="flex items-center mb-3 sm:mb-4">
                  <div
                    className={`w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center font-bold mr-2 sm:mr-3 text-sm sm:text-base ${
                      index % 2 === 0
                        ? 'bg-white text-blue-600'
                        : 'bg-blue-600 text-white'
                    }`}
                  >
                    {step.num}
                  </div>
                  <h3 className="text-base sm:text-lg font-bold">
                    {step.title}
                  </h3>
                </div>
                <p className="text-xs sm:text-sm leading-relaxed">
                  {step.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}