managementwebsite01/artifacts/dental-app/src/components/Features.tsx

import { motion } from "framer-motion";
import { MessageSquare, Clock, Shield } from "lucide-react";
import intuitiveSrc from "@assets/generated_images/intuitive-interface.jpg";
import patientSrc from "@assets/generated_images/patient-connection-v2.jpg";
import dataSrc from "@assets/generated_images/data-control-v2.jpg";

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
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="space-y-8"
        >
          {/* Feature 1 — full-width with image on the right */}
          <motion.div
            variants={itemVariants}
            className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col md:flex-row"
            data-testid="feature-card-1"
          >
            <div className="flex-1 p-8 md:p-10 flex flex-col justify-center">
              <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>
            </div>
            <div className="md:w-1/2 h-64 md:h-auto overflow-hidden">
              <img
                src={intuitiveSrc}
                alt="Dental professional using AI chat interface"
                className="w-full h-full object-cover"
                data-testid="img-intuitive-interface"
              />
            </div>
          </motion.div>

          {/* Features 2 & 3 — two columns below, each with image */}
          <div className="grid md:grid-cols-2 gap-8">
            <motion.div
              variants={itemVariants}
              className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col"
              data-testid="feature-card-2"
            >
              <div className="h-52 overflow-hidden">
                <img
                  src={patientSrc}
                  alt="Dental receptionist managing after-hours patient communication"
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  data-testid="img-patient-connection"
                />
              </div>
              <div className="p-8 flex flex-col flex-1">
                <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>
              </div>
            </motion.div>

            <motion.div
              variants={itemVariants}
              className="bg-white rounded-3xl shadow-sm border border-border hover:shadow-lg transition-all duration-300 group overflow-hidden flex flex-col"
              data-testid="feature-card-3"
            >
              <div className="h-52 overflow-hidden">
                <img
                  src={dataSrc}
                  alt="Secure local data storage and backup system"
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  data-testid="img-data-control"
                />
              </div>
              <div className="p-8 flex flex-col flex-1">
                <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>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}