operify/app/health/rare-disorders/exomemito/components/OperifyExomeMito.jsx

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 OperifyExomeMito() {
  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: "Includes SMN1, SMN2, DMD.",
      icon: "/images/icons/functional-genomics.png"
    },
    { 
      title: "Aneuploidy & Ploidy Estimation", 
      desc: "Detects abnormal chromosome numbers and sex karyotype.",
      icon: "/images/icons/chromosomal.png"
    },
    { 
      title: "Reanalysis & Reclassification", 
      desc: "Updates based on latest scientific knowledge.",
      icon: "/images/icons/reanalysis.png"
    }
  ];

  const genomeCoverage = [
    { genome: "Nuclear Genome", coverage: "Protein-coding regions of ~20000 genes" },
    { genome: "Mitochondrial genome", coverage: "37 genes" }
  ];

  const points = [
    "The Operify ExomeMito Panel offers a unified solution by integrating whole exome sequencing with complete mitochondrial genome analysis—addressing both nuclear and mitochondrial causes of disease.",
    "This combined approach is especially valuable in diagnosing complex, multisystemic, and rare disorders, where variants may exist across both genomes.",
    "Mitochondrial disorders, though individually rare, are clinically significant, affecting approximately 1 in 5,000 individuals and often missed in standard testing.",
    "Studies show that adding mitochondrial sequencing to exome testing increases diagnostic yield by up to 20%, offering greater clarity and clinical confidence. (PMID: 30369941)",
    "While screening for rare genetic disorders, it's essential not to overlook the rarest among them-mitochondrial disorders, which occur in approximately 1 in 5,000 individuals. Although individually rare, their cumulative impact is significant in the context of rare disease diagnostics. Multiple studies have demonstrated a substantial increase in diagnostic yield—up to 20%—when mitochondrial genome sequencing is performed alongside whole exome sequencing. Reference: PMID: 30369941"
  ];

  return (
    <section className="mx-auto px-8 pt-10">
      <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
      <h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
      
      <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>

      <div className="mb-8">
        <h3 className="text-2xl font-semibold text-teal-700 mb-4">Genome Coverage</h3>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse border border-gray-300 rounded-lg">
            <thead>
              <tr className="bg-teal-50">
                <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Genome</th>
                <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Coverage</th>
              </tr>
            </thead>
            <tbody>
              {genomeCoverage.map((item, idx) => (
                <tr key={idx} className="hover:bg-teal-50">
                  <td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{item.genome}</td>
                  <td className="border border-gray-300 px-6 py-3 text-gray-600">{item.coverage}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </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>
  );
}