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

const services = [
  {
    Icon: SearchIcon,
    title: "Analiza Procesów Biznesowych",
    description:
      "Przeprowadzamy szczegółową analizę Twoich procesów biznesowych. Mapujemy przepływy danych, identyfikujemy powtarzalne zadania i wyznaczamy obszary, w których AI przyniesie największą wartość. Wynik to konkretny plan wdrożenia.",
    features: [
      "Mapowanie procesów end-to-end",
      "Identyfikacja powtarzalnych zadań",
      "Analiza kosztu vs zysk automatyzacji",
      "Raport z rekomendacjami",
    ],
  },
  {
    Icon: CpuIcon,
    title: "Budowa Dedykowanych Agentów AI",
    description:
      "Projektujemy i budujemy agenty AI skrojone na potrzeby Twojej firmy. Od prostych asystentów po złożone systemy wieloagentowe — każde rozwiązanie jest tworzone od zera, nie ze standardowego szablonika.",
    features: [
      "Agenty dedykowane dla firmy",
      "Systemy wieloagentowe",
      "Integracja z LLM (GPT, Claude, Gemini)",
      "Testowanie i walidacja",
    ],
  },
  {
    Icon: ZapIcon,
    title: "Integracja z Twoimi Narzędziami",
    description:
      "Podłączamy agenty AI do narzędzi, które już masz — CRM, zarządzanie projektem, komunikacja, bazy danych. Nie trzeba rezygnować z tego, co działa. AI pracuje dla Ciebie w dotychczasowym ekosystemie.",
    features: [
      "Integracja z CRM i ERP",
      "Automatyzacja przepływów danych",
      "Webhooks i API",
      "Synchronizacja w czasie rzeczywistym",
    ],
  },
  {
    Icon: TrendingUpIcon,
    title: "Monitoring & Ciągła Optymalizacja",
    description:
      "Po wdrożeniu nie kończy się nasza praca. Monitorujemy wydajność agentów 24/7, analizujemy wyniki i stale poprawiamy procesy. Twoja automatyzacja ewoluuje razem z Twoim biznisem.",
    features: [
      "Dashboard monitoringu",
      "Alerting i raportowanie",
      "Kwartalny przegląd efektów",
      "Iteracyjne ulepszenia",
    ],
  },
];

export default function OfertaServices() {
  return (
    <section className="py-20 px-4 bg-gray-950">
      <div className="max-w-4xl mx-auto">
        <ScrollReveal>
          <div className="text-center mb-14">
            <h2 className="text-4xl font-bold text-white mb-4">Nasze usługi</h2>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              Każde rozwiązanie jest tworzone indywidualnie — dopasowane do Twojej firmy i jej celów
            </p>
          </div>
        </ScrollReveal>
        <div className="flex flex-col gap-6">
          {services.map((service, i) => (
            <ScrollReveal key={service.title} delay={i * 120}>
              <div className="bg-gray-800 border border-gray-700 rounded-2xl p-8 hover:border-cyan-500/40 hover:shadow-lg hover:shadow-cyan-500/5 transition-all duration-300 group">
                <div className="flex items-start gap-5">
                  <div className="w-12 h-12 flex-shrink-0 bg-cyan-500/10 rounded-xl p-3 text-cyan-400 icon-pulse">
                    <service.Icon />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-cyan-400 transition-colors duration-300">
                      {service.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-4">{service.description}</p>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                      {service.features.map((f) => (
                        <div key={f} className="flex items-center gap-2 text-gray-400 text-sm">
                          <svg className="w-4 h-4 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                          <span>{f}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}