const SNPWorkflow = ({ 
  workflowImage = "/images/flowchart/WGS_flow.svg"
}) => {
  return (
    <section className={'py-5 lg:py-5'}>
      <div className="container-fluid px-4 lg:px-6">
        <h2 className="text-3xl font-bold text-teal-700 mb-4">
          Introduction and Workflow
        </h2>
        
        <div className="lg:px-6 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
          <div>
            <p className="text-base leading-relaxed" style={{color: '#555555'}}>
              SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, 
              offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in 
              population genetics, evolutionary biology, and plant and animal breeding.
            </p>
          </div>
          
          <div className="flex justify-center lg:justify-end">
            <img 
              src={workflowImage} 
              alt="SNP Genotyping Workflow" 
              className="max-w-full h-auto rounded-lg"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default SNPWorkflow;