// 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."
  ];

  return (
    <div className="w-full bg-white">
      {/* Main container with two columns */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
        
        {/* Left Column - Content using existing IntroductionLayout structure */}
        <div className="px-6 lg:px-12 py-8">
          {/* Introduction Section */}
          <section className="mb-8">
            <h2 className="text-3xl font-bold text-teal-700 mb-4">
              Introduction and Workflow
            </h2>
            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
              {contentItems.map((item, index) => (
                <li key={index} className="flex items-start">
                  <span 
                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
                    style={{backgroundColor: '#faae31'}}
                  ></span>
                  <span className="text-justify">{item}</span>
                </li>
              ))}
            </ul>
          </section>

          {/* Advantage Section */}
          <section>
            <h2 className="text-3xl font-bold text-teal-700 mb-4">
              Advantage
            </h2>
            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
              {advantageItems.map((item, index) => (
                <li key={index} className="flex items-start">
                  <span 
                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
                    style={{backgroundColor: '#faae31'}}
                  ></span>
                  <span className="text-justify">{item}</span>
                </li>
              ))}
            </ul>
          </section>
        </div>

        {/* Right Column - Custom Content with Image and SVG */}
        <div className="relative p-4">
          <div className="flex flex-col h-full space-y-4">
            {/* Top Section - Flowchart with larger fixed width */}
            <div className="w-full flex items-center justify-center py-6">
              <div className="w-full max-w-md flex items-center justify-center">
                <img 
                  src="/images/flowchart/enrichment_flow.svg"
                  alt="ISO Certified Process Flow"
                  className="w-full h-auto object-contain"
                />
              </div>
            </div>
            
            {/* Bottom Section - Image with same width */}
            <div className="flex items-center justify-center">
              <div className="w-full max-w-md flex items-center justify-center">
                <img 
                  src="/images/dna/whole_genome_seq-normal_denovo.png"
                  alt="Enrichment Overview"
                  className="w-full h-auto object-contain"
                />
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  );
};

export default EnrichmentIntroduction;