import { useNavigate } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import { lazy, Suspense } from "react";
import { useTheme } from "next-themes";
import { trackCtaClick } from "@/lib/analytics";

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

function DemoButtonLetters({ text }: { text: string }) {
  const chars = text.split("");
  return (
    <>
      {chars.map((char, i) => (
        <span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
          {char}
        </span>
      ))}
    </>
  );
}

// Drei belegbare Fakten statt Zahlen: Wort-Werte, deshalb kleiner gesetzt als die frühere Zahlenleiste.
const FAKTEN = [
  { wert: "Falkenstein", label: "Server in Deutschland" },
  { wert: "Live-Vorschau", label: "im Kundenportal" },
  { wert: "ab 20 €", label: "Hosting im Monat" },
];

const Hero = () => {
  const navigate = useNavigate();
  const { resolvedTheme } = useTheme();

  // ── Silk-Hintergrund Farben ──
  const isDark = resolvedTheme === "dark";
  // Silk: Hauptfarbe (Wellenspitzen)
  const silkColor = isDark ? "#6a6a6a" : "#ffffff";
  // Silk: Zweite Farbe (Wellentäler)
  const silkColor2 = isDark ? "#000000" : "#c0c0c0";
  // Silk: Rausch-Intensität
  const silkNoise = isDark ? 4 : 1.5;

  return (
    <section className="relative min-h-screen flex flex-col justify-center overflow-hidden pt-20">
      {/* Silk animated background */}
      <div className="absolute inset-0 z-0 w-full h-full">
        <Suspense fallback={null}>
          {/* sanft einblenden, weil der Hintergrund jetzt kurz nach dem Text kommt */}
          <div className="w-full h-full animate-fade-in">
            <Silk
              speed={3}
              scale={0.5}
              color={silkColor}
              color2={silkColor2}
              noiseIntensity={silkNoise}
              rotation={0}
            />
          </div>
        </Suspense>
      </div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="max-w-6xl">
          {/* Label */}
          <div className="label-tag mb-8 animate-fade-in" style={{ animationDelay: '0.1s' }}>
            Digitalisierung für KMU
          </div>

          {/* Main Heading - Large Uppercase */}
          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-display font-medium text-foreground mb-6 leading-[0.95] tracking-tighter uppercase animate-slide-up" style={{ animationDelay: '0.2s' }}>
            Wir digitalisieren<br />
            <span className="text-muted-foreground">Ihr Unternehmen</span>
          </h1>

          {/* Subheadline */}
          <p className="text-xl md:text-2xl text-foreground/90 max-w-3xl mb-6 font-medium animate-fade-in" style={{ animationDelay: '0.3s' }}>
            Website, Automatisierung und vernetzte Prozesse – aus einer Hand. So wächst Ihr Unternehmen, ohne dass Ihr Team mehr Aufwand im Alltag hat.
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row flex-nowrap items-stretch sm:items-center gap-3 sm:gap-4 mb-6 animate-fade-in" style={{ animationDelay: '0.5s' }}>
            <div className="btn-wrapper shrink-0 w-full sm:w-auto">
              <button
                type="button"
                className="btn btn-primary w-full sm:w-auto justify-center"
                onClick={() => {
                  trackCtaClick("Kostenlose Potenzialanalyse sichern", "hero");
                  navigate("/kontakt");
                }}
                aria-label="Kostenlose Potenzialanalyse sichern"
              >
                <ArrowRight className="btn-icon" size={24} strokeWidth={2} aria-hidden />
                <div className="txt-wrapper">
                  <span className="txt-width-helper" aria-hidden="true">
                    <DemoButtonLetters text="Kostenlose Potenzialanalyse sichern" />
                  </span>
                  <div className="txt-1">
                    <DemoButtonLetters text="Kostenlose Potenzialanalyse sichern" />
                  </div>
                  <div className="txt-2">
                    <DemoButtonLetters text="Wird weitergeleitet..." />
                  </div>
                </div>
              </button>
            </div>
          </div>

          {/* Trust Line */}
          <p className="text-sm text-muted-foreground/70 uppercase tracking-wider animate-fade-in" style={{ animationDelay: '0.55s' }}>
            Für Unternehmen, die nicht stehen bleiben wollen.
          </p>
        </div>
      </div>

      {/* Bottom Facts Row */}
      <div className="container mx-auto px-6 mt-auto pb-12 pt-20 relative z-10">
        <div className="divider mb-12" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
          {FAKTEN.map((fakt, i) => (
            <div key={fakt.wert} className="animate-fade-in" style={{ animationDelay: `${0.6 + i * 0.1}s` }}>
              <div className="stat-number text-3xl lg:text-4xl xl:text-5xl text-foreground mb-2">{fakt.wert}</div>
              <div className="label-tag">{fakt.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Hero;