export function ThreeSteps() {
  const steps = [
    {
      image: "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe73e6c78251cc7c6de1e_Join.png",
      title: "Join",
      description: "It's super simple to join! Just one approval to join the best marketing solution team around.",
    },
    {
      image:
        "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/644b84254bdda05bc535bb94_Advertise%20(1)-2.png",
      title: "Advertise",
      description: "Share why you use Planpost AI with your audience or customers.",
    },
    {
      image: "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe76acb809e0f993e160d_Earn.png",
      title: "Earn",
      description: "Earn lifetime recurring commission, including renewals.",
    },
  ]

  return (
    <section className="py-16 px-6 bg-white">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8">
          {steps.map((step, index) => (
            <div key={index} className="flex flex-col items-center text-center">
              <div className="w-32 h-32 mb-6 flex items-center justify-center rounded-full p-1 bg-gradient-to-br from-[#7a60fa] to-[#6e55f7]">
                <div className="w-full h-full rounded-full flex items-center justify-center bg-black p-4">
                  <img src={step.image || "/placeholder.svg"} alt={step.title} className="w-20 h-20 object-contain" />
                </div>
              </div>
              <h3 className="text-2xl font-bold mb-3 text-gray-900">{step.title}</h3>
              <p className="text-gray-600 leading-relaxed max-w-xs">{step.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}