import { SearchIcon, CpuIcon, TrendingUpIcon } from "@/components/Icons";
import ScrollReveal from "@/components/ScrollReveal";

export default function WhatWeDo() {
  const services = [
    {
      Icon: SearchIcon,
      title: "Analiza procesów",
      description: "Mapujemy Twoje procesy biznesowe i identyfikujemy obszary idealne do automatyzacji.",
    },
    {
      Icon: CpuIcon,
      title: "Wdrożenie agentów AI",
      description: "Tworzymy i wdrażamy agenty AI w pełni dopasowane do potrzeb Twojej firmy.",
    },
    {
      Icon: TrendingUpIcon,
      title: "Monitor & Optymalizacja",
      description: "Śledzi i optymalizujemy wydajność agentów w czasie rzeczywistym, non-stop.",
    },
  ];

  return (
    <section className="py-20 px-4 bg-gray-950">
      <div className="max-w-6xl mx-auto">
        <ScrollReveal>
          <div className="text-center mb-14">
            <h2 className="text-4xl font-bold text-white mb-4">Co oferujemy</h2>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              Kompleksowe rozwiązania AI dopasowane do każdej firmy
            </p>
          </div>
        </ScrollReveal>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {services.map((s, i) => (
            <ScrollReveal key={s.title} delay={i * 150}>
              <div className="bg-gray-800 border border-gray-700 rounded-xl p-6 cursor-pointer hover:border-cyan-500/50 hover:-translate-y-1 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 h-full">
                <div className="w-8 h-8 text-cyan-400 mb-4 icon-pulse">
                  <s.Icon />
                </div>
                <h3 className="text-xl font-semibold text-white mb-2">{s.title}</h3>
                <p className="text-gray-300 leading-relaxed">{s.description}</p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}