import Image from 'next/image';

export default function HumanResearch() {
  return (
    <div id="human-research" className="bg-white p-6 rounded-lg shadow-md">
      {/* Heading (Above Image and Text) */}
      <h2 className="text-3xl font-bold text-gray-800 mb-4">Human Research</h2>
      {/* Flex container for image and text (description paragraphs) */}
      <div className="flex flex-col md:flex-row gap-6 mb-6">
        {/* Image Section (Left) */}
        <div className="flex-shrink-0 md:w-1/3">
          <Image
            src="/images/blog/human_fn.jpg"
            alt="Human Research"
            width={300}
            height={200}
            className="object-cover rounded-lg w-full h-48 md:h-full"
          />
        </div>
        {/* Text Section (Right) */}
        <div className="flex-1">
          <p className="text-gray-600 mb-4">
            Human genomics is at the forefront of understanding complex diseases, genetic disorders, and personalized medicine. By sequencing genomes or exomes, researchers can identify genomic alterations that contribute to rare diseases, cancer, and complex disorders such as diabetes or heart disease. Rapid sequencing technologies enable high-resolution insights into genetic variants, allowing for better diagnostics and targeted therapeutic strategies.
          </p>
        </div>
      </div>
      {/* Services Table (Row-wise) */}
      <h3 className="text-lg font-semibold text-gray-800 mt-4 mb-2">Our sequencing services for Human Research includes:</h3>
      <table className="w-full border-collapse border border-gray-300">
        <tbody>
          <tr className="bg-gray-100">
            <td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">DNA Sequencing</td>
            <td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Targeted), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
          </tr>
          <tr>
            <td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">RNA Sequencing</td>
            <td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Total RNA, mRNA, Small RNA, Long Non-Coding, IncRNA, Iso Sequencing</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}