operify/app/dna-sequencing/long-read-sequencing/components/LongReadComparison.jsx

const LongReadComparison = () => {
  const comparisonData = [
    {
      category: "Read Length",
      pacbio: "Average ≥ 15 kb\nbp to kb",
      nanopore: "Average > 17 kb\nKb to Mb"
    },
    {
      category: "Variant Calling",
      pacbio: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision",
      nanopore: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision"
    },
    {
      category: "Amplification/GC Bias",
      pacbio: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity",
      nanopore: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity"
    },
    {
      category: "Machine Errors",
      pacbio: "Relaxed requirement for cycle efficiency",
      nanopore: "Relaxed requirement for cycle efficiency"
    },
    {
      category: "DNA Methylation Detection",
      pacbio: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc",
      nanopore: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc"
    }
  ];

  const formatContent = (content) => {
    if (content.includes("Long Read Length")) {
      return (
        <div>
          <span className="text-blue-600 font-medium">Long Read Length with High Accuracy:</span>
          {content.replace("Long Read Length with High Accuracy:", "")}
        </div>
      );
    } else if (content.includes("NO GC Bias")) {
      return (
        <div>
          <span className="text-blue-600 font-medium">NO GC Bias & Amplification Bias</span>
          {content.replace("NO GC Bias & Amplification Bias", "")}
        </div>
      );
    } else if (content.includes("Simultaneous")) {
      return (
        <div>
          <span className="text-blue-600 font-medium">Simultaneous Epigenetic Characterization</span>
          {content.replace("Simultaneous Epigenetic Characterization", "")}
        </div>
      );
    }
    return content;
  };

  return (
    <section className="py-4 bg-gray-50">
      <div className="container max-w-none px-6">
        <h2 className="text-3xl font-bold text-teal-700 mb-8">
          Comparison of Sequencers
        </h2>
        
        {/* Original Image Section */}
        <div className="mb-12">
          <div className="text-center">
            <img
              src="/images/comparison-sequencers.png"
              alt="Long Read Comparison Chart"
              className="w-full max-w-4xl mx-auto rounded-lg border shadow-md"
            />
          </div>
        </div>

        {/* Detailed Comparison Table Section */}
        <div className="mb-6">
          <h3 className="text-lg font-semibold text-gray-600 mb-4">
            Comparison and specification of sequencing platforms between short-read and long-read sequencing on WGS
          </h3>
          <div className="mb-6 text-justify">
            <p className="text-gray-600 leading-relaxed text-base">
              Different sequencing platforms have unique characteristics and applications. The comparison below highlights key differences:
            </p>
          </div>
        </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">
                  Platform Types
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  PacBio Sequel II/IIe
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Nanopore PromethION
                </th>
              </tr>
            </thead>
            <tbody>
              {comparisonData.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 text-gray-600 font-medium text-base">
                    {row.category}
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                    <div className="whitespace-pre-line">
                      {formatContent(row.pacbio)}
                    </div>
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                    <div className="whitespace-pre-line">
                      {formatContent(row.nanopore)}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default LongReadComparison;