import { processStepsData, commonDescriptions } from '../../data/siteData'

export default function ProcessSteps() {
  return (
    <section
      className="relative"
      id="process"
      style={{
        backgroundImage: "url('/src/assets/images/2.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      {/* Overlay */}
      <div
        className="absolute inset-0 z-0"
        style={{ background: 'linear-gradient(45deg, #17449e, rgba(0, 0, 0, 0.8))', opacity: 0.9 }}
      />

      <div className="container mx-auto px-4 py-24 relative z-10">
        {/* Section Header */}
        <div className="text-center mx-auto">
          <h3 className="text-3xl md:text-4xl font-bold mb-4 font-sans" style={{ color: '#ffffff' }}>
            {commonDescriptions.processTitle}
          </h3>
          <p className="text-white my-3">
            {commonDescriptions.sectionDesc}
          </p>
        </div>

        {/* Steps */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-5 pt-3 text-center">
          {processStepsData.map((step) => (
            <div key={step.id} className="three-grids-columns">
              <div className="icon mb-4">
                <span className="inline-flex items-center justify-center w-[50px] h-[50px] rounded-full bg-secondary text-white text-2xl">
                  {step.number}
                </span>
              </div>
              <h4 className="text-[22px] font-semibold mt-5 mb-4 font-sans" style={{ color: '#ffffff' }}>
                {step.title}
              </h4>
              <p className="text-white/70 leading-6">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}