// EpigenomicsIntroduction.jsx

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

const EpigenomicsIntroduction = () => {
  const contentItems = [
    "Epigenomics Sequencing is a comprehensive approach to analyze epigenetic modifications across genomes, providing enriched genomic view of cellular memory and gene regulation.",
    "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 and epigenetic modifications.",
    "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
  ];
  
  const advantageItems = [
    "Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
    "Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
    "Reveals epigenetic alterations associated with diseases, development, and environmental responses, providing insights into cellular memory and inheritance patterns.",
    "Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
  ];

  const serviceTypes = [
    "Whole Genome Bisulphite Sequencing (WGBS)",
    "Chip Sequencing",
    "ATAC Sequencing"
  ];

  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 className="mb-8">
            <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/epigenomic_flow.svg"
                  alt="Epigenomics 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/epigenomics-overview.png"
                  alt="Epigenomics Overview"
                  className="w-full h-auto object-contain"
                />
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  );
};

export default EpigenomicsIntroduction;