import { motion } from 'framer-motion';
import { Layers, Shield, Settings, MousePointerClick, Smartphone, BarChart3 } from 'lucide-react';
import { cn } from '../lib/utils';

export default function Features() {
  const features = [
    {
      icon: <Layers />,
      title: "Modular Structure",
      description: "Build once, reuse infinitely. Component-based architecture for your digital products."
    },
    {
      icon: <Shield />,
      title: "Bank-grade Security",
      description: "Enterprise-level protection for your content and customer data out of the box."
    },
    {
      icon: <Settings />,
      title: "Zero Setup Required",
      description: "Skip the technical headaches. Everything works seamlessly perfectly from day one."
    },
    {
      icon: <MousePointerClick />,
      title: "One-Click Deployment",
      description: "Push your products live to thousands of customers with a single action."
    },
    {
      icon: <Smartphone />,
      title: "Mobile Optimized",
      description: "Flawless experience across all devices. Never lose a sale due to poor UX."
    },
    {
      icon: <BarChart3 />,
      title: "Advanced Analytics",
      description: "Deep insights into customer behavior, drop-off points, and conversion rates."
    }
  ];

  return (
    <section className="py-24 bg-neutral-950/50" id="features">
      <div className="container mx-auto px-6 max-w-7xl">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-8">
          <div className="max-w-2xl">
            <h2 className="text-3xl md:text-5xl font-display font-medium mb-6 tracking-tight">
              Everything you need. <br/><span className="text-neutral-500">Nothing you don't.</span>
            </h2>
            <p className="text-lg text-muted-foreground font-light">
              A comprehensive toolkit designed specifically for modern digital creators and founders.
            </p>
          </div>
          <button className="h-12 px-6 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 text-white font-medium text-sm transition-colors whitespace-nowrap self-start md:self-auto">
            View All Features
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="p-8 rounded-3xl bg-neutral-900/30 border border-white/5 hover:bg-neutral-800/50 hover:border-white/10 transition-all group"
            >
              <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 text-neutral-300 group-hover:text-white group-hover:scale-110 transition-all">
                {feature.icon}
              </div>
              <h3 className="text-xl font-medium mb-3">{feature.title}</h3>
              <p className="text-neutral-400 font-light leading-relaxed text-sm">
                {feature.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}