netrunner-landing/components/sections/Features.tsx

"use client";

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

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

  // Класс для контейнера иконки: в светлой теме — "плитка", в темной — "ядро"
  const iconContainerClass = cn(
    "w-14 h-14 rounded-[1.2rem] flex items-center justify-center relative z-10 transition-transform duration-500 group-hover:scale-110",
    "bg-slate-50 border-border shadow-inner", // Light
    "dark:bg-secondary/10 dark:border-secondary/20 dark:shadow-[0_0_15px_rgba(0,229,242,0.15)]", // Dark
  );

  // Стиль для самой иконки (SVG)
  const iconStyle =
    "w-7 h-7 text-secondary dark:drop-shadow-[0_0_8px_rgba(0,229,242,0.6)]";

  // Декоративные фоновые элементы (большие иконки)
  const bgIconClass =
    "absolute -bottom-10 -right-10 w-64 h-64 transition-all duration-700 pointer-events-none group-hover:scale-110 group-hover:-rotate-12";
  const bgIconTheme =
    "text-slate-100 dark:text-primary dark:opacity-[0.03] dark:group-hover:opacity-[0.08]";

  const bentoConfig = [
    {
      className: `md:col-span-2 ${cardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <EyeOff className={iconStyle} />
        </div>
      ),
      bgElement: <EyeOff className={cn(bgIconClass, bgIconTheme)} />,
    },
    {
      className: `md:col-span-1 ${cardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <Lock className={iconStyle} />
        </div>
      ),
      bgElement: (
        <div className="absolute top-0 right-0 w-40 h-40 bg-primary/5 dark:bg-primary/10 blur-[70px] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
    {
      className: `md:col-span-1 ${cardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <Gauge className={iconStyle} />
        </div>
      ),
      bgElement: (
        <Gauge
          className={cn(
            bgIconClass,
            bgIconTheme,
            "w-48 h-48 top-10 -right-8 bottom-auto",
          )}
        />
      ),
    },
    {
      className: `md:col-span-2 ${cardClass}`,
      icon: (
        <div className={iconContainerClass}>
          <Cpu className={iconStyle} />
        </div>
      ),
      bgElement: (
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_var(--tw-gradient-stops))] from-primary/5 dark:from-primary/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
      ),
    },
    {
      className: cn(
        cardClass,
        "md:col-span-3 flex-col md:flex-row items-start md:items-center gap-8 md:gap-12",
      ),
      icon: (
        <div className="bg-slate-50 dark: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-border dark:border-secondary/20 shadow-inner 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 dark: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/5 dark: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.1 },
    },
  };

  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    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] rounded-full pointer-events-none -z-10 opacity-50 dark:opacity-100" />

        <div className="mb-16 md:mb-20 text-center">
          <h2 className="text-4xl md:text-5xl font-black tracking-tight text-foreground uppercase">
            {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}

                <div
                  className={cn(
                    "relative z-10",
                    isHorizontal ? "" : "mt-auto pt-8",
                  )}
                >
                  <h3 className="text-xl md:text-2xl font-bold text-foreground mb-3 tracking-tight uppercase">
                    {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>
  );
}