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

const Services = () => {
  const services = [
    {
      icon: Lightbulb,
      title: "Strategieberatung",
      description: "Wir analysieren Ihre Ziele und erstellen ein maßgeschneidertes Konzept für Ihren digitalen Erfolg.",
      number: "01",
    },
    {
      icon: Palette,
      title: "UX/UI Design",
      description: "Modernes, benutzerfreundliches Design, das Ihre Marke perfekt repräsentiert.",
      number: "02",
    },
    {
      icon: Code,
      title: "Entwicklung",
      description: "Professionelle Webentwicklung mit modernsten Technologien. Schnell, sicher und skalierbar.",
      number: "03",
    },
    {
      icon: Search,
      title: "SEO & Support",
      description: "Suchmaschinenoptimierung und kontinuierlicher Support für langfristigen Erfolg.",
      number: "04",
    },
  ];

  return (
    <section id="services" className="py-24 md:py-32 bg-background relative">
      <div className="container mx-auto px-6">
        {/* Section Header */}
        <div className="mb-16 md:mb-24">
          <div className="label-tag mb-4">Was wir tun</div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
            Leistungen
          </h2>
        </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;