import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react";

const Values = () => {
  const features = [
    {
      icon: Users,
      title: "Digitale Kundenplattform",
      description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.",
    },
    {
      icon: Cog,
      title: "Automatisierte Prozesse",
      description: "Reduzieren Sie manuelle Arbeit drastisch.",
    },
    {
      icon: MessageSquare,
      title: "Intelligente Kundenkommunikation",
      description: "Keine Anfrage geht mehr verloren.",
    },
    {
      icon: Target,
      title: "Planbare Neukundengewinnung",
      description: "Strukturierte Funnels statt Zufall.",
    },
    {
      icon: BarChart3,
      title: "Echtzeit-Analytics",
      description: "Treffen Sie Entscheidungen auf Basis klarer Daten.",
    },
    {
      icon: Layers,
      title: "Skalierbare Infrastruktur",
      description: "Ihr System wächst mit Ihrem Unternehmen.",
    },
  ];

  return (
    <section id="features" className="py-24 md:py-32 bg-background relative overflow-hidden">
      {/* Hintergrundbild: kleiner, leicht transparent */}
      <div
        className="absolute inset-0 bg-right bg-no-repeat opacity-[0.3]"
        style={{
          backgroundImage: "url(/backgroud_effect.png)",
          backgroundSize: "45%",
        }}
        aria-hidden
      />
      <div className="container mx-auto px-6 relative z-10">
        {/* Section Header */}
        <div className="mb-16 md:mb-24 max-w-3xl">
          <div className="label-tag mb-4">Was Sie bekommen</div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
            Alles, was Ihr Unternehmen braucht. In einem System.
          </h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div
              key={feature.title}
              className="group p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div className="w-12 h-12 rounded-full border border-border flex items-center justify-center mb-6 group-hover:border-foreground/30 transition-colors">
                <feature.icon className="w-5 h-5 text-muted-foreground group-hover:text-foreground transition-colors" />
              </div>
              <h3 className="text-xl font-display font-medium text-foreground mb-3 uppercase tracking-tight">
                {feature.title}
              </h3>
              <p className="text-muted-foreground text-sm leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Values;