import React from 'react';

const PackagingGuideline = () => {
  const guidelines = [
    "Seal the tubes with parafilm for transportation. To prevent the tubes from being crushed and broken during transit (leading to sample loss), insert sample tubes into 50 ml centrifuge tubes (or other rigid supports), which can also be packed with cotton, foam, etc.",
    "To prevent sample loss and/or cross-contamination, tightly seal all wells of the plate with an adhesive sheet or foil. Protect the plates or strip tubes in a sturdy box with plenty of cushioning. Sample shipments of plates should be carried out on frozen blue ice or dry ice to ensure that the samples remain frozen during shipment.",
    "To prevent sample loss and cross-contamination, we recommend securely sealing all wells of the plate with an adhesive sheet or foil. Place the plates or strip tubes in a sturdy box with ample cushioning. Ship the samples with a surplus of frozen blue ice blocks or dry ice to ensure they remain frozen throughout shipment.",
    "For leak prevention and to avoid cross-contamination, use one of the following sealing methods:\n(a) Cap the wells with matching 8-strip caps, ensuring a tight seal. These caps are typically ordered separately from the plates.\n(b) For foil seals, use a heat seal (preferred method) like \"Thermo Scientific Easy Peel Heat Sealing Foil\" that allows for resealing, or adhesive aluminum foil seals such as \"AlumaSeal CS Film.\""
  ];

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-3xl font-bold text-teal-700 mb-4">Packaging Guideline</h3>
      </div>
      
      <div className="space-y-6">
        <ul className="space-y-4">
          {guidelines.map((guideline, idx) => (
            <li key={idx} className="flex items-start">
              <span 
                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
                style={{backgroundColor: '#faae31'}}
              ></span>
              <p className="leading-relaxed" style={{ color: '#555555' }}>
                {guideline.split('\n').map((line, lineIdx) => (
                  <React.Fragment key={lineIdx}>
                    {lineIdx > 0 && <br />}
                    {line.startsWith('(a)') || line.startsWith('(b)') ? (
                      <>
                        <span className="font-medium">{line.substring(0, 3)}</span>
                        {line.substring(3)}
                      </>
                    ) : (
                      line
                    )}
                  </React.Fragment>
                ))}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default PackagingGuideline;