import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight, CheckCircle2 } from "lucide-react";
import { LampTop } from "@/components/ui/lamp";
import LightRays from "@/components/LightRays";

const SolutionSection = () => {
  const benefits = [
    "Alle Prozesse greifen ineinander.",
    "Informationen fließen automatisch.",
    "Aufgaben erledigen sich im Hintergrund.",
  ];

  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="#22d3ee"
          raysSpeed={1}
          lightSpread={0.5}
          rayLength={3}
          followMouse={false}
          mouseInfluence={0}
          noiseAmount={0}
          distortion={0}
          pulsating
          fadeDistance={2}
          saturation={2}
        />
      </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">
              Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren.
            </h2>
            
            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
              Statt isolierter Einzellösungen entwickeln wir eine zentrale digitale Infrastruktur für Ihre gesamte Firma.
            </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">
              <Button
                size="lg"
                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
              >
                Jetzt Potenzialanalyse sichern
                <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 bg-secondary/50 rounded-2xl border border-border 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 erhalten Kontrolle, Transparenz und die Freiheit, sich auf das zu konzentrieren, was wirklich zählt:
                </h3>
                <div className="text-4xl md:text-5xl font-display font-medium text-primary uppercase tracking-tight">
                  Wachstum.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SolutionSection;