// app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx

import IntroductionLayout from '../../../components/shared/IntroductionLayout';

const EnrichmentIntroduction = () => {
  const contentItems = [
    "Enriched Sequencing is a comprehensive approach to analyze part of genomes base-by-base, providing enriched genomic view.",
    "The workflow includes isolating DNA, fragmenting it, capturing the regions of interest followed by sequencing to produce millions of short reads.",
    "In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
    "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
  ];
  const advantageItems = [
    "Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
    "Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
    "Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
    "Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
  ];

  const customBadgeContent = (
    <div className="text-center">
      <div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
        <span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
      </div>
      <div className="flex flex-col space-y-2">
        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
          Whole Exome DNA Sequencing
        </div>
        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
          Amplicon Sequencing (16S/18S/ITS)
        </div>
        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
          Targeted Sequencing
        </div>
      </div>
    </div>
  );

  return (
    <IntroductionLayout
      introTitle="Introduction and Workflow"
      advantageTitle="Advantage"
      introItems={contentItems}
      advantageItems={advantageItems}
      imageUrl="/images/dna/enrichment-overview.png"
      imageAlt="Enrichment Overview"
      backgroundColor="#f8f9fa"
      customBadgeContent={customBadgeContent}
      useParagraphs={true}
    />
  );
};

export default EnrichmentIntroduction;