import React from 'react'
import { AnimateIn } from '@/components/AnimateIn'

interface Step {
  stepNumber: string
  title: string
  description?: string
}

interface ProcessStepsBlockProps {
  badge?: string
  heading: string
  subheading?: string
  steps?: Step[]
  backgroundImage?: string | { url?: string } | null
}

export function ProcessStepsBlockComponent(props: ProcessStepsBlockProps) {
  const { badge, heading, subheading, steps, backgroundImage } = props
  const bgUrl =
    (typeof backgroundImage === 'object' && backgroundImage?.url) ||
    (typeof backgroundImage === 'string' && backgroundImage) ||
    null

  return (
    <section
      className="relative py-28 border-b-2 border-dark bg-dark bg-fixed bg-center bg-cover overflow-hidden"
      style={bgUrl ? { backgroundImage: `url('${bgUrl}')` } : undefined}
    >
      {/* Dark overlay for contrast */}
      <div className="absolute inset-0 bg-dark/85 backdrop-blur-[1px]" />

      <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl relative z-10">
        <AnimateIn direction="up">
          <div className="max-w-3xl mb-14">
            {badge && (
              <div className="inline-block bg-primary text-dark text-xs font-black uppercase tracking-widest px-3 py-1 mb-4 border border-dark">
                {badge}
              </div>
            )}
            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-white">
              {heading}
            </h2>
            {subheading && (
              <p className="mt-4 text-base text-[#e0e0e0] leading-relaxed font-medium">
                {subheading}
              </p>
            )}
          </div>
        </AnimateIn>

        {steps && steps.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 items-stretch">
            {steps.map((step, idx) => (
              <AnimateIn key={idx} delay={idx * 100} direction="up" className="h-full">
                <div
                  className="bg-white/95 backdrop-blur-md border-2 border-dark p-6 h-full flex flex-col justify-between border-t-8 border-t-primary hover-lift transition-all shadow-xl"
                >
                  <div>
                    <div className="text-2xl font-black text-dark bg-primary border border-dark w-10 h-10 flex items-center justify-center mb-5 font-mono">
                      {step.stepNumber}
                    </div>
                    <h4 className="text-sm font-black uppercase tracking-tight text-dark mb-3">
                      {step.title}
                    </h4>
                    {step.description && (
                      <p className="text-xs text-[#555555] leading-relaxed">
                        {step.description}
                      </p>
                    )}
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        )}
      </div>
    </section>
  )
}