import { motion } from 'framer-motion';
import { features } from '../../data/content';
import { SectionShell } from '../ui/SectionShell';
import { IconByName } from '../ui/icons';

export function Features() {
  return (
    <section id="features" className="relative py-20 md:py-28">
      <div className="absolute inset-0 bg-gradient-to-b from-nebula/30 to-transparent" />
      <SectionShell
        eyebrow="Platform"
        title="Fitur Enterprise untuk Operasi Tanpa Blind Spot"
        subtitle="Modul siap pakai dengan micro-interaction dan visual high-tech — konsisten di seluruh cabang."
      >
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {features.map((f, i) => (
            <motion.div
              key={f.title}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-30px' }}
              transition={{ delay: (i % 4) * 0.05, duration: 0.45 }}
              whileHover={{
                y: -6,
                boxShadow: '0 0 32px rgba(34,211,238,0.15)',
              }}
              className="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 backdrop-blur-md transition-colors hover:border-cyan-400/35"
            >
              <div className="absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100">
                <div className="absolute -inset-px rounded-2xl bg-gradient-to-br from-cyan-400/20 via-transparent to-sky-500/10 blur-xl" />
              </div>
              <div className="relative flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-300">
                  <IconByName name={f.icon} className="h-5 w-5" />
                </div>
                <h3 className="font-semibold text-white">{f.title}</h3>
              </div>
            </motion.div>
          ))}
        </div>
      </SectionShell>
    </section>
  );
}
