import React from 'react';
import { Monitor, Smartphone, Search, PenTool, Database, Server } from 'lucide-react';
import { Button } from '../components/Button';
import { Link } from 'react-router-dom';

export const Services: React.FC = () => {
  const services = [
    {
      icon: Monitor,
      title: "Egyedi Webfejlesztés",
      desc: "Nem sablonmegoldásokat kínálunk. Minden weboldalt a nulláról, az Ön igényeire szabva fejlesztünk React és modern technológiák használatával. Gyors, biztonságos és skálázható."
    },
    {
      icon: Smartphone,
      title: "Reszponzív Design",
      desc: "Mobile-first szemléletünk garantálja, hogy oldala minden eszközön – telefonon, tableten és asztali gépen – tökéletesen jelenjen meg és működjön."
    },
    {
      icon: Search,
      title: "SEO Optimalizálás",
      desc: "A Google találati lista élére segítjük. Technikai SEO, kulcsszókutatás és tartalomoptimalizálás, hogy a potenciális ügyfelek Önre találjanak."
    },
    {
      icon: PenTool,
      title: "UI/UX Design",
      desc: "Felhasználóbarát felületek tervezése. A látogatói élmény (UX) maximalizálása növeli a konverziót és a vásárlási hajlandóságot."
    },
    {
      icon: Database,
      title: "Webshop Rendszerek",
      desc: "Teljeskörű e-kereskedelmi megoldások. Termékkezelés, raktárkészlet, automatikus számlázás és bankkártyás fizetés integrációja."
    },
    {
      icon: Server,
      title: "Hoszting & Domain",
      desc: "Segítünk a megfelelő domain név kiválasztásában és a gyors, megbízható tárhely beállításában. Teljeskörű üzemeltetést is vállalunk."
    }
  ];

  return (
    <div className="pt-20">
      <div className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Szolgáltatásaink</h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            A Motion Web Stúdió a digitális megoldások széles spektrumát kínálja, hogy vállalkozása sikeres legyen az online térben.
          </p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {services.map((service, index) => (
            <div key={index} className="flex flex-col h-full bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100">
              <div className="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
                <service.icon className="w-7 h-7 text-primary" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h3>
              <p className="text-gray-600 leading-relaxed flex-grow">
                {service.desc}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Process Section */}
      <section className="bg-gray-900 py-20 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-16">A Munkafolyamatunk</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {[
              { step: "01", title: "Konzultáció", desc: "Felmérjük igényeit és céljait." },
              { step: "02", title: "Tervezés", desc: "Drótvázak és design tervek készítése." },
              { step: "03", title: "Fejlesztés", desc: "Programozás és tartalomfeltöltés." },
              { step: "04", title: "Átadás", desc: "Tesztelés, élesítés és oktatás." }
            ].map((item, i) => (
              <div key={i} className="relative">
                <div className="text-6xl font-black text-gray-800 absolute -top-8 -left-4 z-0 opacity-50">{item.step}</div>
                <div className="relative z-10">
                  <h3 className="text-xl font-bold text-primary mb-2">{item.title}</h3>
                  <p className="text-gray-400">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="mt-16 text-center">
            <Link to="/contact">
              <Button size="lg">Kezdjük el a közös munkát</Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};