// app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx

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

const WGSIntroduction = () => {
  const contentItems = [
    "Whole Genome Sequencing (WGS) is a comprehensive approach to analyze entire genomes base-by-base, providing a complete genomic view.",
    "The workflow includes isolating DNA, fragmenting it, and sequencing to produce millions of short reads.",
    "In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
    "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
  ];
  
  const advantageItems = [
    "Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
    "Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
    "Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
    "Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
  ];

  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/WGS_flow.svg"
                  alt="WGS 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="WGS Overview"
                  className="w-full h-auto object-contain"
                />
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  );
};

export default WGSIntroduction;