Webklar/src/components/ProblemSection.tsx

import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
import { lazy, Suspense, useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { LampTop } from "@/components/ui/lamp";

// WebGL-Effekte als eigene Chunks laden, damit der Text nicht auf three.js/ogl warten muss
const PixelBlast = lazy(() => import("@/components/PixelBlast"));
const LightRays = lazy(() => import("@/components/LightRays"));

const ProblemSection = () => {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const isDark = mounted && resolvedTheme === "dark";
  const isLight = mounted && resolvedTheme === "light";

  const problems = [
    {
      icon: Calendar,
      text: "Termine und Rückrufe laufen über Zettel, Excel und fünf Kalender-Apps.",
    },
    {
      icon: MessageSquareOff,
      text: "Anfragen aus E-Mail, Formular und Telefon – niemand sieht das Gesamtbild.",
    },
    {
      icon: TrendingDown,
      text: "Marketing kostet Zeit, aber Sie wissen nicht, was wirklich Kunden bringt.",
    },
    {
      icon: Folders,
      text: "Kundendaten, Angebote und Projekte liegen in getrennten Tools ohne Verbindung.",
    },
  ];

  return (
    <section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
      {/* PixelBlast animated background - nur im Light Mode */}
      {isLight && (
        <div className="absolute inset-0 z-0 w-full h-full">
          <Suspense fallback={null}>
            <PixelBlast
              variant="circle"
              pixelSize={3}
              color="#f43f5e"
              patternScale={7.75}
              patternDensity={0.7}
              pixelSizeJitter={2}
              enableRipples={false}
              speed={0.3}
              edgeFade={0.5}
              transparent
            />
          </Suspense>
        </div>
      )}
      {/* Hintergrundbild: nur Blitze rechts, auf Handy maximale Breite; nur im Dark Mode (dunkles Bild wäre im hellen ein graues Quadrat) */}
      <div
        className="problem-section-bg hidden dark:block absolute inset-0 bg-right bg-no-repeat opacity-[0.3] z-0"
        style={{
          backgroundImage: "url(/problem_blitz.jpg)",
        }}
        aria-hidden
      />
      {/* LightRays - nur im Dark Mode */}
      {isDark && (
        <div className="absolute inset-0 w-full overflow-hidden z-0">
          <Suspense fallback={null}>
            <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}
            />
          </Suspense>
        </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">
            Wachstum darf nicht mehr Chaos bedeuten.
          </h2>
          <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
            Viele KMU verlieren jeden Tag Umsatz – nicht wegen fehlender Ideen, sondern weil Prozesse, Tools und Website nicht zusammenspielen.
          </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 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/[0.08] shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:bg-white/[0.06] hover:border-white/[0.12] transition-all duration-300"
            >
              <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 Zeit, Nerven – und Chancen, die Ihre Konkurrenz mit Systemen abholen.
          </p>
          <p className="text-xl md:text-2xl text-foreground font-display font-medium">
            Ohne eine durchdachte digitale Basis bleibt Wachstum manuelle Mehrarbeit.
          </p>
        </div>
      </div>
    </section>
  );
};

export default ProblemSection;