import ScrollReveal from "@/components/ScrollReveal";

export default function HowItWorks() {
  const steps = [
    {
      number: "01",
      title: "Konsultacja",
      description: "Poznamy Twoje potrzeby, procesy i cele biznesowe.",
    },
    {
      number: "02",
      title: "Implementacja",
      description: "Zbudujemy dedykowane agenty AI skrojone na Twoją firmę.",
    },
    {
      number: "03",
      title: "Automatyzacja",
      description: "Twoja firma działa szybciej i efektywniej — automatycznie.",
    },
  ];

  return (
    <section className="py-20 px-4 bg-gray-900">
      <div className="max-w-6xl mx-auto">
        <ScrollReveal>
          <div className="text-center mb-14">
            <h2 className="text-4xl font-bold text-white mb-4">Jak to działa</h2>
            <p className="text-gray-400 text-lg">Trzy kroki do automatyzacji Twojego biznesu</p>
          </div>
        </ScrollReveal>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {steps.map((step, i) => (
            <ScrollReveal key={step.title} delay={i * 200}>
              <div className="relative flex flex-col items-center text-center cursor-pointer group">
                {i < steps.length - 1 && (
                  <div className="hidden md:block absolute top-10 left-1/2 w-full h-0.5 bg-gradient-to-r from-cyan-500/50 to-transparent" />
                )}
                <div className="relative z-10 w-20 h-20 rounded-full bg-gray-800 border-2 border-cyan-500 shadow-lg shadow-cyan-500/20 group-hover:shadow-xl group-hover:shadow-cyan-500/40 group-hover:scale-110 flex items-center justify-center mb-6 transition-all duration-300">
                  <span className="text-cyan-400 font-bold text-xl">{step.number}</span>
                </div>
                <h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 mb-2 transition-colors duration-300">{step.title}</h3>
                <p className="text-gray-300 leading-relaxed max-w-xs">{step.description}</p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}