operify/app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx

import React from 'react';
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';

const MetatranscriptomicsPipeline = ({
  title = "Metatranscriptomics",
  backgroundColor = "bg-gray-50",
  cardColor = "bg-blue-200",
  textColor = "text-blue-800",
  arrowColor = "text-gray-600",
  className = "",
  cardClassName = "",
  titleClassName = ""
}) => {
  const topSteps = [
    "Raw Sequencing Data (fastq files)",
    "Quality Control",
    "High Quality Sequencing Data (fastq file)",
    "Retain mRNA reads and remove rRNA Reads"
  ];

  const bottomLeftSteps = [
    "Reference Genome Alignment",
    "Gene Expression Analysis",
    "Differential Analysis"
  ];

  const bottomCenterSteps = [
    "Transcript Assembly",
    "Structural Identification",
    "SNPs, SSRs Analysis eQTLs Analysis"
  ];

  const bottomRightSteps = [
    "Functional Annotation",
    "Statistical Analysis"
  ];

  return (
    <section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
      <div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
        <h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
          {title}
        </h2>

        {/* Pipeline Flowchart */}
        <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
          <div className="flex justify-center">
            <div className="w-full max-w-6xl">
              <div className="relative">
                {/* Mobile Layout - Single Column */}
                <div className="block lg:hidden">
                  <div className="flex flex-col items-center space-y-3">
                    {topSteps.map((step, index) => (
                      <React.Fragment key={index}>
                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
                        </div>
                        {index < topSteps.length - 1 && (
                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
                        )}
                      </React.Fragment>
                    ))}
                    
                    {/* Bottom sections for mobile */}
                    <div className="grid grid-cols-1 gap-4 w-full mt-6">
                      {bottomLeftSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
                            <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < bottomLeftSteps.length - 1 && (
                            <ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
                          )}
                        </React.Fragment>
                      ))}
                      
                      {bottomCenterSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
                            <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < bottomCenterSteps.length - 1 && (
                            <ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
                          )}
                        </React.Fragment>
                      ))}
                      
                      {bottomRightSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
                            <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < bottomRightSteps.length - 1 && (
                            <ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
                          )}
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Desktop Layout */}
                <div className="hidden lg:block">
                  {/* Top vertical sequence */}
                  <div className="flex flex-col items-center space-y-4 mb-8">
                    {topSteps.map((step, index) => (
                      <React.Fragment key={index}>
                        <div className={`${cardColor} rounded-lg p-4 w-96 text-center border ${cardClassName}`}>
                          <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
                        </div>
                        {index < topSteps.length - 1 && (
                          <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                        )}
                      </React.Fragment>
                    ))}
                  </div>

                  {/* Branching arrows from "Retain mRNA reads and remove rRNA Reads" */}
                  <div className="flex justify-center mb-8">
                    <div className="relative">
                      {/* Left branch arrow */}
                      <div className="absolute -left-32 top-0">
                        <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                      </div>
                      
                      {/* Right branch arrow */}
                      <div className="absolute left-32 top-0">
                        <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                      </div>
                    </div>
                  </div>

                  {/* Bottom three columns */}
                  <div className="grid grid-cols-3 gap-8">
                    {/* Left Column */}
                    <div className="flex flex-col items-center space-y-4">
                      {bottomLeftSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < bottomLeftSteps.length - 1 && (
                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                          )}
                        </React.Fragment>
                      ))}
                    </div>

                    {/* Center Column */}
                    <div className="flex flex-col items-center space-y-4">
                      {bottomCenterSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < bottomCenterSteps.length - 1 && (
                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                          )}
                        </React.Fragment>
                      ))}
                    </div>

                    {/* Right Column */}
                    <div className="flex flex-col items-center space-y-4">
                      {bottomRightSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < bottomRightSteps.length - 1 && (
                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                          )}
                        </React.Fragment>
                      ))}
                    </div>
                  </div>

                  {/* Horizontal arrows connecting bottom sections */}
                  <div className="absolute bottom-4 left-1/3 transform -translate-x-1/2">
                    <ArrowRight className={`w-6 h-6 ${arrowColor}`} />
                  </div>
                  <div className="absolute bottom-4 right-1/3 transform translate-x-1/2">
                    <ArrowRight className={`w-6 h-6 ${arrowColor}`} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MetatranscriptomicsPipeline;