import { motion } from "framer-motion";
import { MessageSquare, Clock, Shield } from "lucide-react";

export function Features() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.2 }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
  };

  return (
    <section id="features" className="py-24 bg-secondary">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-[48px] font-bold text-primary mb-4">
            A New Standard for Practice
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Everything you need to run your office, handled intuitively.
          </p>
        </div>

        <motion.div 
          className="grid md:grid-cols-3 gap-8"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
        >
          {/* Feature 1 */}
          <motion.div 
            variants={itemVariants}
            className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
            data-testid="feature-card-1"
          >
            <div className="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
              <MessageSquare className="w-7 h-7 text-primary" />
            </div>
            <h3 className="text-2xl font-bold text-primary mb-4">
              Real Intuitive Interface
            </h3>
            <p className="text-muted-foreground leading-relaxed">
              Chat with our AI agent to check eligibility and claims using your own words. No clicking around. Increase your work efficiency more than 10 times.
            </p>
          </motion.div>

          {/* Feature 2 */}
          <motion.div 
            variants={itemVariants}
            className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
            data-testid="feature-card-2"
          >
            <div className="w-14 h-14 bg-accent/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors">
              <Clock className="w-7 h-7 text-primary" />
            </div>
            <h3 className="text-2xl font-bold text-primary mb-4">
              24/7 Patient Connection
            </h3>
            <p className="text-muted-foreground leading-relaxed">
              After-hours messaging and calling handled automatically by AI, in your way. Never miss any patient inquiry.
            </p>
          </motion.div>

          {/* Feature 3 */}
          <motion.div 
            variants={itemVariants}
            className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
            data-testid="feature-card-3"
          >
            <div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors">
              <Shield className="w-7 h-7 text-[#158915]" />
            </div>
            <h3 className="text-2xl font-bold text-primary mb-4">
              Your Data, Your Control
            </h3>
            <p className="text-muted-foreground leading-relaxed">
              All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours.
            </p>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}