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


export default function OperifyExomeMito() {
  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">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>
    </section>
  );
}