import React from 'react';
import Image from 'next/image';

const ExomeMitoKeyFeatures = () => {
  const features = [
    { 
      title: "High Mean Target Depth", 
      desc: "≥100X coverage for reliable detection.",
      icon: "/images/icons/deep-coverage.png"
    },
    { 
      title: "High Base Quality", 
      desc: "≥90% of bases with Q30 score.",
      icon: "/images/icons/data-quality.png"
    },
    { 
      title: "Scope of Test", 
      desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome.",
      icon: "/images/icons/scope-test.png"
    },
    { 
      title: "Uniparental Disomy", 
      desc: "Detects regions important in rare recessive conditions.",
      icon: "/images/icons/variant-detection.png"
    },
    { 
      title: "Homologous Gene Analysis", 
      desc: <span><em>Includes SMN1, SMN2, DMD</em>.</span>,
      icon: "/images/icons/functional-genomics.png"
    },
    { 
      title: "Aneuploidy & Ploidy Estimation", 
      desc: "Detects abnormal chromosome numbers and sex karyotype.",
      icon: "/images/icons/chromosomal.png"
    }
  ];

  return (
    <section className="mx-auto px-8 pt-10">
      <h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {features.map((feature, index) => (
          <div 
            key={index}
            className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group" 
            style={{ backgroundColor: '#f2fcfc' }}
          >
            <div className="flex items-center space-x-4 mb-4">
              <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <Image src={feature.icon} alt={feature.title} width={24} height={24} />
              </div>
              <h3 className="text-lg font-semibold text-teal-700 leading-tight">{feature.title}</h3>
            </div>
            <div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
              <div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
            </div>
            <p className="text-gray-600 leading-relaxed text-sm text-justify">{feature.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

export default ExomeMitoKeyFeatures;