import { Lightbulb, Palette, Code, Search } from "lucide-react";

const Services = () => {
  const services = [
    {
      icon: Lightbulb,
      title: "Potenzialanalyse",
      description: "Wo hakt es heute? Wir priorisieren Hebel mit dem größten Effekt – bevor etwas gebaut wird.",
      number: "01",
    },
    {
      icon: Palette,
      title: "UX/UI Design",
      description: "Klare Oberflächen, die Vertrauen schaffen und Besucher gezielt zur Anfrage führen.",
      number: "02",
    },
    {
      icon: Code,
      title: "Entwicklung",
      description: "Schnelle, sichere Websites und Integrationen – technisch sauber und erweiterbar.",
      number: "03",
    },
    {
      icon: Search,
      title: "SEO & Betreuung",
      description: "Sichtbar bei Google, stabil im Betrieb – mit Updates, wenn Ihr Unternehmen wächst.",
      number: "04",
    },
  ];

  return (
    <section id="services" className="pt-8 pb-8 md:pt-12 md:pb-12 bg-background relative">
      <div className="container mx-auto px-6">
        {/* Section Header */}
        <div className="mb-4">
          <div className="label-tag mb-4">Leistungen</div>
          <p className="text-muted-foreground max-w-2xl mb-8 leading-relaxed">
            Von der ersten Analyse bis zum laufenden System – ein Team, ein Ansprechpartner, keine Tool-Inseln.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-px bg-border rounded-lg overflow-hidden">
          {services.map((service) => (
            <div
              key={service.title}
              className="group bg-background p-8 md:p-12 transition-all duration-500 hover:bg-secondary/30"
            >
              <div className="flex items-start justify-between mb-8">
                <div className="w-12 h-12 rounded-full border border-border flex items-center justify-center group-hover:border-foreground/30 transition-colors">
                  <service.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
                </div>
                <span className="text-5xl font-display font-medium text-border group-hover:text-muted-foreground/30 transition-colors">
                  {service.number}
                </span>
              </div>
              
              <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-4 uppercase tracking-tight">
                {service.title}
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                {service.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;
