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." },
    { title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
    { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
    { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
    { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
    { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
    { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
  ];

  return (
    <section className="mx-auto px-10 pt-12">
      <h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify Hereditary Cancer Panel</h2>
      
      <div className="mb-8">
        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
          <strong>About 5-10% of all cancers are linked to inherited genetic mutations</strong>, often going 
          undetected until late stages or after multiple family members are affected.
        </p>
        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
          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.
        </p>
        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
          Early identification of germline mutations enables proactive clinical decisions, including 
          risk-reducing strategies, targeted surveillance, and family cascade testing.
        </p>
        <p className="text-gray-600 leading-relaxed text-base text-justify">
          Studies show that genetic testing in hereditary cancer cases improves outcomes and informs 
          care for both patients and at-risk relatives.
        </p>
      </div>

      <h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</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">Feature</th>
              <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
            </tr>
          </thead>
          <tbody>
            {features.map((feature, idx) => (
              <tr key={idx} className="hover:bg-gray-50">
                <td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
                <td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}