// app/dna-sequencing/snp-genotyping/components/SNPIntroduction.jsx

import React from 'react';

const SNPIntroduction = () => {
  const contentItems = [
    "ddRAD sequencing (Double Digest Restriction-site Associated DNA) is based on the Restriction Fragmentation technique combined with Next-Generation Sequencing (NGS). It is a robust approach for \"genotyping and SNP discovery\" that doesn't require a reference genome.",
    "The ddRAD workflow utilizes the precise cut-site specificity of restriction endonucleases to create library fragments from unique genomic regions. These fragments are then selected and sequenced, capturing data from identical genomic regions across samples.",
    "In the bioinformatics analysis, reads are aligned to either a reference genome or de novo assembly to detect SNVs and other genetic variations. This analysis supports studies on genetic diversity, population structure, and trait associations, with advanced tools enabling the processing of large datasets to achieve high genotyping accuracy.",
    "With the potential to develop hundreds to tens of thousands of genetic markers, ddRAD is ideal for applications in population genetics, germplasm assessment, marker-trait associations, GWAS, and QTL mapping. Its targeted, reproducible approach makes it a valuable tool for ecological and agricultural genomics."
  ];

  return (
    <div className="w-full min-w-0 bg-white">
      {/* Main container with two columns */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
        
        {/* Left Column - Content */}
        <div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
          <section>
            <h2 className="text-2xl sm: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 sm: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 break-words" style={{ fontSize: 'inherit' }}>{item}</span>
                </li>
              ))}
            </ul>
          </section>
        </div>

        {/* Right Column - Image */}
        <div className="w-full min-w-0 relative p-4 lg:p-6">
          <div className="flex flex-col items-center justify-center">
            <div className="w-full max-w-md">
              <img 
                src="/images/dna/SNP-based_genotyping_(ddRAD).png"
                alt="SNP Genotyping Overview"
                className="w-full h-auto object-contain"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SNPIntroduction;