// components/shared/IntroductionLayout.jsx
const IntroductionLayout = ({ 
  title = "Introduction and Workflow",
  contentItems = [],
  imageUrl,
  imageAlt = "",
  badgeText,
  badgeSubtext,
  backgroundColor = "#f8f9fa",
  badgeColor = "bg-teal-600"
}) => {
  return (
    <section className="py-0 md:py-12 lg:py-10 w-full">
      <div className="w-full max-w-full px-0">
        <h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
          {title}
        </h2>
        
        {/* Two column layout */}
        <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] w-full gap-4">
          {/* Left side content */}
          <div className="px-6 lg:px-9 py-6 lg:py-8 flex items-start">
            <ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base text-justify">
              {contentItems.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
          </div>
          
          {/* Right side image - increased image size */}
          <div className="flex items-center justify-center p-2 lg:p-4 w-full">
            {imageUrl && (
              <img 
                src={imageUrl} 
                alt={imageAlt}
                className="object-contain"
                style={{ height: '350px', width: '500px' }}
              />
            )}
          </div>
        </div>
      </div>
    </section>
  );
};
export default IntroductionLayout;