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

const FeatureCard = ({ icon, title, description }) => (
  <div 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={icon} alt={title} width={24} height={24} />
      </div>
      <h3 className="text-lg font-semibold text-teal-700 leading-tight">{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">{description}</p>
  </div>
);

export default function HereditaryCancerPanel() {
  const features = [
    { 
      title: "Comprehensive Gene Coverage", 
      desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others.",
      icon: "/images/icons/gene-coverage.png"
    },
    { 
      title: "Germline Variant Detection", 
      desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk.",
      icon: "/images/icons/variant-detection.png"
    },
    { 
      title: "Family-Centered Testing", 
      desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention.",
      icon: "/images/icons/family-centered-testing.png"
    },
    { 
      title: "Clinical Actionability", 
      desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning.",
      icon: "/images/icons/clinical-actionability.png"
    },
    { 
      title: "High Sensitivity & Specificity", 
      desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling.",
      icon: "/images/icons/high-sensitivity-specificity.png"
    },
    { 
      title: "Expert Interpretation & Reporting", 
      desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases.",
      icon: "/images/icons/expert-interpretation-reporting.png"
    }
  ];

  const points = [
    "About 5-10% of all cancers are linked to inherited genetic mutations, often going undetected until late stages or after multiple family members are affected.",
    "The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), Neurofibromatosis (NF) etc.",
    "Early identification of germline mutations enables proactive clinical decisions, including risk-reducing strategies, targeted surveillance, and family cascade testing.",
    "Studies show that genetic testing in hereditary cancer cases improves outcomes and informs care for both patients and at-risk relatives."
  ];

  return (
    <section className="mx-auto px-8 pt-8">
      <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Hereditary Cancer Panel</h2>
      
      <div className="mb-8">
        <ul className="space-y-4">
          {points.map((point, idx) => (
            <li key={idx} className="flex items-start">
              <span 
                className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
                style={{backgroundColor: '#faae31'}}
              ></span>
              <p className="text-gray-600 leading-relaxed text-base text-justify">
                {point}
              </p>
            </li>
          ))}
        </ul>
      </div>

      <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) => (
          <FeatureCard
            key={index}
            icon={feature.icon}
            title={feature.title}
            description={feature.desc}
          />
        ))}
      </div>
    </section>
  );
}