import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
import { LampTop } from "@/components/ui/lamp";
import LightRays from "@/components/LightRays";

const ProblemSection = () => {
  const problems = [
    {
      icon: Calendar,
      text: "Termine werden manuell koordiniert.",
    },
    {
      icon: MessageSquareOff,
      text: "Kundenanfragen gehen unter.",
    },
    {
      icon: TrendingDown,
      text: "Marketing bringt keine planbaren Ergebnisse.",
    },
    {
      icon: Folders,
      text: "Wichtige Informationen liegen verteilt in verschiedenen Tools.",
    },
  ];

  return (
    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
      <div className="absolute inset-0 w-full overflow-hidden z-0">
        <LightRays
          raysOrigin="top-center"
          raysColor="#ef4444"
          raysSpeed={1}
          lightSpread={0.5}
          rayLength={3}
          followMouse={false}
          mouseInfluence={0}
          noiseAmount={0}
          distortion={0}
          pulsating
          fadeDistance={2}
          saturation={2}
        />
      </div>
      <LampTop />
      <div className="container mx-auto px-6 relative z-10">
        {/* Section Header */}
        <div className="mb-16 md:mb-20 max-w-4xl">
          <div className="label-tag mb-4">Das Problem</div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
            Ihr Unternehmen sollte kein zweiter Vollzeitjob sein.
          </h2>
          <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
            Zu viele Firmen verlieren täglich Umsatz durch ineffiziente Prozesse, doppelte Dateneingaben und fehlende Automationen.
          </p>
        </div>

        {/* Problem Points */}
        <div className="grid md:grid-cols-2 gap-6 mb-16">
          {problems.map((problem, index) => (
            <div
              key={index}
              className="problem-section-tint flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
            >
              <div className="w-10 h-10 rounded-full border border-destructive/30 bg-destructive/10 flex items-center justify-center flex-shrink-0">
                <problem.icon className="w-5 h-5 text-destructive" />
              </div>
              <p className="text-lg text-foreground font-medium">
                {problem.text}
              </p>
            </div>
          ))}
        </div>

        {/* Closing Statement */}
        <div className="max-w-3xl">
          <p className="text-lg text-muted-foreground mb-4">
            Das kostet nicht nur Zeit – es verhindert Wachstum.
          </p>
          <p className="text-xl md:text-2xl text-foreground font-display font-medium">
            Wer heute nicht digital strukturiert ist, wird morgen abgehängt.
          </p>
        </div>
      </div>
    </section>
  );
};

export default ProblemSection;