"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"] }) {
  // Настройки для 5 карточек в стильной Bento-сетке
  // md:col-span-2 = широкая карточка (2/3 ширины)
  // md:col-span-1 = узкая/квадратная карточка (1/3 ширины)
  const bentoConfig = [
    {
      // 1: Широкая сверху
      className:
        "md:col-span-2 min-h-[300px] group overflow-hidden bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-6 md:p-10 flex flex-col justify-end hover:border-primary/50 transition-all duration-500 hover:shadow-[0_0_40px_rgba(0,240,255,0.1)] relative",
      icon: <EyeOff className="w-8 h-8 text-primary relative z-10 mb-4" />,
      bgElement: (
        <EyeOff className="absolute -bottom-10 -right-10 w-64 h-64 text-primary opacity-[0.03] group-hover:opacity-10 group-hover:scale-110 group-hover:-rotate-12 transition-all duration-700 pointer-events-none" />
      ),
    },
    {
      // 2: Узкая справа
      className:
        "md:col-span-1 min-h-[300px] bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-6 md:p-10 flex flex-col group hover:border-secondary/60 transition-all duration-500 hover:shadow-[0_0_40px_rgba(112,0,255,0.15)] relative overflow-hidden",
      icon: (
        <div className="bg-secondary/10 w-14 h-14 rounded-[1.2rem] flex items-center justify-center mb-auto border border-secondary/20 shadow-[0_0_15px_rgba(112,0,255,0.2)] relative z-10">
          <Lock className="w-7 h-7 text-secondary" />
        </div>
      ),
      bgElement: (
        <div className="absolute top-0 right-0 w-32 h-32 bg-secondary/20 blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
    {
      // 3: Узкая слева в среднем ряду
      className:
        "md:col-span-1 min-h-[300px] bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-6 md:p-10 flex flex-col group hover:border-primary/50 transition-all duration-500 hover:shadow-[0_0_30px_rgba(0,240,255,0.1)] relative overflow-hidden",
      icon: (
        <div className="bg-primary/10 w-14 h-14 rounded-[1.2rem] flex items-center justify-center mb-auto border border-primary/20 shadow-[0_0_15px_rgba(0,240,255,0.2)] relative z-10">
          <Gauge className="w-7 h-7 text-primary" />
        </div>
      ),
      bgElement: (
        <Gauge className="absolute top-10 -right-4 w-40 h-40 text-primary opacity-[0.03] group-hover:opacity-10 transition-all duration-700 pointer-events-none" />
      ),
    },
    {
      // 4: Широкая справа в среднем ряду
      className:
        "md:col-span-2 min-h-[300px] bg-gradient-to-br from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-6 md:p-10 flex flex-col justify-end group hover:border-secondary/50 transition-all duration-500 hover:shadow-[0_0_30px_rgba(112,0,255,0.1)] relative overflow-hidden",
      icon: <Cpu className="w-8 h-8 text-secondary relative z-10 mb-4" />,
      bgElement: (
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_var(--tw-gradient-stops))] from-secondary/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
    {
      // 5: На всю ширину снизу
      className:
        "md:col-span-3 bg-gradient-to-r from-card/40 to-background/40 backdrop-blur-xl border border-border/50 rounded-[2.5rem] p-6 md:p-10 flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-8 group hover:border-primary/50 transition-all duration-500 hover:shadow-[0_0_40px_rgba(0,240,255,0.1)] relative overflow-hidden",
      icon: (
        <div className="bg-primary/10 w-16 h-16 md:w-20 md:h-20 rounded-[1.5rem] md:rounded-[2rem] shrink-0 flex items-center justify-center border border-primary/20 shadow-[0_0_20px_rgba(0,240,255,0.2)] relative z-10">
          <Globe className="w-8 h-8 md:w-10 md:h-10 text-primary" />
        </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 (
    // overflow-hidden и w-full здесь чинят горизонтальный скролл на мобильных телефонах
    <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-secondary/10 blur-[100px] md:blur-[120px] rounded-full pointer-events-none -z-10" />

        <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];
            return (
              <motion.div
                key={idx}
                variants={itemVariants}
                className={config.className}
              >
                {config.bgElement}
                {config.icon}
                <div className="relative z-10 mt-6 md:mt-0">
                  <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>
  );
}