import { ShieldCheck, Cpu, Layers, Sparkles, FolderSync, MousePointerClick } from "lucide-react";
import { motion } from "motion/react";

export default function Features() {
  const featuresList = [
    {
      id: "feat-formats",
      title: "200+ Multi-Media Formats",
      description: "Seamlessly convert documents (PDF, Word, TXT), images (WebP, PNG, JPG, GIF), videos (MP4, AVI, MKV), and audios (MP3, WAV, FLAC).",
      icon: <Layers className="w-5 h-5 text-violet-600" />,
    },
    {
      id: "feat-offline",
      title: "100% On-Device Offline Engine",
      description: "Keep private business compliance pristine. Zero server uploads mean 100% data confidentiality, shielding you from third-party server risks.",
      icon: <ShieldCheck className="w-5 h-5 text-indigo-600" />,
    },
    {
      id: "feat-gpu",
      title: "GPU Hardware Accelerated",
      description: "Fully optimized for Nvidia CUDA, OpenCL, and Apple Metal. Achieve up to 200x speedups during complex encoding and file compressing.",
      icon: <Cpu className="w-5 h-5 text-fuchsia-600" />,
    },
    {
      id: "feat-ai",
      title: "Local AI Super-Resolution",
      description: "Upscale pixelated images, clarify noisy interviews, or automatically summarize files using fully local models with no token usage.",
      icon: <Sparkles className="w-5 h-5 text-violet-500" />,
    },
    {
      id: "feat-batch",
      title: "Smart Batch Pipeline",
      description: "Drop folder collections other software crashes on. Parallel multitasking processing converts batches of 500+ items seamlessly.",
      icon: <FolderSync className="w-5 h-5 text-emerald-500" />,
    },
    {
      id: "feat-drag",
      title: "Fluid Drag & Drop Workspace",
      description: "Drop files directly into the minimized background desktop panel or folder watch list to process media in seconds.",
      icon: <MousePointerClick className="w-5 h-5 text-indigo-500" />,
    },
  ];

  return (
    <section id="features" className="py-24 bg-gradient-to-b from-white to-[#FAF9FE] relative">
      <div className="max-w-7xl mx-auto px-4 md:px-8">
        {/* Header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <span className="text-xs font-bold font-mono tracking-wider text-violet-600 uppercase bg-violet-50 px-3.5 py-1.5 rounded-full">
            Technical Architecture
          </span>
          <h2 className="font-display font-bold text-3xl sm:text-4xl text-slate-900 tracking-tight mt-4 mb-5">
            Engineered for{" "}
            <span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
              maximum power
            </span>
          </h2>
          <p className="text-slate-500 text-base font-light">
            Why send confidential layouts and corporate multimedia to server queues? Protect your pipelines with high-speed local processing.
          </p>
        </div>

        {/* Feature Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="features-cards-grid">
          {featuresList.map((feature, i) => (
            <motion.div
              key={feature.id}
              initial={{ opacity: 0, y: 25 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ delay: i * 0.05, duration: 0.5 }}
              whileHover={{ y: -6, shadow: "0 20px 40px -15px rgba(0,0,0,0.07)" }}
              className="p-8 rounded-[24px] bg-white border border-slate-100 shadow-md shadow-slate-100/30 text-left transition-all relative group overflow-hidden"
              id={feature.id}
            >
              {/* Highlight background shine */}
              <div className="absolute inset-0 bg-gradient-to-br from-violet-50/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

              <div className="w-12 h-12 rounded-2xl bg-slate-50 border border-slate-100/50 flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 group-hover:border-violet-100 group-hover:bg-violet-50/20 transition-all duration-300">
                {feature.icon}
              </div>

              <div>
                <h3 className="font-display font-semibold text-lg text-slate-800 mb-2.5 tracking-tight group-hover:text-violet-600 transition-colors">
                  {feature.title}
                </h3>
                <p className="text-slate-500 text-sm leading-relaxed font-light">
                  {feature.description}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}