"use client";

import { EyeOff, Lock, Globe, Gauge, Cpu } from "lucide-react";
import { motion, Variants } from "framer-motion";
import { Dictionary } from "@/lib/IDict";

export function Features({ dict }: { dict: Dictionary["features"] }) {
  // Универсальные классы для переиспользования и чистоты кода
  const verticalCardClass =
    "min-h-[320px] md:min-h-[360px] group bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-8 md:p-10 flex flex-col hover:border-primary/50 transition-all duration-500 hover:shadow-[0_0_40px_rgba(139,61,255,0.15)] relative overflow-hidden";

  const iconContainerClass =
    "bg-secondary/10 w-14 h-14 rounded-[1.2rem] flex items-center justify-center border border-secondary/20 shadow-[0_0_15px_rgba(0,229,242,0.15)] relative z-10 transition-transform duration-500 group-hover:scale-110";

  const bentoConfig = [
    {
      // 1: DPI Evasion
      className: `md:col-span-2 ${verticalCardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <EyeOff className="w-7 h-7 text-secondary drop-shadow-[0_0_10px_rgba(0,229,242,0.8)]" />
        </div>
      ),
      bgElement: (
        <EyeOff className="absolute -bottom-10 -right-10 w-64 h-64 text-primary opacity-[0.03] group-hover:opacity-[0.08] group-hover:scale-110 group-hover:-rotate-12 transition-all duration-700 pointer-events-none" />
      ),
    },
    {
      // 2: Cryptography
      className: `md:col-span-1 ${verticalCardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <Lock className="w-7 h-7 text-secondary drop-shadow-[0_0_10px_rgba(0,229,242,0.8)]" />
        </div>
      ),
      bgElement: (
        <div className="absolute top-0 right-0 w-40 h-40 bg-primary/10 blur-[70px] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
    {
      // 3: Adaptive Backpressure
      className: `md:col-span-1 ${verticalCardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <Gauge className="w-7 h-7 text-secondary drop-shadow-[0_0_10px_rgba(0,229,242,0.8)]" />
        </div>
      ),
      bgElement: (
        <Gauge className="absolute top-10 -right-8 w-48 h-48 text-primary opacity-[0.02] group-hover:opacity-[0.08] transition-all duration-700 pointer-events-none" />
      ),
    },
    {
      // 4: Multi-Platform Core
      className: `md:col-span-2 ${verticalCardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <Cpu className="w-7 h-7 text-secondary drop-shadow-[0_0_10px_rgba(0,229,242,0.8)]" />
        </div>
      ),
      bgElement: (
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
    {
      // 5: Global Network (Горизонтальная карточка)
      className:
        "md:col-span-3 bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-8 md:p-10 flex flex-col md:flex-row items-start md:items-center gap-8 md:gap-12 group hover:border-primary/50 transition-all duration-500 hover:shadow-[0_0_40px_rgba(139,61,255,0.15)] relative overflow-hidden",
      icon: (
        <div className="bg-secondary/10 w-16 h-16 md:w-20 md:h-20 rounded-[1.5rem] md:rounded-[1.8rem] shrink-0 flex items-center justify-center border border-secondary/20 shadow-[0_0_20px_rgba(0,229,242,0.15)] relative z-10 transition-transform duration-500 group-hover:scale-105">
          <Globe className="w-8 h-8 md:w-10 md:h-10 text-secondary drop-shadow-[0_0_10px_rgba(0,229,242,0.8)]" />
        </div>
      ),
      bgElement: (
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_left,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
  ];

  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
      },
    },
  };

  const itemVariants: Variants = {
    hidden: {
      opacity: 0,
      y: 40,
    },
    show: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 260,
        damping: 20,
      },
    },
  };

  if (!dict || !dict.items || dict.items.length < 5) return null;

  return (
    <section
      id="features"
      className="py-24 px-4 w-full mx-auto relative overflow-hidden"
    >
      <div className="container max-w-6xl mx-auto relative z-10">
        {/* Центральное мягкое свечение секции */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[100vw] md:w-[600px] h-[600px] bg-primary/5 blur-[100px] md:blur-[120px] rounded-full pointer-events-none -z-10" />

        <div className="mb-16 md:mb-20 text-center">
          <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight text-foreground">
            {dict.title}
          </h2>
        </div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, margin: "-100px" }}
          className="grid grid-cols-1 md:grid-cols-3 gap-6"
        >
          {bentoConfig.map((config, idx) => {
            const feature = dict.items[idx];
            // Проверяем, это последняя горизонтальная карточка или нет
            const isHorizontal = idx === 4;

            return (
              <motion.div
                key={idx}
                variants={itemVariants}
                className={config.className}
              >
                {config.bgElement}
                {config.icon}

                {/* mt-auto прижимает текст к низу, pt-8 дает гарантированный отступ от иконки */}
                <div
                  className={`relative z-10 ${
                    isHorizontal ? "" : "mt-auto pt-8"
                  }`}
                >
                  <h3 className="text-xl md:text-2xl font-bold text-foreground mb-3 tracking-tight">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-lg">
                    {feature.description}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
}