"use client";

import { useState } from "react";
import { Switch } from "@/components/ui/switch";
import { motion } from "framer-motion";
import { Shield, EyeOff } from "lucide-react";
import { Dictionary } from "@/lib/IDict";
import { CyberButton } from "../ui/cyber-button";
import { NetrunnerMatrix } from "../graphics/NetrunnerMatrix";

export function Hero({
  dict,
  lang,
}: {
  dict: Dictionary["hero"];
  lang: string;
}) {
  const [isVpnOn, setIsVpnOn] = useState(false);

  return (
    <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 flex flex-col items-center text-center px-4 min-h-[95vh] justify-center overflow-hidden select-none">
      {/* Фон всегда активен для кликов */}
      <div className="absolute inset-0 -z-10 bg-background pointer-events-auto">
        <NetrunnerMatrix isSecure={isVpnOn} key={lang} />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_20%,_var(--background)_120%)] opacity-80 pointer-events-none" />
        <div className="absolute inset-x-0 top-0 h-64 bg-gradient-to-b from-background via-transparent to-transparent opacity-90 pointer-events-none" />
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        // Пропускаем клики сквозь контейнер текста на фон!
        className="relative z-10 w-full max-w-4xl mx-auto pt-40 md:pt-48 pb-20 pointer-events-none"
      >
        <div className="flex flex-col items-center">
          {/* Интерактивные элементы перехватывают клик обратно (pointer-events-auto) */}
          <motion.div
            layout
            className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full border text-sm font-bold transition-colors duration-500 shadow-sm cursor-default pointer-events-auto ${
              isVpnOn
                ? "bg-primary/10 border-primary/50 text-primary"
                : "bg-secondary/10 border-secondary/50 text-secondary"
            }`}
          >
            {isVpnOn ? (
              <Shield className="w-4 h-4" />
            ) : (
              <EyeOff className="w-4 h-4" />
            )}
            <span>{isVpnOn ? dict.badgeSecure : dict.badge}</span>
          </motion.div>

          {/* Якорь для глаз */}
          <div id="eye-anchor" className="h-28 md:h-40 w-full flex-none mt-6 mb-4" />

          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 font-mono cursor-default">
            {dict.titleStart}{" "}
            <span
              className={`transition-all duration-500 ${
                isVpnOn
                  ? "text-primary drop-shadow-[0_0_15px_rgba(139,61,255,0.4)]"
                  : "text-secondary drop-shadow-[0_0_15px_rgba(0,229,242,0.4)]"
              }`}
            >
              {dict.titleHighlight}
            </span>
          </h1>

          <p className="text-muted-foreground font-medium text-lg md:text-xl max-w-2xl mx-auto mb-12 cursor-default">
            {dict.subtitle}
          </p>

          <div className="flex flex-col items-center gap-8 mb-12">
            <div className="flex items-center gap-4 bg-card/80 backdrop-blur-xl border border-border p-4 rounded-3xl shadow-md transition-colors duration-300 pointer-events-auto">
              <Switch
                checked={isVpnOn}
                onCheckedChange={setIsVpnOn}
                className="data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary"
              />
              <span
                className={`text-base font-bold font-mono transition-colors ${isVpnOn ? "text-primary" : "text-foreground"}`}
              >
                Netrunner VPN
              </span>
            </div>

            <div className="flex flex-col sm:flex-row gap-6 justify-center w-full sm:w-auto font-mono pointer-events-auto">
              <CyberButton
                href={`/${lang}/download`}
                variant={isVpnOn ? "primary" : "secondary"}
              >
                {dict.ctaPrimary}
              </CyberButton>
              <CyberButton href={`/${lang}/nodes`} variant="secondary">
                {dict.ctaSecondary}
              </CyberButton>
            </div>
          </div>
        </div>
      </motion.div>
    </section>
  );
}