'use client';
import React from 'react';

const DNATable = () => {
  const sequencingData = [
    {
      approach: { name: 'Whole-Genome Sequencing (WGS)', link: '/dna-sequencing/whole-genome-sequencing' },
      description: (
        <>
          Sequencing of the entire genome to provide comprehensive genetic data. It includes{' '}
          <a href="/dna-sequencing/whole-genome-sequencing/denovo" className="text-teal-600 hover:underline">
            WGS-DeNovo
          </a>{' '}
          and{' '}
          <a href="/dna-sequencing/whole-genome-sequencing/resequencing" className="text-teal-600 hover:underline">
            WGS-ReSequencing
          </a>
        </>
      ),
      platform: 'Illumina, PacBio SMRT, Oxford Nanopore',
      applications: 'Mapping genetic diversity, disease research, evolutionary studies'
    },
    {
      approach: { name: 'Enrichment Sequencing', link: '/dna-sequencing/enrichment-sequencing' },
      description: (
        <>
          Sequencing of the regions of interest of the genome to provide comprehensive genetic data. It includes{' '}
          <a href="/dna-sequencing/enrichment-sequencing/whole-exome" className="text-teal-600 hover:underline">
            Whole-Exome
          </a>,{' '}
          <a href="/dna-sequencing/enrichment-sequencing/amplicon-sequencing" className="text-teal-600 hover:underline">
            Amplicon
          </a>{' '}
          and{' '}
          <a href="/dna-sequencing/enrichment-sequencing/targeted-sequencing" className="text-teal-600 hover:underline">
            Custom Sequencing
          </a>
        </>
      ),
      platform: 'Illumina',
      applications: 'Disease gene identification, rare disorders, clinical genomics'
    },
    {
      approach: { name: 'Single Cell DNA Sequencing', link: '/dna-sequencing/single-cell-dna-sequencing' },
      description: 'Analyzes DNA from individual cells to study cellular heterogeneity, copy number variations, and genetic diversity at single-cell resolution.',
      platform: '10X Genomics Chromium System followed by Illumina Sequencer',
      applications: 'Cancer research, developmental biology, rare cell analysis'
    },
    {
      approach: { name: 'Metagenomics Sequencing', link: '/dna-sequencing/metagenomics-sequencing' },
      description: 'Studies genetic material recovered directly from environmental samples to explore microbial diversity.',
      platform: 'Illumina, PacBio SMRT',
      applications: 'Microbial community analysis, pathogen detection, environmental research'
    },
    {
      approach: { name: 'Epigenomics Sequencing', link: '/dna-sequencing/epigenomics-sequencing' },
      description: (
        <>
          Studies the epigenetic modifications (e.g., DNA methylation, histone modification) of the genome. It includes{' '}
          <a href="/dna-sequencing/epigenomics-sequencing/wgbs" className="text-teal-600 hover:underline">
            Whole Genome Bisulphite Sequencing (WGBS)
          </a>,{' '}
          <a href="/dna-sequencing/epigenomics-sequencing/chip-sequencing" className="text-teal-600 hover:underline">
            ChIP Sequencing
          </a>,{' '}
          <a href="/dna-sequencing/epigenomics-sequencing/atac-sequencing" className="text-teal-600 hover:underline">
            ATAC Sequencing
          </a>
        </>
      ),
      platform: 'Illumina',
      applications: 'Epigenetic research, cancer studies, imprinting disorders'
    },
    {
      approach: { name: 'Genome Mapping', link: '/dna-sequencing/genome-mapping' },
      description: (
        <>
          Focuses on determining the structure and order of genes within a genome. It includes{' '}
          <a href="/dna-sequencing/genome-mapping/hi-c-mapping" className="text-teal-600 hover:underline">
            Hi-C Mapping
          </a>{' '}
          and{' '}
          <a href="/dna-sequencing/genome-mapping/optical-mapping" className="text-teal-600 hover:underline">
            Optical Mapping
          </a>
        </>
      ),
      platform: 'Illumina',
      applications: 'Structural variant detection, genomic rearrangements'
    },
    {
      approach: { name: 'Whole Genome Long Read Sequencing', link: '/dna-sequencing/long-read-sequencing' },
      description: 'Sequencing technologies that provide long DNA reads, suitable for de novo assembly and complex regions.',
      platform: 'PacBio SMRT, Oxford Nanopore',
      applications: 'De novo assembly, complex genome sequencing, repetitive region analysis'
    },
    {
      approach: { name: 'Hybrid Genome Sequencing', link: '/dna-sequencing/hybrid-genome-sequencing' },
      description: 'Combines short-read and long-read sequencing to optimize accuracy and genome assembly.',
      platform: 'Illumina and Oxford Nanopore or PacBio SMRT',
      applications: 'Comprehensive genome analysis, structural variation studies, complex genome sequencing'
    },
    {
      approach: { name: 'SNP-based Genotyping', link: '/dna-sequencing/snp-genotyping' },
      description: 'Genotyping is the process of determining the genetic constitution (genotype) of an individual by analyzing their DNA. It identifies genetic variations, such as single nucleotide variants (SNVs), insertions, deletions, or other mutations.',
      platform: 'PCR-Based, Microarray-Based, NGS-Based Genotyping',
      applications: 'Genetic variation analysis, disease association studies, population genetics'
    },
    {
      approach: { name: 'Microsatellites (SSR/STR) Genotyping', link: '/dna-sequencing/microsatellites-ssr-str' },
      description: 'Analyzes short tandem repeats (STRs) or simple sequence repeats (SSRs) to study genetic diversity, population structure, and individual identification.',
      platform: 'Capillary electrophoresis, NGS-based approaches',
      applications: 'Population genetics, breeding programs, forensic analysis, paternity testing'
    }
  ];

  return (
    <section className="pt-4 bg-white">
      <div className="container max-w-none px-6">
        <h3 className="text-lg font-semibold text-gray-600 mb-4">DNA Sequencing Approaches</h3>
        <div className="mb-6 text-justify">
          <p className="text-gray-600 leading-relaxed text-base">
            Different DNA sequencing approaches and their applications are summarized below:
          </p>
        </div>

        <div className="overflow-x-auto mb-8 justify-center">
          <table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm ">
            <thead>
              <tr className="bg-teal-50">
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Sequencing Approach
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Description
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Sequencing Platform
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Applications
                </th>
              </tr>
            </thead>
            <tbody>
              {sequencingData.map((row, index) => (
                <tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
                  <td className="border border-gray-300 px-4 py-3 align-top">
                    <a href={row.approach.link} className="text-gray-600 hover:underline font-medium text-base">
                      {row.approach.name}
                    </a>
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                    {row.description}
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium">
                    {row.platform}
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                    {row.applications}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default DNATable;