Webklar/src/components/SolutionSection.tsx

import { Link } from "react-router-dom";
import { lazy, Suspense, useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { ArrowRight, CheckCircle2 } from "lucide-react";
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 SolutionSection = () => {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

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

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

  const benefits = [
    "Website, CRM und Abläufe sprechen miteinander – keine doppelte Pflege.",
    "Anfragen landen automatisch beim richtigen Ansprechpartner.",
    "Wiederkehrende Aufgaben laufen im Hintergrund, Ihr Team arbeitet am Kunden.",
  ];

  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="#06b6d4"
              patternScale={7.75}
              patternDensity={0.7}
              pixelSizeJitter={2}
              enableRipples={false}
              speed={0.3}
              edgeFade={0.5}
              transparent
            />
          </Suspense>
        </div>
      )}
      {/* Hintergrundbild mittig, auf Handy maximale Breite; nur im Dark Mode (dunkles Bild wäre im hellen ein graues Quadrat) */}
      <div
        className="solution-section-bg hidden dark:block absolute inset-0 bg-center bg-no-repeat opacity-[0.3] z-0"
        style={{
          backgroundImage: "url(/loesung.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="#22d3ee"
              raysSpeed={1}
              lightSpread={0.5}
              rayLength={3}
              followMouse={false}
              mouseInfluence={0}
              noiseAmount={0}
              distortion={0}
              pulsating
              fadeDistance={2}
              saturation={2}
            />
          </Suspense>
        </div>
      )}
      <LampTop lineClassName="bg-cyan-400" />
      <div className="container mx-auto px-6 relative z-10">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Left Content */}
          <div>
            <div className="label-tag mb-4">Die Lösung</div>
            
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
              Ein System für Website, Prozesse und Wachstum.
            </h2>
            
            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
              WEBklar verbindet Ihre digitale Präsenz mit Automatisierung und den Tools, die Sie ohnehin nutzen – planbar, wartbar und auf Ihr Unternehmen zugeschnitten.
            </p>
            
            <div className="space-y-4 mb-10">
              {benefits.map((benefit, index) => (
                <div key={index} className="flex items-center gap-3">
                  <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0" />
                  <span className="text-lg text-foreground">{benefit}</span>
                </div>
              ))}
            </div>

            <Link
              to="/kontakt"
              data-analytics-cta="Potenzialanalyse starten"
              data-analytics-location="solution_section"
            >
              <Button
                size="lg"
                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
              >
                Potenzialanalyse starten
                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
              </Button>
            </Link>
          </div>

          {/* Right Content - Visual Element */}
          <div className="relative">
            <div className="solution-section-tint aspect-square rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/[0.08] shadow-[0_8px_32px_rgba(0,0,0,0.12)] p-8 md:p-12 flex flex-col justify-center">
              <div className="space-y-6">
                <div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
                <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">
                  Sie sehen, was läuft. Mehr Zeit für Kunden statt für Tool-Pflege:
                </h3>
                <div className="text-4xl md:text-5xl font-display font-medium text-primary uppercase tracking-tight">
                  Kontrolle.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SolutionSection;