Webklar/src/components/Values.tsx

import { Users, Cog, MessageSquare, MonitorSmartphone, BarChart3, Layers } from "lucide-react";
import BorderGlow from "@/components/BorderGlow";
import { TextHoverEffect } from "@/components/ui/text-hover-effect";

const Values = () => {
  const features = [
    {
      icon: Users,
      title: "Zentrale Kundenübersicht",
      description: "Kontakte, Anfragen und Projekte an einem Ort – für Sales und Geschäftsführung.",
    },
    {
      icon: Cog,
      title: "Automatisierte Abläufe",
      description: "Weniger Copy-Paste: Follow-ups, Benachrichtigungen und Übergaben laufen von selbst.",
    },
    {
      icon: MessageSquare,
      title: "Keine Anfrage verloren",
      description: "Jeder Kanal landet im System – mit Status, Zuständigkeit und Historie.",
    },
    {
      icon: MonitorSmartphone,
      title: "Kundenportal",
      description: "Fortschritt, Chat und Rechnungen an einem Ort, im Browser oder als App.",
    },
    {
      icon: BarChart3,
      title: "Klare Kennzahlen",
      description: "Übersicht über Anfragen, Pipeline und Engpässe – ohne Excel-Chaos.",
    },
    {
      icon: Layers,
      title: "Mitwachsende Technik",
      description: "Architektur und Hosting, die mit Umsatz und Team skalieren – nicht dagegen.",
    },
  ];

  return (
    <section id="features" className="pt-8 pb-0 md:pt-12 md:pb-0 bg-background relative overflow-hidden">
      {/* TextHoverEffect */}
      <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
        <TextHoverEffect text="Leistungen" />
      </div>
      {/* Hintergrundbild: auf Handy maximale Breite; nur im Dark Mode (dunkles Bild wäre im hellen ein graues Quadrat) */}
      <div
        className="values-section-bg hidden dark:block absolute inset-0 bg-right bg-no-repeat opacity-[0.3] pointer-events-none"
        style={{
          backgroundImage: "url(/backgroud_effect.webp)",
        }}
        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">
            Was sich für Sie im Alltag ändert.
          </h2>
          <p className="text-muted-foreground text-lg leading-relaxed max-w-2xl">
            Kein weiteres Tool zum Mitpflegen – sondern ein Setup, das Ihre Arbeit spürbar entlastet.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <BorderGlow
              key={feature.title}
              edgeSensitivity={30}
              glowColor="40 80 80"
              backgroundColor="hsl(0 0% 6%)"
              lightBackgroundColor="hsl(0 0% 96%)"
              borderRadius={8}
              glowRadius={30}
              glowIntensity={0.8}
              coneSpread={25}
              colors={['#c084fc', '#f472b6', '#38bdf8']}
            >
              <div
                className="group p-6"
                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>
            </BorderGlow>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Values;