"use client"

import { motion } from "framer-motion"
import { useInView } from "framer-motion"
import { useRef } from "react"
import { Terminal, Eye, Zap, Code, Brain, TestTube } from "lucide-react"
import Image from "next/image"

const features = [
  {
    icon: Terminal,
    title: "CLI Simplicity",
    description: "Instantly generate modular domains with a single command",
    command: "npx ruch create <domain>",
  },
  {
    icon: Eye,
    title: "Architectural Visualizer",
    description: "Visualize your domains as hexagons and their dependencies",
    command: "npx ruch visualize",
  },
  {
    icon: Brain,
    title: "AI Guide Generation",
    description: "Generate AI-optimized guides for better code assistance",
    command: "npx ruch guide-ai",
  },
  {
    icon: TestTube,
    title: "MSW Mock Generation",
    description: "Create realistic mock handlers for development and testing",
    command: "npx ruch msw handlers",
  },
  {
    icon: Code,
    title: "Modern Tools",
    description: "Built for React, TypeScript, and React Query",
    command: "Built-in support",
  },
  {
    icon: Zap,
    title: "Developer Productivity",
    description: "Reduce setup time and focus on scalable, maintainable code",
    command: "Save hours daily",
  },
]

export function FeaturesSection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

  return (
    <section ref={ref} className="py-24 px-4 bg-gradient-to-b from-orange-50 to-amber-100 relative overflow-hidden">
      {/* Background decorative elements - Hidden on mobile to prevent overflow */}
      <motion.div
        animate={{
          x: [0, 50, 0],
          y: [0, -30, 0],
          rotate: [0, 10, -8, 0],
        }}
        transition={{
          duration: 15,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
        className="absolute top-20 right-4 md:right-20 opacity-20 hidden sm:block"
      >
        <Image
          src="/images/hive.png"
          alt="Background hive"
          width={80}
          height={96}
          className="md:w-[120px] md:h-[144px]"
        />
      </motion.div>

      <motion.div
        animate={{
          x: [0, -40, 0],
          y: [0, 40, 0],
          rotate: [0, -10, 6, 0],
        }}
        transition={{
          duration: 12,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
          delay: 3,
        }}
        className="absolute bottom-20 left-4 md:left-10 opacity-15 hidden sm:block"
      >
        <Image
          src="/images/hive.png"
          alt="Background hive"
          width={70}
          height={84}
          className="md:w-[100px] md:h-[120px]"
        />
      </motion.div>

      <div className="max-w-7xl mx-auto relative z-10">
        <motion.h2
          initial={{ opacity: 0, y: 50 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-4xl md:text-5xl lg:text-6xl font-bold text-amber-900 text-center mb-16"
        >
          Powerful Features
        </motion.h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 50 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8, delay: index * 0.1 }}
              className="bg-white rounded-2xl p-6 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-amber-200 relative overflow-hidden"
            >
              {/* Decorative bee for each card - Smaller on mobile */}
              <motion.div
                animate={{
                  x: [0, 8, 0],
                  y: [0, -4, 0],
                  rotate: [0, 4, -4, 0],
                }}
                transition={{
                  duration: 4 + index,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "easeInOut",
                  delay: index * 0.5,
                }}
                className="absolute top-2 right-2 opacity-30"
              >
                <Image src="/images/bee.png" alt="Card bee" width={16} height={16} className="md:w-5 md:h-5" />
              </motion.div>

              <div className="bg-gradient-to-br from-amber-400 to-orange-500 w-14 h-14 md:w-16 md:h-16 rounded-xl flex items-center justify-center mb-6">
                <feature.icon className="h-7 w-7 md:h-8 md:w-8 text-white" />
              </div>

              <h3 className="text-xl md:text-2xl font-bold text-amber-900 mb-4">{feature.title}</h3>

              <p className="text-amber-700 mb-4 leading-relaxed text-sm md:text-base">{feature.description}</p>

              <div className="bg-gray-900 rounded-lg p-3 font-mono text-xs md:text-sm text-green-400 overflow-x-auto">
                {feature.command}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}